Being a freelance web designer or developer isn’t always about building websites yourself. In some cases, you’ll simply be a consultant who shares expertise and does a bit of hand-holding for clients who want to do their own sites. So what do you do when a client asks you how to build a website with HTML and CSS?
The millions of websites in the cybersphere today are created using content management systems (CMS) like WordPress and Joomla!, or through website builders, like GoDaddy’s Website Builder. Given that, you might be mightily tempted to convince the do-it-yourselfer they’d be better off using a CMS or a site builder.
Related: Follow these 5 steps to make a free website
Resist the temptation!
Help your client get what they want, not what you want them to have. It’s perfectly fine to do a bit of triaging to find out why they decided to learn how to build a website with HTML and CSS, but don’t try to talk them out of it —especially if you know in your heart of hearts that HTML and CSS will work just fine for what they’re trying to accomplish.
Go from idea to online in minutes with GoDaddy Airo™
Get started now.
6 benefits of HTML and CSS sites
An HTML and CSS website is considered static because the content (text, images, etc.) is coded into each page, and it does not use server technology (as does a dynamic website) to bring the content into the pages. While this alone might leave you asking why any would wonder how to build a website with HTML and CSS, don’t discount the advantages of static websites:
- Static sites require much less time and money to create.
- Static sites require fewer security measures.
- Static sites require less server space and can run on less-expensive hosting, like a GoDaddy’s Economy Web Hosting plan.
- Static sites load faster on slow internet connections.
- Static sites are easier and quicker for search engines to index.
- Static sites are great for small sites of less than seven or so pages.
HTML and CSS is great for a “shingle” website
Back in the day, when someone started a new business, they’d hang a shingle to let passersby know who they were, what they offered and when they were available.
Static websites can serve the same purpose, which is one reason you will have some clients requiring you learn how to build a website with HTML and CSS. Some people only need their web presence to be a shingle, letting visitors know who they are, what they offer, and how to find them.
They won’t be blogging, selling products or services, building email lists online, offering chat support, or any of the other things that require a CMS. They will normally have content on their website that doesn’t change much, so it makes sense to go with a static site created with HTML and CSS as opposed to dealing with all the moving parts of a CMS or website builder.
Now that we’ve wrapped our minds around not talking our client out of what they want, we’re ready to share our best advice on how to build a website with HTML and CSS.
Making sure clients know what they’re asking for
Before we explain how to build a website with HTML and CSS, we should first make sure that our clients actually know what the languages are and how they work together.
- HTML — Stands for HyperText Markup Language. HTML is coded in a way to establish the structure of web pages. The latest version is HTML5.
- CSS — Stands for Cascading Stylesheets. CSS allows us to control how and where our HTML renders (or doesn’t) in web browsers.
While HTML can stand alone, CSS cannot. CSS does the heavy lifting to make HTML appear how a designer or developer wants.
To see the power of CSS as it is designed to work with HTML, visit CSS Zen Garden. The more than 200 sites linked to CSS Zen Garden use identical HTML but are styled with different CSS.
Together, HTML and CSS are the only two languages a client needs to know for clean code and basic websites.
Advising clients to research websites in their industry
One thing I do before starting a website is something I suggest clients do when they’re consulting with me to create their own websites.
I suggest they view at least 25 sites in their industry to see the best elements those sites have in common.
Clients need to make sure that people aren’t confused about what they do or what they offer because their site suggests a different industry. For example, a law firm wouldn’t want a site that looks like it should be for a college or university, nor would a daycare want a site that makes it appear like a construction company.
Advising clients they first need to acquire two things
The question of how to build a website with HTML can come too soon, especially when clients aren’t seeing the bigger picture. Before you dive into the dirty details with them, make sure your clients already have a couple important things:
- A domain name (the address given to site visitors).
- A hosting provider (the place the site resides to entertain visitors).
If your client purchases their hosting with GoDaddy, there’s a good chance they’ll get a sweet deal on domain registration.
Advising clients they must learn the languages
Even if you’re consulting with clients on how to build a website with HTML and CSS, you may not necessarily be the person who actually teaches them to code HTML and CSS. If this is the case, then point them to resources that will assist them in learning how, including the resources outlined in these articles:
I also have some favorites of my own.
w3schools
One of my all-time favorite sites to suggest to new coders is w3schools.com. It’s free for learning HTML, CSS and other languages. I especially like the Try it Yourself sections where the coder can immediately put into practice what they’ve just learned.
Udemy
I also like to suggest that new coders check out free video tutorials on Udemy, an online learning marketplace. At the time this article was posted, there were more than 80 free courses on HTML and CSS — over 45 of which were geared to beginners.
YouTube
Aside from being a place to find funny videos about kittens, YouTube is also a great resource for learning any web language you’re interested in, including HTML and CSS.
Other options
The following options for learning HTML and CSS are not free, but they are solid nonetheless:
- Lynda.com (video tutorials)
- Safari Books Online (video tutorials and books)
- Skillshare (video tutorials)
- Train Simple (video tutorials)
- Tuts+ (video tutorials, written tutorials (some free) and books)
Advising clients to bond with Bootstrap
After they learn the basics of how to build a website with HTML and CSS from their preferred how-to-code books and websites, your clients should take look at Bootstrap.
Bootstrap is an arsenal of HTML, CSS and JavaScript components that you can copy and paste into web pages. Although Bootstrap v4.0 is in beta mode, the most current stable version of Bootstrap is v3.3.7.
Bootstrap was created in 2010 by the folks behind Twitter, as a way to standardize the different projects that different teams in their organization were working on.
As our clients only want to learn how to build a website with HTML and CSS, we will advise them to ignore the JavaScript components for now. Even without JavaScript, the HTML and CSS components of Bootstrap alone can be used to very effectively create an HTML and CSS website that is responsive from the jump.
See it in action: How to build a website with HTML and CSS
We’ve talked about it, so now let’s actually do it! It’s the best way to make sure our advice is solid.
In less than an hour, let’s create a simple, one-page static website, built with HTML and CSS, that serves as an online shingle for a fictitious piano teacher, Ms. Trudy Keys. (I thought her up for my responsive web design tutorial post.
HTML and CSS code editor
As our clients will learn during their web languages training, they need a code editor in order to create pages. There are several good ones out there, but the one I like best is Brackets.
Brackets is an open-source code editor that’s available for free on Mac and PC. You can download it at brackets.io.
Video tutorial: How to build a website with HTML and CSS
Our one-page website for Ms. Trudy Keys, our fictional piano teacher, will have the following sections:
- Header
- Banner
- Services
- Contact information
- Footer
If you’d like to follow along with the tutorial, you can download the source files folder here.
Note: All images included in the source files folder have been properly licensed for multiple users, and the source files folder contains downloads for the Brackets code editor and Bootstrap v3.3.7. As both Brackets and Bootstrap are updated periodically, visit their websites before starting any real projects for the latest versions of both.
Let’s walk through how to build a website with HTML and CSS, and upload that one-page site to Ms. Trudy’s GoDaddy Web Hosting.
And there you have it! We’ve created a one-page shingle-type website for our fictional piano teacher in less than an hour, which means that we are thoroughly prepared to consult with our clients who want to know how to build a website with HTML and CSS.
Meet the 27-hour day.
We built The Hub by GoDaddy Pro to save you time. Lots of time. Our members report saving an average three hours each month for every client website they maintain. Are you adding that kind of time to your day?
