Web Development for Absolute Beginners - Learn by building

Name: Web Development for Absolute Beginners - Learn by building
Rating: 4.6 (25 reviews)

A project-based approach to web development —learn how to code from scratch by building a part of Facebook with HTML/CSS

Created byEbenezer Don

Last updated 1/2021

English

What you'll learn

Web development
HTML5
CSS3
Web page layouting and best practices
Design websites like Facebook and Twitter with HTML/CSS

Course content

5 sections • 46 lectures • 3h 22m total length

Welcome to the course!1:02
Welcome! Let's talk about the course!
What is web development?2:09
Let's learn what web development is and what websites are.
Let's create our first HTML file4:31
We'll create our first HTML file here. You'll learn what file extensions are and how to let both your computer and browser know that your file is an HTML file.
Our first introduction to HTML tags5:47
Here's our fist introduction to HTML tags. You'll learn what tags are and how they are a huge part of writing HTML code.
HTML is all about tags6:15
We'll continue on our knowledge of HTML tags and why they are a very important part of HTML code.
Tags have relationships too2:48
Here, we'll understand what tag relationships are and how our various HTML tags are related.
You have to indent!3:44
In this lecture, you'll learn about indentation, why it is a very important part of writing HTML code, and how to do it properly.
Our HTML body3:53
Let's talk about the HTML body tag.
Let’s talk about HTML elements2:01
We'll learn what HTML elements are and how they can be identified in HTML code.
Let’s talk about paragraphs1:27
We'll learn about the paragraph tag, when and how to use it.
Let’s build Facebook!1:37
Let's talk about our project for this course and how we'll put our knowledge into action.
Section one review

Let's review the previous section1:59
Let's go through what we learned in the previous section.
Let’s set up VS Code3:43
In this lecture, we'll talk about VS Code as our text editor of choice for this course.
Super powers from VS Code4:40
Let's learn about some of the amazing things we can do with VS Code.
Previewing our HTML file with VS Code2:00
Here, we'll learn how to preview our HTML file with VS Code.
Let’s start building Facebook2:36
Let's start building our Facebook landing page.
Tag attributes and working with images5:11
Let's learn about tag attributes and how to work with images.
Let’s add the Facebook welcome text1:24
Here, we'll learn how to add the Facebook welcome text.
Working with forms in HTML2:29
Let's learn how to work with forms in HTML.
HTML and Form Elements4:35
Let's learn about form elements in HTML.
HTML and Links5:01
Let's learn about links in HTML
More on Links3:12
In this lecture, we'll expand our knowledge on creating links in HTML.
Section two review

Let’s review what we’ve done so far1:46
Let's go through what we've learned so far.
What is CSS?1:53
In this lecture, we'll talk about CSS and its role in web development.
Google and developer documentations8:04
Let's talk about developer documentation and how to use search engines like Google.
Let’s set up our CSS Playground3:22
Let's learn how to set up a CSS playground
Measurement units in CSS4:11
Here, we'll learn about measurement units in CSS.
Our knowledge of CSS in action8:22
Let's put our knowledge of CSS to use.
Targeting web elements with classes3:21
In this lecture, we'll learn what classes are and how to use them to target elements.
Let’s recap3:16
Let's go through what we've learned so far.
Section three review

Let’s review what we are building2:48
Let's go over the Facebook webpage again.
Let’s add classes to our HTML elements5:40
Let's put our knowledge of classes to action.
CSS styling and more on colors7:34
We'll learn more about colors while styling our webpage.
Linking our CSS file with the HTML code3:28
Let's learn how to connect our CSS file to the HTML code.
CSS styling and more on fonts3:14
In this lecture, we'll learn more about fonts in CSS while styling our webpage.
CSS and specificity4:43
Let's learn about CSS specificity.
Creating page layouts with CSS Grid11:16
Let's learn how to create page layouts with CSS grid.
The left column - Images, margin and padding11:47
We'll learn about images, margin and padding in CSS.
Styling forms with CSS6:48
Let's learn how to style forms with CSS.
Input fields, border styling and more on specificity12:29
We'll learn about form input fields, border styling and expand our knowledge of specificity in CSS.

Styling buttons with CSS and more on specificity7:15
Let's learn how to style buttons with CSS.
Styling links with CSS2:57
In this lecture, we'll learn how to style links with CSS.
Let’s style the signup button3:14
Here, we'll style our signup button.
The create-page link and Pseudo-classes6:04
Let's learn about pseudo-classes in CSS.
Using box-shadow to make our form look better3:33
In this lecture, we'll learn how to use box-shadow to make our form fook better.
Let’s wrap up!3:03
This does not have to be goodbye.

Requirements

No course prerequisites. Just a laptop will do.

Description

This course is an absolute beginner’s guide to web development, so if you don’t know anything about building websites or even what websites are, then you’re in the right place. In this course, we'll use a project-based approach to learn how to build websites. We'll be building the Facebook landing page with HTML5 and CSS3. The course is easy to understand and simple to follow along with. There's no assumption that you already know a few things. Everything is explained in an easy way from scratch.

Some of the things we'll learn in this course include:

What web development is
HTML tags
What developer documentation is and how to use search engines
HTML tag relationships
Indentation and proper HTML practices
HTML forms
How to work with images in HTML, the <img> tag and why we need the alternate text attribute
An introduction to CSS - what CSS is and its role in web development
CSS measurement units - the absolute and relative units
Using classes to target web elements
Colours in web pages
Creating page layouts with CSS grid
How to link CSS files with HTML code
What specificity is in web development
How to style forms with CSS
Creating and styling buttons in web pages
Using CSS to style links
CSS Pseudo-classes
Working with CSS playgrounds
Best practices in web development
How to write readable code and why it is important

Who this course is for:

Beginner web developers looking for a project-based approach to learning how to build websites with HTML and CSS

Web Development for Absolute Beginners - Learn by building

What you'll learn

Explore related topics

Course content

Introduction to Web Development11 lectures • 35min

HTML in action - Structuring our Facebook landing page11 lectures • 37min

An introduction to CSS - The one with class8 lectures • 34min

Using CSS to style our Facebook page - One10 lectures • 1hr 10min

Using CSS to style our Facebook page - Two6 lectures • 26min

Requirements

Description

Who this course is for: