HTML and CSS

Why is this important?

This workshop is important because:

HTML is the oldest and most fundamental language of the web. It contains a page's content, provides structure for that content, and gives the browser important metadata about the page.

CSS lets us style a web page, creating sites that stand out visually. It is an incredibly powerful tool too.

What are the objectives?

After this workshop, developers will be able to:

• Recognize common HTML tags and attributes.
• Describe the structure of an HTML document.
• Apply CSS styles to HTML elements based on tag, class, or id.
• Distinguish among block, inline, and inline-block elements.
• Draw the CSS box model.

Where should we be now?

Before this workshop, developers should already be able to:

• Navigate the files in their computer using a command line interface (terminal).
• Create a file with the terminal, modify it with a text editor, and save it.
• Describe the roles of servers, clients, and browsers.
• Explain how HTML, CSS, and JavaScript contribute to a website's front end.

HTML Structure

Many sources compare well-structured HTML to a tree. We can also think of it as a top-down architecture, like a mobile.

If you were asked to build this mobile with HTML and CSS, what classes and ids would you use?

Check For Understanding

1. Sketch out a wireframe for the website from the following image, and label it with semantic HTML elements, class names, or ids.

2. What are some tags you might include in the head of this page's HTML?

3. Draw the tree structure for the HTML you designed.

4. What are some CSS text, font, or color rules you might use to create this site?

5. What are some CSS layout or positioning rules you might use to create this site?

6. Bonus: what portions of the web page in the image above might be controlled by JavaScript?

Discussion

Answer the questions assigned to your group. Feel free to do some research if you're not sure!

Group 1:

• What does CSS stand for? How is each word significant?
• What is "semantic" HTML?
• Explain the differences between an element, a class, and an id.

Group 2:

• Describe the concept of CSS specificity.
• Where are three places you can associate CSS code with an HTML document? Which one is considered a best practice, and why?
• Explain some differences between fluid and responsive layouts.

Group 3:

• Draw the CSS Box Model.
• Why does HTML have attributes? Give a few examples.
• What does display: none; do?

Group 4:

• What does absolute positioning do?
• What does fixed positioning do?
• What does relative positioning do?

Group 5:

• What does the float property do, and what are its possible values?
• What does the clear property do, and what are its possible values?
• What is clearfix?

Group 6:

• What are block elements? What does display: block; do?
• What are inline elements? What does display: inline; do?
• What is inline-block?

Refer to resource.md, WDI fundamentals, or the sites in More Resources for information on these questions!

Independent Practice

Check your understanding with this site recreation training! This is a common web development interview task, especially for front end roles.

Closing Thoughts

Semantic HTML is an expectation among modern web developers. Take care to choose semantic HTML elements, class names, and ids. (Semantic naming is also a best practice in JavaScript and across programming languages.)

Masterful CSS requires a lot of memorization (to know what properties can be changed) and experimentation. Don't be afraid to look things up and try things out. You'll build your toolkit over time.

The most important things to practice right now are:

• using meaningful tags, classes, and ids.
• following best practices to write clean, readable code.
• memorizing syntax for CSS rules, including tag, id, and element selectors.
• linking external CSS files to HTML and debugging issues with relative and absolute paths.

More Resources

• CSS Zen Garden
• HTML Reference from MDN
• CSS Reference from MDN
• CSS-tricks