HTML and CSS Basics

Introduction

HTML is the markup that contains all the actual stuff that a web page has. All the text on this page you’re reading right now lives inside HTML tags that tell your browser how to order the content on the page. Go on, right click any element on the page and choose “Inspect Element” to open up your browser’s Developer Tools and it will show you the structure of the page.

CSS tells the browser if you want to display any of those tags a particular way, for instance, turning its background blue and pushing it a little to the left. In your Developer Tools, you can see the CSS styles in another panel, usually showing which specific properties were inherited from which lines of CSS.

Learning Outcomes

Look through these now and then use them to test yourself after doing the assignment:

Why do we separate HTML and CSS?
What are classes and IDs (and how are they different)?
What are elements?
What are tags?
What are attributes?
What are forms?
What is a div?
What are selectors?
What are properties?
What are values?
What is the “query string” in a URL and what does it do?
What is the difference between “pixels” and “ems”?
How do CSS styles for a particular element get inherited? i.e. how does an element get its “default” styles?
What are two CSS attributes you can change to push an element around on the page?
What are the three different ways to include CSS in your project or use CSS to style a particular element?
What is the “default stylesheet” or “user agent stylesheet”?
Why use a CSS reset file?

Assignment

Do the Codecademy HTML course and the Codecademy CSS course (only the free stuff) for a healthy baseline understanding of HTML and CSS. It can be helpful to take notes or make flashcards to keep track of the most commonly used elements.
To fill in the gaps, read through the HTML Dog beginner HTML tutorial, the HTML Dog beginner CSS tutorial and the HTML Dog intermediate CSS tutorial. They should go relatively quickly since you’ve seen much of it before but you’ll find a fair bit of new information as well.
Build the Android logo using just HTML and CSS by watching this video from an amazing website called The Code Player. It’s like a tutorial but it actually plays the code as the original developer created it. Use your own text editor (which you can view by opening the .html file in your browser), JSFiddle’s online tool or CodePen’s online tool to create the logo alongside the tutorial. * Note: You will see border-radius, -moz-border-radius, and -webkit-border-radius all used identically. This is in order to overcome some of the differences between browsers. You probably only need to use border-radius to achieve the desired effect.
Learn about basic forms from this Treehouse video and use this w3 page as a reference.
Optional: Learn about your browser’s default stylesheet and CSS resets in this video (reset starting at the 2:00 mark). This is why there are some spaces that show up in your layout even if you haven’t specified CSS. Real developers almost always use a CSS reset to blow away the default stylesheet and let them work from scratch. If you’re still curious, here’s a longer video on resets.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Web Development 101