HomeBlogLearnSite under heavy construction!

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.