HTML & CSS Fundamentals Course (free)
In this course we're going to learn all about HTML & CSS! We're going to cover the basics of html tags, different ways to style your content, how to move content around the page, flexbox, css grid, and a lot more.
HTML & CSS Basics test
This section covers the basics of HTML and CSS. tags, stylesheets, layouts, etc.
Learn to Code Tip: Isolate the issue
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.
HTML Hello World
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.
Importing CSS StyleSheets in HTML
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.
CSS Classes & IDs
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 Basics
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, Margin, and Padding
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.
Chrome Dev Tools Intro
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
CSS Combinators is a way to format your stylesheet rules in different ways to get and style exactly the elements you want.
display types: block and inline
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.
CSS Positioning
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.
Collapsing Margin Quirks
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.
HTML Color Codes
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 in CSS
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
Pseudo classes allow you to change the style of an HTML element with CSS depending on whether an element is "active", "focused", "hovered", etc...
Form Styling
In this tutorial we talk about how to style various html form elements with css
Custom CSS Properties
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.
Flexbox Basics
In this tutorial we cover the basics of flexbox.
Flexbox align items
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.
Flex Direction and Wrapping
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
Flex Grow Shrink Basis Order
Flexbox can grow and shrink elements as a ratio to other elements. You can also set elements to display in a certain order.
Flex align-self & content gaps
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.
HTML & CSS Project Setup
Introducing the HTML and CSS Project we'll be building.
buttons
In this tutorial we show you how to setup the buttons for the HTML & CSS project.
Buttons Optimized
In this tutorial we optimize our buttons CSS to be reusable.
Top Bar
In this tutorial we build out the top bar of the website where promotions can go.
Navigation Bar
Setup of the navigation bar using Flexbox
Responsive Navigation & Cart Icon
We make the navigation bar responsive and start on the cart icon
Hero Section
Hero Section with Image and text
Below Hero
In this tutorial we take care of the section below the hero section of code.
Cards
we build out the "card" section of the page and make it reusable
Section With Background
Another section of html with a background
Top Shelf
a section of the page named "Top Shelf"
Shop Items
Shop Items
Founder Message
Founder Message html section
Footer & Hover Effects
In this section we make the footer of our webpage, and we add in any css hover effects throughout the site.
Optional: Cleanup
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
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.