Welcome to Web Development Foundation, the best course to start your web development journey as a beginner, step-by-step. This course explains each and every important topic including concept, documentation, and implementation. The entire course is designed for beginners with one goal in mind: to build responsive websites using HTML5, CSS3, Bootstrap & Sass.

Throughout the course, we will explore the most important topics step-by-step, along with building six complete projects:
<ol>

<li> How Does The Web Works?
<ul>
<li> Client and Server</li>
<li> HTTP Requests (GET, POST, PUT, DELETE)</li>
<li> HTTP Response (Status Code, Content-Type)</li>
</ul>
</li>

<li> HTML Fundamentals
<ul>
<li> Syntax</li>
<li> Document Structure</li>
<li> Meta Data</li>
<li> Links</li>
<li> Images and Media</li>
<li> Form Elements</li>
<li> Forms</li>
</ul>
</li>

<li> HTML Semantics
<ul>
<li> Sections (body, article, section, nav, aside, h1...h6, header, footer)</li>
<li> Grouping Elements (main, div, p, hr, ul, ol, li, figure, pre)</li>
<li> Text Level (a, em, strong, span, br)</li>
</ul>
</li>

<li> CSS Fundamentals
<ul>
<li> Adding CSS (Inline, Internal and External)</li>
<li> Syntax: selectors, declaration block, properties, declared value</li>
<li> CSS Selectors (universal, type, class, id, attribute)</li>
<li> Cascade and Specificity</li>
<li> Box Model</li>
<li> Sizing (padding, margin, width, height and border)</li>
<li> Units</li>
<li> Position (absolute, relative, fixed, static and sticky)</li>
<li> Display Property</li>
<li> Fonts and other formatting properties</li>
<li> Advanced Selectors</li>
</ul>
</li>

<li> Responsive Design
<ul>
<li> Text Effects</li>
<li> Images and video resizing</li>
<li> Different viewports</li>
<li> Media queries</li>
</ul>
</li>

<li> Layouts
<ul>
<li> Flexbox</li>
<li> CSS Grids</li>
</ul>
</li>

<li> Advanced
<ul>
<li> Variables</li>
<li> Transition & Animations</li>
<li> Transforms</li>
<li> Shadows and Gradients</li>
<li> Design Patterns</li>
<li> Website Planning</li>
</ul>
</li>

<li> SVG</li>

<li> CSS Libraries</li>

<li> Bootstrap (CSS Framework)
<ul>
<li> Layouts</li>
<li> Content</li>
<li> Forms</li>
<li> Components</li>
<li> Utilities</li>
</ul>
</li>

<li> SASS (CSS Preprocessor)
<ul>
<li> Variables</li>
<li> Nesting</li>
<li> Partials & Modules</li>
<li> Mixins</li>
<li> Extend/Inheritance</li>
<li> Operators</li>
</ul>
</li>

<li> Website Deployment</li>
</ol>

Why this course?
<ul>
<li>The entire course is focused on a project-building approach</li>
<li>Learn all the important concepts in the simplest possible way, with many examples.</li>
<li>No previous programming or coding experience is required, we will cover everything step-by-step from the basics.</li>

 All course materials are <a href="https://unwiredlearning.com/resource/html-css" target="_blank">here</a>

Course Introduction

Resources & Setup

HTML Fundamentals

HTML Semantics

CSS Fundamentals 1.0

CSS Fundamentals 2.0

CSS Fundamentals 3.0 (Display & Position)

CSS Fundamentals 4.0 (Responsive Web Design)

Project 1 - Profile Card

Project 2 - Login Page

Layout 1 - Flexbox

Project 3 - Spotify Clone using Flexbox

CSS Advanced 1.0

CSS Advanced 2.0 (SVG - Scalable Vector Graphics)

CSS Advanced 3.0 (Transition & Animation)

Layout 2 - CSS Gird

Browser Compatibility

Project 4 - Testimonial Page Using CSS Grid

SASS - CSS Preprocessor

Project 5 - Portfolio Website Using Bootstrap

Project 6 - EdTech Startup Landing Page

Deployment - Your Website on Web

Bonus - What's Next?

HTML & CSS

Web Development Foundation: Learn HTML5, CSS3 & Bootstrap

HTML5

CSS3

Bootstrap

Description for CSS Fundamentals 3.0 (Display & Position)

Description for CSS Fundamentals 4.0 (Responsive Web Design)

Description for Project 3 - Spotify Clone using Flexbox

Description for CSS Advanced 2.0 (SVG - Scalable Vector Graphics)

Description for CSS Advanced 3.0 (Transition & Animation)

Description for Project 4 - Testimonial Page Using CSS Grid

Description for Project 5 - Portfolio Website Using Bootstrap

Description for Project 6 - EdTech Startup Landing Page

Description for Deployment - Your Website on Web