HTML & CSS basics

Introduction

Now we will dive deeper into HTML and CSS!

Let’s see what HTML is:

HTML is the markup that contains all the stuff that a web page has. For example all the text on this page 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.

inspect HTML

Let’s see what CSS is:

CSS tells the browser to display those HTML tags in a particular way. For example turn an element’s background color to grey and push it a little to the top. So once more right click any element on the page and choose "Inspect Element" to open up your browser’s Developer Tools. 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.

styles panel

Learning Objectives

  • The reason we separate HTML and CSS.
  • HTML:
    • Elements
    • Tags
    • Attributes
    • Div
    • Forms
  • CSS:
    • The three different ways to include CSS in your project and how to use CSS to style a particular element.
    • The "default stylesheet" or "user agent stylesheet".
    • Classes and IDs and what is the difference between them.
    • Selectors
    • Properties
    • Values
    • Pixels and ems and what is the difference between them.
    • How CSS styles for a particular element get inherited.
    • The two CSS attributes you can change to push an element around on the page.
    • The "query string" in a URL and what it does.
    • The reason we use a CSS reset file.

What is HTML & CSS?

Watch these two wonderful introductions to HTML and CSS by the Harvard CS50 team. Estimated Total Time: 2 hours

Web and HTML

Duration: 30 minutes

BREAK: Take a 10 to 15-minute break before you continue. Try to reflect on what you learned on the previous video and take some notes on the most important concepts.

Web and CSS

Duration: 40 minutes

Study

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Use Agent Stylesheets & CSS Resets

Learn about your browser’s default stylesheet and CSS resets in the next videos. That is the reason why there are some spaces that show up in your layout even if you haven’t specified CSS. For this reason, real developers almost always use a CSS reset to blow away the default stylesheet and thus to work from scratch.

The CSS resets are a very important and common pattern, especially among the various CSS frameworks. Most of the CSS frameworks out there contain some sort of CSS reset code at the start. More about CSS frameworks in later chapters.

Duration: 5 minutes

Duration: 9 minutes

Web Accessibility – An Introduction

Watch the following quick introduction to one of the most important aspects of Web Development: Web Accessibility. You will be reading more on the subject in subsequent lessons.

Duration: 1 minute

Web Accessibility – The Importance of Proper Color Contrast

What is effective color contrast and why is it so important? Watch the next video to find out more.

Duration: 3 minutes

You now know why it’s really important to focus on web accessibility matters while developing for the web.

Take a quick break and dive into the following video that will walk you through the process of checking the color contrast in your web content.

Duration: 11 minutes

Assignment

Your instructor will share a link to the assignment repository. Work on your assignment and submit your Pull Request link in the Quiz below.

Leave a Reply