Web Development Foundation: Complete Bootcamp [6 Projects]

Build Responsive Websites With HTML5 & CSS3 (Flexbox, CSS Grid, Transitions, Animation, SVG, Bootstrap & SASS)

What you'll learn
Build 6 stunning real-world projects for your portfolio, learn from basics with no previous knowledge!
Learn website structuring with semantic and accessible HTML5
Strong foundation to CSS fundamental concepts with implementations (Selectors, Specificity, Box Model, Display, Position, Units)
Support any device size with Responsive Design (Mobile, Tablets & Desktop)
Play games to practice important CSS concepts (Selectors, Flexbox, CSS Grid)
Use common components, utilities and layout patterns for professional website development
Learn to find free design assets such as images, fonts, and icons
Learn how to use each skill in the real world with project implementations
Work with CSS Preprocessor: SASS (variables, nesting, mixins, extend/inheritance)
Work with CSS Framework: Bootstrap 5 (layouts, forms, components & utilities)
Website deployment on Web using Netlify
Requirements
No coding/design experience necessary
All computer works (Windows, macOS or Linux)
We use Industry recommended free tools (No paid software needed)
Description
Welcome to Web Development Foundation, one single course to start your web development journey as a beginner step-by-step. This course touches on each and every important topic through concept explanation, 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 6 projects:1. How Does The Web Works?- Client and Server- HTTP Requests (GET, POST, PUT, DELETE)- HTTP Response (Status Code, Content-Type)2. HTML Fundamentals- Syntax- Document Structure- Meta Data- Links- Images and Media- Form Elements- Forms3. HTML Semantics- Sections (body, article, section, nav, aside, h1…h6, header, footer)- Grouping Elements (main, div, p, hr, ul, ol, li, figure, pre)- Text Level (a, em, strong, span, br)4. CSS Fundamentals- Adding CSS (Inline, Internal and External)- Syntax: selectors, declaration block, properties, declared value- CSS Selectors (universal, type, class, id, attribute)- Cascade and Specificity- Box Model- Sizing (padding, margin, width, height and border)- Units- Position (absolute, relative, fixed, static and sticky)- Display Property- Fonts and other formatting properties- Advanced Selectors5. Responsive Design- Text Effects- Images and video resizing- Different viewports- Media queries6. Layouts- Flexbox- CSS Grids7. Advanced- Variables- Transition & Animations- Transforms- Shadows and Gradients- Design Patterns- Website Planning8. SVG9. CSS Libraries10. Bootstrap (CSS Framework)- Layouts- Content- Forms- Components- Utilities11. SASS (CSS Preprocessor)- Variables- Nesting- Partials & Modules- Mixins- Extend/Inheritance- Operators12. Website Deployment–––––––––Why this course?Complete course is focused on the concept learning approach, you learn every concept through a logical and visual learning approach. Learn all important concepts in the simplest possible way with examples and real-life projects. You don't need any knowledge, we will cover everything step-by-step from scratch.–––––––––After completing this course you will be ready to work as an Intern, Fresher, or Freelancer and you will also be able to implement everything yourself! Most importantly you will be ready to divide deep with future practice and hard level questions of website building. Enroll now, I will make sure you learn best about HTML, CSS, Bootstrap and SASS.

Overview

Section 1: Course Introduction

Lecture 1 Introduction & Curriculum Walkthrough

Lecture 2 Welcome - Lets Get Started!

Section 2: Resources & Setup

Lecture 3 Resources [Important]

Lecture 4 Resources [Important]

Lecture 5 How Web Works? [Optional]

Lecture 6 Environment Setup

Section 3: HTML Fundamentals

Lecture 7 HTML Introduction

Lecture 8 Head Section

Lecture 9 Common HTML Tags

Lecture 10 Media Tags

Lecture 11 Linking Page

Lecture 12 Forms I

Lecture 13 Forms II

Lecture 14 Comments

Lecture 15 List

Lecture 16 Tables

Lecture 17 Inline and Block

Lecture 18 Id & Classes

Section 4: HTML Semantics

Lecture 19 Semantics I

Lecture 20 Semantics II

Lecture 21 HTML Entity

Section 5: CSS Fundamentals 1.0

Lecture 22 Introduction To CSS

Lecture 23 CSS Types and Order

Lecture 24 Selectors

Lecture 25 Selector Game I

Lecture 26 Selector Game II

Lecture 27 Specificity / R029

Lecture 28 Common Properties

Section 6: CSS Fundamentals 2.0

Lecture 29 Box Model

Lecture 30 Box Sizing

Lecture 31 Box Model Values

Lecture 32 Unit Values

Section 7: CSS Fundamentals 3.0 (Display & Positions)

Lecture 33 Display

Lecture 34 Display vs Visibility

Lecture 35 Position / R041

Lecture 36 Z Index

Lecture 37 Pseudo Elements & Pseudo Classes / R042

Section 8: CSS Fundamentals 4.0 (Responsive Web Design)

Lecture 38 Responsiveness: Media Query / R043

Lecture 39 Viewport Units: Height & Width / R044

Section 9: Project 1 - Profile Card

Lecture 40 Project Source Code - Github

Lecture 41 Transform / R045

