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.

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.

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.

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?

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?

Answer the questions assigned to your group and record your responses on the board. Feel free to do some research if you're not sure! Some places to check: resource.md, WDI fundamentals, or the sites in More Resources.

AFTER we have gone around and talked about your answers to these questions, please have someone from your team type up your answers in the Google doc.

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

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, and you'll continue searching for the properties you need even as an expert developer.

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.

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