Learn HTML & CSS
On your journey to becoming a web developer, HTML & CSS is often a great place to start your computer science career. Whether you want to be a designer, full-stack developer, or software engineer, learning html and css will be a step in the right direction. Let's take a look at what HTML and CSS is, and how it can help you achieve your goals.
What is HTML & CSS?
HTML stands for "Hyper Text Markup Language". It is what allows you to design content on a web page to look the way you want it through "tags". There's a variety of HTML tags to choose from, and they each do something slightly different. I'm going to make an "Unordered List" with the
<ul> tag right now to list off a few commonly used HTML tags:
- li (list item)
- ul (unordered list)
- div (kind of like a box)
- strong or bold tags (make text thicker)
- img (for images)
- "a" tag for clickable links
- And much more...
CSS stands for "Cascading Stylesheets", which is used to make consistent styling across your website and web apps. CSS also makes it easier to define rules and priorities for how the content on your site should look. Let's take a look at an example of some HTML and CSS code:
<h1>Welcome to my website!</h1>
<p>Today we are going to learn the following:</p>
<li>How to water your plants</li>
<li>How to tie your shoes</li>
<li>How to pour a bowl of cereal</li>
<li class="hard">How to split an atom</li>
<p>Your instructor today will be Mr. Snuggles</p>
<p>You can <a href="https://placekitten.com/">view his website here</a></p>
<img src="https://placekitten.com/400/400" />
This code will end up looking like this in a web browser:
Why Should I Learn HTML & CSS?
Not everyone needs to learn html and css, but if you're interested in web design or web development, then you should learn html and css because these markup languages will help you create the look and feel of the website. Everything that is displayed in a web browser renders as HTML and CSS. Every time you search the web you look at HTML and CSS, so if you're working on websites there's no way around it.
Designers don't usually work in HTML and CSS, but they design mockups of what a page will look like as a finished product. Being comfortable with HTML and CSS helps designers know what works and what doesn't work for the developers and helps you to have a more cohesive team.
How to Learn HTML & CSS
We have an HTML & CSS Course that covers all the fundamentals. This course requires zero experience and is the perfect place to start learning to code. There's quite a bit to learn just in the realm of HTML & CSS. take a look at the below sections to find out more about what you may want to learn when it comes to HTML & CSS:
Pre-requisites for learning HTML & CSS:
The only thing you need before learning html and css is a text editor! The easiest text editors to get started are Sublime Text or VSCode.
HTML & CSS Fundamentals
Besides getting setup with a text editor, learning HTML & CSS fundamentals is one of the first things a beginner programmer will do when learning to code. Everything on a web page ends up as HTML and CSS, which are the building blocks of the world wide web. Before getting into intermediate and advanced concepts like Flexbox, CSS Grid, and more, you should have a solid understanding of the most basic building blocks. What is an html element? How do you style different elements and use them on a page?
You can learn the fundamentals of HTML & CSS at our HTML & CSS Course.
Or see the bottom of the page for the basics tutorials:
Responsive & Fluid Design
Flexbox is a powerful design system that allows you near complete control over the layout of your app. Flexbox is especially helpful for aligning your items in a variety of ways. Learn how to build highly flexible layouts with our HTML & CSS course or check out our Flexbox Tutorial page.
CSS Grid is an incredibly powerful layout system that allows fine-grain control on both the horizontal and vertical axis. CSS Grid allows you to layout your webpage in the form of a "Grid", where you can have columns and rows of different sizes. Each element inside a grid can span multiple rows and columns, and even overlap other elements in the grid. You can control the amount of space between each grid "cell", customize the position and order of each element, and much much more. Learn the CSS Grid on our CSS Grid Tutorial page.
SCSS, LESS, SASS,
CSS in JS
Learn the Basics:
Source Code for the below videos: HTML & CSS Fundamentals
List of HTML & CSS Courses:
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
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 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.
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 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
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 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.
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
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.
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
Responsive Navigation & Cart Icon
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
Section With Background
Another section of html with a background
a section of the page named "Top Shelf"
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.
In this section we cleanup and organize our css code.
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.