Lecture 42 Position / R046

Lecture 43 Google Font

Lecture 44 Button Design

Lecture 45 Margin Auto vs Text Align Center

Lecture 46 Box Shadow

Lecture 47 Icons

Lecture 48 Color suggestion

Lecture 49 CSS Sequence: Advise

Section 10: Project 2 - Login Page

Lecture 50 Project Source Code - Github

Lecture 51 Background Gradient

Lecture 52 Input fields

Lecture 53 Forgot Password

Lecture 54 Login Button

Lecture 55 Min Max Width

Section 11: Layout 1 - Flexbox

Lecture 56 Flexbox Introduction

Lecture 57 Parent Properties

Lecture 58 Child Properties

Lecture 59 Flexbox Tool

Lecture 60 Flexbox Game / R063

Section 12: Project 3 - Spotify Clone Using Flexbox

Lecture 61 Project Source Code - Github

Lecture 62 Flexbox Project / R075

Lecture 63 Header I

Lecture 64 Header II - Logo

Lecture 65 Main I / R078

Lecture 66 Main II / R079

Lecture 67 Background Image / R080

Lecture 68 Footer I / R081

Lecture 69 Footer II / R082

Lecture 70 Footer III

Lecture 71 Footer IV / R084

Lecture 72 Responsive Design: Main / R085

Lecture 73 Responsive Design: Header / R086

Lecture 74 Responsive Design: Footer / R087

Lecture 75 Variables I / R088

Lecture 76 Variables II / R089

Section 13: CSS Advanced 1.0

Lecture 77 Backgrounds

Lecture 78 Background Clip / R091

Lecture 79 Background Shorthand

Lecture 80 Transform / R093

Lecture 81 CSS Art: Border and Border Radius

Lecture 82 CSS Art: Border Radius / R095

Lecture 83 CSS Art: Designing Shapes / R096

Section 14: CSS Advanced 2.0 (SVG - Scalable Vector Graphics)

Lecture 84 SVG: Fundamentals / R098

Lecture 85 SVG: Design & Tools

Section 15: CSS Advanced 3.0 (Transition & Animation)

Lecture 86 Transition / R101

Lecture 87 Animations I

Lecture 88 Animations II / R103

Section 16: Layout 2 - CSS Grid

Lecture 89 CSS Grid Introduction / R104

Lecture 90 Row and Columns

Lecture 91 Common Properties

Lecture 92 Shorthand Property

Lecture 93 Grid Template Area

Lecture 94 Nested Grid

Lecture 95 Align Properties

Lecture 96 CSS Grid Game / R114

Lecture 97 Autofit vs Autofill / R116

Section 17: Browser Compatibility

Lecture 98 Browser Compatibility - Vender Prefix Code

Section 18: Project 4 - Testimonial Page Using CSS Grid

Lecture 99 Project Source Code - Github

Lecture 100 CSS Grid Project

Lecture 101 Feedback Card

Lecture 102 Utility CSS

Lecture 103 Feedback Card

Lecture 104 Mobile Responsive

Section 19: SASS - CSS Preprocessor

Lecture 105 SCSS/SASS Introduction

Lecture 106 Concepts - Variables, Nesting

Lecture 107 Concepts - Partials, Modules

Lecture 108 Concepts - Extend/Inheritance

Lecture 109 Concepts - Mixins and Operators / R129

Section 20: Project 5 - Portfolio Website Using Bootstrap

Lecture 110 Project Source Code - Github

Lecture 111 Bootstrap Introduction - Project Demo

Lecture 112 Utilities

Lecture 113 Layouts - Container, Grid

Lecture 114 Layouts - Container, Grid

Lecture 115 Components

Lecture 116 Portfolio Project: Main Section

Lecture 117 Portfolio Project: About/Blog Section

Lecture 118 Portfolio Project: Contact Section

Lecture 119 Portfolio Project: Footer

Lecture 120 Portfolio Project: Project Section

Lecture 121 Project Completion

Section 21: Project 6 - EdTech Startup Landing Page

Lecture 122 Project Source Code - Github

Lecture 123 EdTech Landing Page / R151

Lecture 124 Initial Project Setup

Lecture 125 Navigation

Lecture 126 Banner Section I

Lecture 127 Banner Section II

Lecture 128 Transition, Transform, Animation / R157

Lecture 129 Building Theme

Lecture 130 Stats Section I / R159

Lecture 131 Stats Section II (Flexbox)

Lecture 132 Information Section / R161

Lecture 133 Working Section (CSS Grid) / R162

Lecture 134 Footer (SVG) / R163

Lecture 135 Animate CSS (CSS Library)

Lecture 136 Scroll Bars / R166

Lecture 137 Responsiveness I - Media Queries / R167

Lecture 138 Responsiveness II - Media Queries / R168

Lecture 139 Hamburger Menu I

Lecture 140 Hamburger Menu II / R170

Section 22: Deployment - Your Website On Web

Lecture 141 Project Deployment Using Netlify

Section 23: Bonus: What Next?

Lecture 142 Bonus: What Next?

Absolute beginners who want to learn how to build a beautiful and responsive website,Designers who want to expand their skill set into HTML5, CSS3, Bootstrap and SASS