Hello, Web Design!
This is the second part of a two-part web design tutorial. If you haven't already, go see "How to Build a Website in 10 Minutes" for the beginning of the lesson.
In that article, we walked you through the very basics of web design by using a plain-text editor. It's an exciting, powerful skill for hobbyists, or anyone who thinks they might interested in learning to do web design professionally.
So, let's jump right back in to your first web design lesson!
Step 3: Colors.
Books on how to create a website tend to be 300-500 pages long. We're not going to go so far here, but what's a website without a little color?
Your simple website now has one header, and two paragraphs, plus a link. It also has an amorphous thing called a "body." Here's how to create a website that uses your color choices.
First, modify the <body> tag so it looks like this.
<body style="background: black; color: white;">
Save that change and reload the page. Make sure you got the colons and semi-colons in the right places, or it won't work!
If all went well, your web page should now have white text on a black background.
Now, you'll notice that the link is very hard to read on a black background. You'll want to change the link color so that it stands out better.
Play with the color names and color codes you looked up earlier, replacing "black" with your chosen background color, and "white" with your chosen foreground color. These two style settings, placed in the body tag, will affect the entire page.
For a simple example, let's change it to a very light color of grey. Here's how to create a website link with a color choice:
<a style="color: #DDD;" href="http://www.5shades.com">Click to visit 5 Shades Media!</a>
You'll notice we inserted a style setting before the href setting, and you'll also notice we used a color code rather than a name. HTML is a very flexible language, but trust us, even if the color codes you've seen up til now have had 6 digits instead of three, the above will work.
You can simply add style="color: #DDD;" ahead of your existing link to get the same effect.
And that's it! That style setting can be added to almost anything, such as your <p> (paragraph) and <h1> (header) tags. Play around with your simple web page to see the results of your color choices.
Conclusion on How to Build a Website
As you can see, this is hardly something to show your clients. But from these few basic steps, you've learned the fundamentals about how to build a website:
-
How to structure a text file so that your web browser understands it as a web page
-
How to create basic headers and paragraphs
-
How to create links to other web pages or websites
-
How to add basic style settings either to the whole page, or to individual parts
If you were to view the source of any website, you'd see that every website is a complex arrangement of similar tricks of the trade. … albeit, usually much, much more complex than what we've explained here!
We hope you enjoyed learning a few pointers. Sick of staring at code already? 5 Shades Media will be happy to provide professional website design services, and make sure you never have to think about how to build a website again! ;)
Client Testimonials
- Bare Leaf Tea
- Patchwerk Recording Studio
- SpeechArts
- Innovative Closet Solutions
After trying many designers and waiting days for a response, I contacted 5 Shades Media. I received an immediate response. 5 Shades Media has done a terrific job. We love our website. 5 shades Media was not satisfied until we were. They always kept us informed of progress on the site and has done a great job in working with us to establish an identity. If you're looking for a professional site and equal service, 5 shades is definitely the way to go. We look forward to working with 5 Shades Media on future projects.
I am very satisfied with the level of service and the quality of the product that I received from 5 Shades Media. They personally consulted me on the needs of our website and provided the best solutions at the most feasible price. The service was prompt and done correctly the first time around. Even now that the work has been completed, 5 Shades Media is still as accessible as they were during the update of our site. They have also been helpful in answering all my questions as I learn to operate the new functions. I would (and have already) recommend them to anyone.
It is easy to recommend 5 Shades Media! They make contact immediately when notified and are consistent in that level of responsiveness. They were incredibly patient with my acillations and willing to 'listen' to my needs, vision, and wants, which only became clear after the work had started. Along the way and without being asked, 5 Shades Media took time to provide 'how to' advice that would help me with getting my business going. My website looks great, and I know that I got more than what I paid for! I'm indebted to 5 Shades for their dedicated efforts on my behalf!
I just wanted to say thanks for making me such an awesome web site. I described the look and feel of the website that I wanted and the team at 5 Shades pulled it off! The most impressive part of this company is the customer service. E-mails are returned lightning fast and they are to the point with a lot of great ideas and input towards pulling everything together. The website editor is a great addition and is very easy to use and navigate through. I am very happy with the overall experience and would recommend 5 Shades Media to anyone ready to take their company to the next level.

We're Experts In
- Business Website Design
- Website Redesign
- eCommerce Web Design
- Corporate Website Design
- Internet Marketing (SEO)
- Web Hosting & Domain Names
- Logo & Corporate Identity Branding
- Content Management Systems
- Do-It-Yourself Website Builder
- Real Estate Web Design
- Wordpress Blog Design
- Legal & Law Web Design
- HTML/CSS Website Design
- Medical Website Design
- Lead Generation Websites
Website Design
Content Management
Logo Design
Internet Marketing (SEO)
Ecommerce Web Design
Web Hosting
