HTML & CSS Fundamentals Course (free)

HTML & CSS Basics test

This section covers the basics of HTML and CSS. tags, stylesheets, layouts, etc.

A quick tip for new programmers that would have saved me a lot of trouble when I first started learning to code: When you get stuck on something, try to isolate the issue. I like to create an entirely separate project on my computer that just deals with that specific problem. The benefit of that is when I encounter the issue again, I have code that I can look at so I never have to solve that problem again. I've done this with html border images, floating elements, authentication, and a lot more.

In this tutorial we just open our text editor, create an index.html file, and demonstrate the use of a few HTML tags and how they look on the screen. We'll show you h1-h6 tags, paragraph tags, underline and strong tags, and how to create links.

In this HTML and CSS Tutorial we're going to show you how to import stylesheets into an html document. There's three ways to use stylesheets. 1. Inside the element itself via the style attribute 2. Inside a CSS block in the Head tag 3. In an external stylesheet which gets imported into the file.

This tutorial shows you the difference between classes and IDs in html and css. IDs are supposed to be unique and only used on one element, while classes can be used as many times as needed. classes should be used to help you re-use styles, while IDs are meant to identify a specific element.

CSS Specificity is how CSS determines which rules to apply when multiple styles conflict with each other. Say a p tag has a background of green inline, but an external stylesheet says it should have a background of red. Which rule gets applied? That is "specificity".

Border is the line around the element. Padding is added space at the end of an element, and margin is the space between the end of the padding and the beginning of the next element. In this tutorial we'll look at some examples of how border, margin, and padding work in html and css.

Using the browser dev tools is a powerful way to understand exactly what is happening in your html and css code. Each browser has their own flavor, but for the most part they all work very similarly. In this tutorial we're going to show you some basic ways to debug your markup code with the Chrome Developer Tools.

CSS Combinators is a way to format your stylesheet rules in different ways to get and style exactly the elements you want.

You can use different display types to present data on a page differently. block forces all sibling elements to display on another line, while inline display allows you to present your html elements on the same line. In this tutorial we'll look closer at how to use display types in html and css.

There are a handful of "position" types in CSS: Absolute, fixed, relative, and sticky. In this tutorial we'll look at how you can do things like "make an element stick to the top of a page" or "be 20px to the left of the element next to it" with the "position" property.

We're not ready to cover collapsing margin yet, but we at least wanted to make you aware that margins will "collapse" under certain circumstances.

In this tutorial we look at Hexadecimal colors and how we're able to get millions of different colors from a 6 digit color code.

Media Queries allow you to change any css code based on how large the display is. Media Queries are important because a desktop view doesn't look good on mobile, and vice versa. Media queries allow us to make beautiful designs on all screens and all sizes.

Pseudo classes allow you to change the style of an HTML element with CSS depending on whether an element is "active", "focused", "hovered", etc...

In this tutorial we talk about how to style various html form elements with css

Custom CSS properties behave similarly to variables, allowing you to reuse the same property in multiple places. If the color or design scheme changes, rather than changing the color in a million places, you only have to change it in one place.

Flexbox test

Flexbox is a highly flexible display type that allows you to easily manage the layout of your web page. Flexbox helps you with vertical and horizontal layouts, spacing of elements, and much more.

In this tutorial we cover the basics of flexbox.

In this flexbox tutorial we'll talk about the align-items css property, which allows us to position our flexbox items in a variety of ways.

Flexbox allows you to easily change between vertical and horizontal layouts. Flexbox also has options to adjust how the content wraps when reaching the end of the page. We'll cover these topics in this HTML and CSS Tutorial

Flexbox can grow and shrink elements as a ratio to other elements. You can also set elements to display in a certain order.

align-items is used on the container to describe how the html elements should be laid out. align-self allows an individual item to break out of the instructions that come from the container.

Simple HTML & CSS Project test

In this section we take what we've learned and build a responsive web page together.

Introducing the HTML and CSS Project we'll be building.

In this tutorial we show you how to setup the buttons for the HTML & CSS project.

In this tutorial we optimize our buttons CSS to be reusable.

In this tutorial we build out the top bar of the website where promotions can go.

Setup of the navigation bar using Flexbox

We make the navigation bar responsive and start on the cart icon

Hero Section with Image and text

In this tutorial we take care of the section below the hero section of code.

we build out the "card" section of the page and make it reusable

Another section of html with a background

a section of the page named "Top Shelf"

Shop Items

Founder Message html section

In this section we make the footer of our webpage, and we add in any css hover effects throughout the site.

In this section we cleanup and organize our css code.

CSS Grid test

In this section we're going to learn how to use CSS Grid

In this tutorial we're going to look at a bunch of different CSS Grid examples and learn CSS Grid from scratch in a single video.