This week I’m teaching a course at Westmoreland College to teens on building a webpage with HTML and CSS.
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.
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).
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 —
Other HTML tags and attributes
Then we got more creative and added some additional html including headings (
h2-h6), lists (
ol), emphasis (
em), links (
target), images (
figcaption), line breaks (
br), helpers (
span) as well as video and comments.
Check out this extensive list from developer.mozilla.org and html.com.
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.
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.
We created some classes. Styles we discussed include
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.
Here are a few great resources for learning HTML/CSS.
- Khan Academy — Intro to HTML/CSS: Making webpages
- Code Academy — Learn HTML, Learn CSS and Make a Website
- Interneting is Hard (but it doesn’t have to be)
- Dash by General Assembly
- Scrimba — Intro to HTML, Intro to 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.