If you were to teach someone web design, how would you start your first lesson? How would you end it? I had the opportunity to ask myself these questions the other day, when I started teaching my friend Maggie HTML & CSS. There wasn’t any planning involved, so here’s what I came up with on the fly.
Start with Content
In my experience, theory and explanations don’t mean a thing if you can’t see them applied to something that you care about. So I asked Maggie to think of something she would like to put on the web. Maybe her own personal website or a blog? I used Aral Balkan’s Content Out Web approach as a reference.
Maggie decided to make a cooking blog. I advised her to think of ways to make the topic more specific and unique so that she could differentiate and keep her own interest. She thought of making it strictly for cakes or connecting it somehow with music. I already saw her getting worried about what it was going to be. So I told her that she would be improving it over time and that she could totally change her mind at any point.
For now, just open Notepad, write a title and a one sentence intro, and save the file as index.html. Now drag this file in a browser and see how it looks. There, you’ve got your first web page and it didn’t heart!
Understanding HTML Tags
Creating an html file and previewing it in a browser gave Maggie a taste of the magic in a matter of seconds. I now had her attention and it was time to explain what html actually does. I described it as a way to tell the browser what is what on a web page. We marked up our h1 and p, we added a strong, an em and a link to a YouTube video. (At this point Maggie asked if we could make YouTube load in a new browser tab!) We added some inline styles and we created a second html file.
Linking a Stylesheet and Making the HTML Valid
Having two html files with similar structure gave me a reason to introduce external stylesheets. For that we needed to add , and to our pages. I took the time to explain typographically correct quotes and dashes and this led us to the need of specifying the encoding. We added a doctype and a title.
Version Control and Publishing on the Web
I wanted to finish the first lesson with Maggie uploading her work somewhere public. This would totally make things real. When something is out there and you could easily share it, you just want to make it better as fast as you can.
For hosting I thought the most lightweight and fast solution would be to use GitHub Pages. But we couldn’t do this without explaining version control. Up until now we hadn’t talked about or downloaded any tools that she didn’t already have on her PC. But now I asked her to open a GitHub account and download their Git client for Windows.
She then created a repository and pushed her site. We now had the added value of GitHub issues which I later used to give her homework.
The concept of Responsive Design
Now that Maggie’s site was online, we opened it on her phone. I then asked her to add in the head of the html documents and talked a bit about RWD.
She asked me how she could track visits and I guided her through setting up Google Analytics.
For Next Time
- Write your first blog post—again, don’t overthink it.
- Download and install Atom—a fancy text editor from GitHub that is free.
- Watch Chris Coiyer’s video tutorial on the basics of HTML&CSS—it’s time to make friends with this guy!
Looking Forward to Lesson 2
So for next lesson we’ll already have some content to work with and we’ll be doing that in a decent code editor. I think we’ll take a step back and make some sketches to figure out the content structure and the navigation of the website.
We’ll also take a look at the competition, see how food blogs look and what they contain. We’ll view source and we’ll play with the Inspector. I guess we’ll be embedding images and we’ll talk some more about responsive design.