HTML and CSS For Beginners: Build A Portfolio Project
Learn HTML and CSS from scratch and build a project for your web developer portfolio

What you will learn



Turn Designs into Code

How Websites Work

Intro To Backend and Frontend


Learn HTML and CSS from scratch in this course. Join me as we build a project for your web developer portfolio! In this course we will learn HTML and CSS from scratch, no previous experience needed. In this course we will learn fundamentels while also building a project that you can put in your web developer portfolio.

This course starts off with building RIGHT away. Instead of learning a bunch of concepts that you won’t know how to put into practice, we start building immediately, and then learn the concepts as we build. This helps us “learn just in time”, that is, learn the new concepts as we build our project. By the end of this course we’ll have a completed project: the order summary component. We’ll go over what this component is, how to build it, and why it could be used in a real-world project.

Get Instant Notification of New Courses on our Telegram channel.

In the start of this course we will go over the project setup: how to set up the project files, and all of the basics to get you started. Then we will introduce HTML basics, going over what HTML is and basics syntax. We will go over CSS basics as well. Later in the course, we will go into HTML and CSS intermediate concepts that you can use as a web developer.



Starting The Project

Course Setup
How Websites Work!
What Are We Building?
Project Requirements!
How Do Designs Turn Into Code?
Project Files
What is a terminal?
Create your project

Building The Project

Hello World!
What is HTML?
HTML Syntax
What is CSS?
CSS Selectors
CSS Class Selectors
What About JavaScript?
Building The Card
CSS Variables
Adding The Background
Developer Tools
CSS Specificity
Building The Title
Adding The Image

Finishing The Project

The CSS Box Model
Default Styles
CSS Box Sizing
Styling The Application More
Adding The Buttons
Refactoring Code
Writing HTML For The Annual Plan
Styling The Annual Plan With CSS
Wrapping Up The Annual Plan Styles
Centering Our App With CSS
Finishing Touches
Congratulations! Course complete