Introduction
Now we will dive deeper into HTML and CSS!
*html: 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.
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.
Learning Objectives
- The reason we separate HTML and CSS.
- Classes and IDs and what is the difference between them.
- Elements
- Tags
- Attributes
- Forms
- Div
- Selectors
- Properties
- Values
- The "query string" in a URL and what it does.
- 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 three different ways to include CSS in your project or use CSS to style a particular element.
- The "default stylesheet" or "user agent stylesheet".
- 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
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
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.
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.
