Design & Build Your Own Webpage

This week I’m teaching a course at Westmoreland College to teens on building a webpage with HTML and CSS.

Design and build your own webpage using HTML and CSS. You will select a topic, write content, sketch a layout on paper, gather images, then build the page you designed. If time permits, you will make your page interactive using JavaScript. No prior coding experience needed. Bring flash drive.

Day 1

Topic & Content

Before coding, we thought of a topic and started writing the content. In my example, my topic was favorite outdoor summer activities and I wrote three sections on kayaking, bike riding and hiking.

Design

After the topic was chosen and content was written, we thought about design. For this class, we kept it simple and sketched something out on paper (in my case, the whiteboard).

My topic, content and layout

Images

Then it was time to find images. My favorite places to find images are unsplash.com and pexels.com. Pexels will allow you to download a specific sized photo (smaller is often better). These sites will allow you to find high-quality photos that you can use on your site free of charge. (Never search for and use photos directly from Google as you could run into copyright issues.)

After we found the images we wanted to use, we downloaded and renamed them. A good naming convention is a quick description of the image, all lowercase with dashes between words. I downloaded a kayaking photo and named it kayak-river.jpg. Naming your photos is great for SEO!

Then we headed over to tinypng.com to compress the images. Compressing your photos is good for your page speed.

Creating your HTML file

We created an index.html file using Notepad++. In it, we used the following tags — doctype, html, head, title, body, h1 and p.

Other HTML tags and attributes

Then we got more creative and added some additional html including headings (h2-h6), lists (ul and ol), emphasis (strong and em), links (a, href, target), images (img, src, figure, figcaption), line breaks (br), helpers (div, span) as well as video and comments.

Check out this extensive list from developer.mozilla.org and html.com.

Day 2

Creating your CSS file

With Notepad++, we created a new file named style.css. We also added a line of code (line 6 below) in our HTML file to link the two together.

HTML colors

There are tons of sites out there for looking up HTML color codes, but the two we looked at in class were coolors.co and htmlcolorcodes.com.

Additional CSS

We created some classes. Styles we discussed include color, background-color, border, font-size, padding, margin, text-transform and text-align.

We also reviewed how to use Google fonts and a tiny bit on making our page responsive by wrapping text around an image.

Lastly, we briefly discussed how to create a menu for navigation with an unordered list and how to make it horizontal. Here’s one way to do that.

Day 3

On the last day, we tackled some media queries (HubSpot, freeCodeCamp, Flywheel) and a bit of JavaScript (toggle hide/show with W3Schools).

Additional Resources

Here are a few great resources for learning HTML/CSS.

The page(s) that we made in class aren’t available on the internet — for that you’d need hosting and a domain name. However, you can publish your web pages with GitHub pages using this simple tutorial.

Scroll to Top