Introduction to HTML and CSS

Sample Lesson - Introduction

Lesson 1.12: Analyzing Webpages

Don't try to reinvent the wheel. It always ends in children's tears.
(Source)

You probably have a favorite webpage. Maybe it's the home page of your browser. Maybe it's where you go to calm yourself down after a long day. Maybe it's a social media app with infinite scroll and an infinite number of images of small animals eating human food.

No? Just us?

Your favorite site probably has a lot of people—web designers and animal chefs alike—working to make that page looking good and work well. Since they have their design figured out, why not use it to help inspire your design?

Luckily, both Google Chrome and Mozilla Firefox understand just how helpful other people's designs are, so they've given us some developer tools to help design the perfect website. With their help, we can boldly go where many designers have gone before.

And then we can go back to hamsters eating burritos.

Sample Lesson - Reading

Reading 1.1.12: To Boldly Go Where Many Have Designed Before

Some websites have great features. Take a look at CSS Zen Garden and you'll see what we mean. All of the HTML is exactly the same, but the CSS makes each page completely different. And our web browser gives us the ability to find out how it works.

Cool, right?

Don't get us wrong: we don't want you to take the exact HTML and CSS and copy it into your site; plagiarism does exist outside of English essays and math exams. No, we want you to use it as a learning experience. It's all about seeing what the masters did and figuring out how you can apply that technique onto your site.

To make sure we're all on the same page, we're going to use CSS Zen Garden as a way to explore Chrome and Firefox's developer tools, but you can do this on any site you like.

How to Inspect Elements on Web Browsers

If you're on Google Chrome, Mozilla Firefox, or Opera:

• right click on the interesting part of the page.
• click "Inspect Element" from the dropdown menu.

If you're on Internet Explorer:

• press F12.
• press Ctrl + B.
• click on the interesting part of the page.

Now you can look at isolated parts of the page, but it's a little annoying to move from element to element. Fear not: we also have Developer Tools. These tools might show some JavaScript—a web programming language—so try to focus on the HTML that looks familiar. The CSS won't contain any JavaScript (usually).

How to Open and Use Developer Tools

Google Chrome: Go to this page about understanding CSS and follow the steps under "Developer Tools." You can also read the bit under "The Elements window and the Web page," but don't actually do anything it tells you to do.

Head back to CSS Zen Garden in the same tab. If you don't, you'll have to re-open the developer tools in the other tab. If you ever end up in a confusing place, just click on the "Elements" button in the tabs across the top of the Developer section of the page.

Mozilla Firefox: Follow either set of instructions on this page to open "Inspector."

After the Inspector tab opens on the bottom of the page, look for "Style Editor" tab in line with Inspector and click on it. Then head back to CSS Zen Garden in the same tab.

You could open a new tab to get to CSS Zen Garden but…you'll just need to follow the instructions again.

Microsoft Internet Explorer: On this page, follow the instructions under "Getting Started. Next click on the "Style" tab in the "Properties Pane." Then head back to…CSS Zen Garden.

Opera: Check out the instructions under the section called "Built-in." That'll open the developer tools for you. You can also watch the video, but we'll discuss all they talk about right…about…

Now.

Now That That's Over…

You have the developer tools open, right? Good.

Try hovering over specific parts of the HTML and CSS. Things should light up/become highlighted in your developer tools section. If not, you should probably Google it to figure out what you need to do.

What? We have no idea how to predict how developer tools will work after this course is published. And even if we did…we'd be Googling it too.

Oh, the issue's that Google's not around anymore? Wait, how is this still around if Google's gone? This is getting too existential for our tastes. Let's just get back to the tutorial. Use a search engine and troubleshoot.

You can also manipulate the pages on the screen. Try

• changing the font or background color on a page (look for the hashtags in the CSS).
• manipulating the box model using this screen.
making the background image a link to a different URL.
To navigate the different levels on the HTML, click on the arrows on the left-hand side. When you do that, you can figure out the internal structure and find exactly where the CSS is being used.

These tools aren't just for prying into other people's style choices, though. It's actually meant to help you debug unexpected problems.

By debugging, we're talking about finding and fixing anything that goes wrong in your code. If the font size grows bigger at every header, you're probably going to want to figure out why and rewrite the code so that it doesn't…do that anymore.

(The bug in the example came from unclosed <h3> tags, but the designer "fixed" it by putting the content in a table. Sigh.)

Keep in mind: if you manipulate parts of the webpage, the changes get erased as soon as you refresh the page. So if you want to save your beautifully debugged creation, make sure to have your code open in a text editor as you change the page.

Sample Lesson - Activity

Activity 1.12: The Amazing Web Race

You've gathered from all over the world. Your mission: to find the best that CSS Zen Garden has to offer. The winner gets…a hearty dose of self-respect. Hey, they've earned it.

Open up CSS Zen Garden and turn on the developer tools on your web browser of choice. Using those developer tools, find a page that does one of the following things anywhere in the CSS, and send us the URL and explain where it shows up on the page.

When you do this, make sure to find a different page for each entry. We know some pages could have three or more of these items, but the idea is to explore, not to finish quickly. See what interesting designs you can find and report back to us.

For example, if Shmoop were looking for a website that listed Helvetica as its first choice in a text font, we'd write:

http://www.csszengarden.com/220/ has Helvetica listed as its first choice in all the <h> tags.