Welcome to This Course!

What Is "Web Development" & How Does The Web Work?

The Three Key Programming Languages

How The Web Works: A Deep Dive

The 100 Days of Code Challenge!

How To Get The Most Out Of This Course

Stuck in the Course? We Got you Covered!

Module Introduction

How to Create a Website

Creating our First HTML Page

Setting Up a Development Environment

Why Visual Studio Code?

Understanding HTML Elements

Which HTML Elements Exist?

Adding Another HTML Element

Exploring HTML Attributes

Getting Started with CSS

More CSS Styling

Working with Colors

Formatting our Code

Working with the Browser Developer Tools

Adding a Link

You can Nest HTML Elements!

Using Global CSS Styles

The HTML Document Skeleton & Metadata

Visual Studio Code Shortcuts & Tricks

First Summary

Styling the Anchor Element Also with Pseudo Hover

Why it's Called Cascading Style Sheets

Storing CSS Code in External Files

The Void Element Syntax

Multiple Files & Requests

Selecting Single Elements with the ID Selector

Working with "font-size" and "px"

Using Other Fonts from Google Fonts

Adding an Image

Styling the Image & Using the Body Tag

Styling the Overall Page Background

Adding a Second HTML File

A Challenge for You!

Challenge Solution

Using a Shared CSS File

Organizing Source Files in Folders

Summary

Using the Live Server Extension

Understanding Lists

Creating Lists

Understanding Parents, Children, Containers & More

Understanding Cascading, Inheritance & Specificity

Styling the Full Week Page

Introducing the CSS Box Model

Using the CSS Box Model

Creating HTML Layouts

Theory: Selectors & Combinators

Using Selectors & Combinators

Understanding Classes

Block vs Inline Elements

Styling Differences Between Block & Inline Elements

Understanding Margin Collapsing

The "box-shadow" Property

Your Challenge!

Creating the HTML Layout

Styling the Main Section

Styling Images & Working with Negative Margins

Finishing Touches

Module Summary

Academind

Become a Web Developer now with our 100 Days of Code Web Development Bootcamp course!

Join the full "100 Days Of Code - Web Development Bootcamp" course: https://acad.link/web-dev

Join our Academind Community on Discord: https://academind.com/community

Check out all our other courses: https://academind.com/courses

----------
Content:
[Day 1]
Welcome to This Course! 00:00:04
What Is "Web Development" & How Does The Web Work? 00:01:13
The Three Key Programming Languages 00:09:03
How The Web Works: A Deep Dive 00:14:25
The 100 Days of Code Challenge! 00:22:33
How To Get The Most Out Of This Course 00:26:24
Stuck in the Course? We Got you Covered! 00:30:03
Module Introduction 00:33:27
How to Create a Website 00:35:50
Creating our First HTML Page 00:41:10

[Day 2]
Setting Up a Development Environment 00:49:38
Why Visual Studio Code? 01:01:05
Understanding HTML Elements  01:03:11
Which HTML Elements Exist? 01:09:13
Adding Another HTML Element 01:16:29
Exploring HTML Attributes 01:23:53
Getting Started with CSS 01:28:26
More CSS Styling 01:34:44

[Day 3]
Working with Colors 01:37:23
Formatting our Code 01:45:39
Working with the Browser Developer Tools 01:49:55
Adding a Link 01:56:08
You can Nest HTML Elements! 02:02:48
Using Global CSS Styles 02:05:07
The HTML Document Skeleton & Metadata 02:12:56
Visual Studio Code Shortcuts & Tricks 02:20:32
First Summary 02:28:21

[Day 4]
Styling the Anchor Element Also with Pseudo Hover 02:34:46
Why it's Called Cascading Style Sheets 02:39:40
Storing CSS Code in External Files 02:42:05
The Void Element Syntax 02:48:28
Multiple Files & Requests 02:49:51
Selecting Single Elements with the ID Selector 02:55:58
Working with "font-size" and "px" 03:01:37
Using Other Fonts from Google Fonts 03:06:52

[Day 5]
Adding an Image 03:15:05
Styling the Image & Using the Body Tag 03:19:57
Styling the Overall Page Background 03:27:45
Adding a Second HTML File 03:29:44
A Challenge for You! 03:35:19
Challenge Solution 03:37:50
Using a Shared CSS File 03:44:54
Organizing Source Files in Folders 03:49:39
Summary 03:52:50

[Day 6]
Module Introduction 03:56:44
Using the Live Server Extension 03:58:44
Understanding Lists 04:02:23
Creating Lists 04:07:25
Understanding Parents, Children, Containers & More 04:15:26
Understanding Cascading, Inheritance & Specificity 04:24:10
Styling the Full Week Page 04:32:12

[Day 7]
Introducing the CSS Box Model 04:38:32
Using the CSS Box Model 04:45:39
Creating HTML Layouts 04:54:30
Theory: Selectors & Combinators 05:01:52
Using Selectors & Combinators 05:06:01
Understanding Classes 05:16:45
Block vs Inline Elements 05:23:08

[Day 8]
Styling Differences Between Block & Inline Elements 05:31:30
Understanding Margin Collapsing 05:40:46
The "box-shadow" Property 05:45:29
Your Challenge! 05:51:54
Creating the HTML Layout 05:53:37
Styling the Main Section 05:58:06
Styling Images & Working with Negative Margins 06:03:44
Finishing Touches 06:09:00
Module Summary 06:13:08

----------

• Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: https://www.instagram.com/academind_real
• Join our Facebook community on https://www.facebook.com/academindchannel/

See you in the videos!

----------

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

100 Days of Code - Web Development  Bootcamp - Full Course: Day 1 - 8

100 Days of Code - Web Development Bootcamp - Full Course: Day 1 - 8

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path