HTMLCSS Tutorial and Projects Course 2022 FlexboxGrid

Web Development for absolute beginners.Learn HTML5 and CSS3 from scratch by building 20+ amazing real world projects.
HTMLCSS Tutorial and Projects Course 2022 FlexboxGrid
File Size :
23.62 GB
Total length :
40h 14m

Category

Instructor

John Smilga

Language

Last update

Last updated 6/2022

Ratings

4.7/5

HTMLCSS Tutorial and Projects Course 2022 FlexboxGrid

What you’ll learn

Learn HTML5 from scratch.
Learn CSS3 from scratch.
Create responsive real world projects from scratch.
Learn CSS Grid and Flexbox Layout Modules.
Learn where to get free images, custom fonts.
Learn how to work with font-awesome icons
Learn where to get custom color palettes.

HTMLCSS Tutorial and Projects Course 2022 FlexboxGrid

Requirements

No programming/coding experience as we will start from absolute scratch
Any computer – Mac, PC.
Any Text Editor. We will download Brackets Text Editor but will be able follow along with any text editor.
Any Web Browser. Chrome,Firefox.(Chrome is requirement only if wants to use Brackets Live Preview).
All required software is free!!!!

Description

If you want to start your career in Web Development, HTML and CSS are essential skills to have because they are foundational languages of the web.
HTML stands for Hyper Text Markup Language. In short HTML is a markup language that is used developing web pages.
CSS stands for Cascading Style Sheets. In short CSS is a language responsible for layout and styling of the web pages.
In this course we will cover both languages from the scratch and by the end of the course become HTML and CSS ninjas by building Responsive Real World Projects.
Why you should take this course?
Reason Number ONE – You Will Understand the Web Better.
Knowing the HTML and CSS and how they are used to create web pages is essential for web developer as they are building blocks of every web page.
Reason Number TWO – You Will be able to Create Websites.
Once you will know HTML and CSS you will be able to create a personal,unique web page for yourself.
Reason Number THREE – Start a Web Career.
For anybody who wants to pursue a career in Web Development knowledge of HTML and CSS is required.
Reason Number FOUR – You Will Progress to Another Programming Languages with Greater Ease.
Once you know the fundamentals of HTML and CSS you will be able to pick up languages like Javascript with greater ease.
Reason Number FIVE – We Will Learn HTML and CSS from Scratch and Will Use it to Build Responsive Real Life Projects.
Not only we will learn the theory of HTML and CSS step by step. We also will apply our knowledge by building Real Life Projects.

Overview

Section 1: Course Intro

Lecture 1 Course Structure

Lecture 2 Video Blur Fix

Lecture 3 Course Review

Section 2: HTML Tutorial

Lecture 4 HTML Intro

Lecture 5 Google Chrome and Visual Studio Code

Lecture 6 Download Google Chrome

Lecture 7 Download Visual Studio Code

Lecture 8 Visual Studio Code Overview

Lecture 9 Create A Project

Lecture 10 First Webpage

Lecture 11 Basic HTML Document Structure

Lecture 12 Implement HTML Document Structure

Lecture 13 Live Server Extension Setup

Lecture 14 Extra Settings and Emmet

Lecture 15 Heading Elements

Lecture 16 Video Resources

Lecture 17 Paragraph Element

Lecture 18 White Space Collapsing

Lecture 19 Lorem Ipsum

Lecture 20 Image Basics

Lecture 21 Multiple Images

Lecture 22 External Images

Lecture 23 Nice Images

Lecture 24 Width and Height

Lecture 25 Crop Images

Lecture 26 Comments and Line Breaks

Lecture 27 External Links

Lecture 28 Internal Links

Lecture 29 Links – Within a Page

Lecture 30 Image Links – Empty Links

Lecture 31 Sup and Sub Elements

Lecture 32 STRONG and EM Elements

Lecture 33 Special Characters

Lecture 34 Unordered Lists

Lecture 35 Ordered Lists

Lecture 36 Nested Lists

Lecture 37 Table Element

Lecture 38 Forms – Input Elements and Submit Elements

Lecture 39 Forms – Textarea, Radio,Checkboxes, Select

Lecture 40 Install Prettier Code Formatter

Lecture 41 Keyboard Shortcuts

Lecture 42 Head Element – External Resources

Section 3: HTML Coffee Project

Lecture 43 Intro

Lecture 44 Setup

Lecture 45 Project Assets

Lecture 46 Download Images

Lecture 47 Logo, Heading, and Navbar

Lecture 48 Home Page

Lecture 49 About

Lecture 50 Numbers

Lecture 51 Contact

Lecture 52 Complete Project

Section 4: CSS Tutorial

Lecture 53 CSS Intro

Lecture 54 Workspace Setup

Lecture 55 Text Editor Setup

Lecture 56 Video Resources

Lecture 57 Inline CSS

Lecture 58 Internal CSS

Lecture 59 External CSS

Lecture 60 Power Struggle

Lecture 61 Basic CSS Syntax

Lecture 62 Element Selectors

Lecture 63 Grouping Selectors

Lecture 64 ID Selectors

Lecture 65 Class Selectors

Lecture 66 ID and Class Selector Summary

Lecture 67 DIV and SPAN Elements

Lecture 68 Inheritance in CSS

Lecture 69 Inheritance – More Info

Lecture 70 Last Rule, Specificity and Universal Selector

Lecture 71 Combine Selectors – Descendant Selector

Section 5: All Projects Intro

Lecture 72 All Projects Intro

Lecture 73 Complete Project

Section 6: Fundamentals Project

Lecture 74 First Project Intro

Lecture 75 Steps

Lecture 76 Complete Project

Lecture 77 Projects Folder

Section 7: CSS Colors

Lecture 78 Colors Intro

Lecture 79 Color and Background-color Properties

Lecture 80 Color Names

Lecture 81 RGB

Lecture 82 RGBA

Lecture 83 HEX Values

Lecture 84 VS-Code Color Options

Lecture 85 External Resources

Section 8: Colors Project

Lecture 86 Intro

Lecture 87 Steps

Lecture 88 Complete Project

Section 9: CSS Units

Lecture 89 Units Intro

Lecture 90 Pixels, Font-Size, Width, Height

Lecture 91 Percent Units

Lecture 92 Em Units

Lecture 93 Rem Units

Lecture 94 Vh and Vw

Lecture 95 Default Browser Styles and Chrome DevTools

Lecture 96 Calc Function

Lecture 97 Min-height, Max-height

Section 10: Units Project

Lecture 98 Intro

Lecture 99 Steps

Lecture 100 Complete Project

Section 11: Typography

Lecture 101 Typography Intro

Lecture 102 Font-family

Lecture 103 Font-Stack Generic Fonts

Lecture 104 Google Fonts

Lecture 105 System Fonts

Lecture 106 More Google Fonts

Lecture 107 Font-weight Font-style

Lecture 108 Text-align Text-indent

Lecture 109 More Text Properties

Section 12: Typography Project

Lecture 110 Intro

Lecture 111 Steps

Lecture 112 Complete Project

Section 13: CSS Box Model

Lecture 113 Box Model – Intro

Lecture 114 CSS Box Model – Padding

Lecture 115 CSS Box Model – Margin

Lecture 116 CSS Box Model – Border

Lecture 117 Border-radius Negative Margin

Lecture 118 Outline Property

Lecture 119 Border Hack

Section 14: CSS Box Model Project

Lecture 120 Intro

Lecture 121 Steps

Lecture 122 Html Structure

Lecture 123 CSS Styling

Section 15: Display Property

Lecture 124 Display Property Intro

Lecture 125 Display Property

Lecture 126 Basic Horizontal Centering

Lecture 127 Mobile Navbar Example

Lecture 128 Box-sizing : border-box

Lecture 129 Display inline-block

Lecture 130 Display:none, Opacity, Visibility

Section 16: Display Property Project

Lecture 131 Intro

Lecture 132 Steps

Lecture 133 Html Structure

Lecture 134 CSS Styling

Lecture 135 Most Common Questions

Section 17: Background Images

Lecture 136 Intro

Lecture 137 Setup

Lecture 138 Background Images Basics

Lecture 139 background-repeat

Lecture 140 background-size

Lecture 141 background-position

Lecture 142 background-attachment

Lecture 143 Linear Gradients

Lecture 144 Background Image Overlay

Lecture 145 Colorzilla

Section 18: Background Images Project

Lecture 146 Intro

Lecture 147 Steps

Lecture 148 Setup

Lecture 149 Html Structure

Lecture 150 CSS Styling

Section 19: Positions, Float, Media Queries

Lecture 151 Float, Positions, Media Queries, Z-index Intro

Lecture 152 Float Property

Lecture 153 Float Property Column Layout Example

Lecture 154 Position static

Lecture 155 Position Relative

Lecture 156 Position Absolute

Lecture 157 Position Fixed

Lecture 158 position:sticky

Lecture 159 Media Queries

Lecture 160 Z-index

Lecture 161 ::before and ::after Basics

Lecture 162 ::before and ::after Example

Lecture 163 Inset Property

Section 20: Position Property Project

Lecture 164 Intro

Lecture 165 Steps

Lecture 166 Complete Project

Section 21: Selectors Re-Visited

Lecture 167 Selectors Intro

Lecture 168 Basic Selectors

Lecture 169 Descendant and Child Selectors

Lecture 170 First-line and First-letter

Lecture 171 :hover pseudo-class Selector

Lecture 172 Link pseudo-class Selectors

Lecture 173 :root pseudo-class Selector

Section 22: Transform, Transition and Animation

Lecture 174 Intro

Lecture 175 transform : translate()

Lecture 176 Translate Hero Example

Lecture 177 transform:scale()

Lecture 178 transform:rotate()

Lecture 179 tranform:skew()

Lecture 180 Transition Property

Lecture 181 Multiple Transitions

Lecture 182 Transition – Delay, Shorthand, All Properties

Lecture 183 Transition-timing-function

Lecture 184 Animation

Lecture 185 Animation-fill-mode

Section 23: Animation Project

Lecture 186 Intro

Lecture 187 Steps

Lecture 188 Complete Project

Section 24: CSS Tutorial Continued

Lecture 189 Intro

Lecture 190 CSS Variables

Lecture 191 FontAwesome Icons – Intro

Lecture 192 FontAwesome Icons – Self Hosting Option

Lecture 193 FontAwesome Icons – CDN Link

Lecture 194 FontAwesome Icons – SVG Approach

Lecture 195 FontAwesome Icons – Versions

Lecture 196 Text-Shadow Box-shadow

Lecture 197 Browser Prefixes

Lecture 198 Semantic HTML

Lecture 199 object-fit

Lecture 200 Emmet Workflow

Lecture 201 :is()

Lecture 202 :not()

Lecture 203 HSL Color Values

Lecture 204 Five Server Extension

Section 25: Last Tutorial Project

Lecture 205 Intro

Lecture 206 Setup

Lecture 207 Images and Icons

Lecture 208 HTML Structure

Lecture 209 Reset

Lecture 210 CSS Variables

Lecture 211 Body

Lecture 212 Blog Card

Lecture 213 Blog Image

Lecture 214 Complete Project

Section 26: Tea Station Project

Lecture 215 Intro

Lecture 216 Setup Files and Finished Project

Lecture 217 Setup

Lecture 218 Assets

Lecture 219 CSS Variables

Lecture 220 Global Styles

Lecture 221 Header HTML

Lecture 222 Additional Video

Lecture 223 Header CSS

Lecture 224 Content Divider

Lecture 225 Skills HTML

Lecture 226 Skills CSS

Lecture 227 Skills Columns and Clearfix

Lecture 228 Class VS Descendant

Lecture 229 About HTML

Lecture 230 About CSS

Lecture 231 Products HTML

Lecture 232 Products CSS

Lecture 233 Services HTML

Lecture 234 Services CSS

Lecture 235 Services Icon

Lecture 236 Contact HTML

Lecture 237 Contact CSS

Lecture 238 Footer Html

Lecture 239 Footer CSS

Lecture 240 Nav Button

Lecture 241 Navbar Html

Lecture 242 Navbar CSS

Lecture 243 Navbar Functionality

Lecture 244 Animation

Lecture 245 Multiple Pages

Lecture 246 Form Submission

Lecture 247 Netlify – Intro

Lecture 248 Netlify – Drag and Drop

Lecture 249 Finished Project

Section 27: Git and Github Setup

Lecture 250 Optional Section

Lecture 251 Intro

Lecture 252 Git Install

Lecture 253 Git Commands

Lecture 254 Setup Github

Lecture 255 Benefits

Section 28: CSS FLEXBOX

Lecture 256 CSS Flexbox Intro

Lecture 257 Setup

Lecture 258 Naming Conventions

Lecture 259 flex-direction

Lecture 260 flex-wrap

Lecture 261 justify-content

Lecture 262 align-items

Lecture 263 Hero Project

Lecture 264 align-content

Lecture 265 Main Axis / Cross Axis

Lecture 266 order property

Lecture 267 align-self

Lecture 268 flex-grow

Lecture 269 flex-shrink

Lecture 270 flex-basis and flex

Lecture 271 NEW FLEXBOX FEATURES !!!

Section 29: Backroads Tour Company

Lecture 272 Intro

Lecture 273 Setup Files and Finished Project

Lecture 274 Project Setup

Lecture 275 Color Shades

Lecture 276 Logo

Lecture 277 Favicon

Lecture 278 Hero HTML

Lecture 279 Hero CSS

Lecture 280 About HTML

Lecture 281 About CSS

Lecture 282 About Column Layout

Lecture 283 Services HTML

Lecture 284 Services CSS

Lecture 285 Tours HTML

Lecture 286 Tours CSS

Lecture 287 Additional Design

Lecture 288 Contact HTML

Lecture 289 Contact CSS

Lecture 290 Gallery HTML

Lecture 291 Gallery CSS

Lecture 292 Footer HTML

Lecture 293 Footer CSS

Lecture 294 Navbar HTML

Lecture 295 Navbar CSS – Small Screen

Lecture 296 Navbar Toggle

Lecture 297 Smooth Scroll

Lecture 298 Navbar CSS – Big Screen

Lecture 299 Autoprefixer

Lecture 300 Netlify – Continuous Deployment

Lecture 301 Finished Project

Section 30: CSS Grid Tutorial

Lecture 302 CSS Grid – Intro

Lecture 303 Setup

Lecture 304 Basic Syntax – grid-template-columns

Lecture 305 Implicit Grid

Lecture 306 General CSS Setup

Lecture 307 Units – auto

Lecture 308 grid-template-rows

Lecture 309 fr units

Lecture 310 gap property

Lecture 311 Gap – New Syntax!

Lecture 312 fr vs %

Lecture 313 Firefox Developer Tools

Lecture 314 grid-lines

Lecture 315 Naming Grid Lines

Lecture 316 Grid Template Areas

Lecture 317 Order Property

Lecture 318 Repeat Function

Lecture 319 justify-content

Lecture 320 align-content

Lecture 321 align-items, jusitfy-items, align-self,justify-self

Lecture 322 minmax()

Lecture 323 auto-fit and auto-fill

Section 31: Grid Mini Projects

Lecture 324 Intro

Lecture 325 Setup Files and Finished Project

Lecture 326 Setup

Lecture 327 Global Styles

Lecture 328 Navbar Mini Project

Lecture 329 Hero HTML

Lecture 330 Hero CSS

Lecture 331 Cards HTML

Lecture 332 Cards CSS – Small Screen

Lecture 333 Cards CSS – Big Screen with Media Queries

Lecture 334 Cards CSS – Big Screen with minmax and auto-fit,auto-fill

Lecture 335 Cards CSS – Row Height

Lecture 336 Tiles HTML

Lecture 337 Tiles CSS

Lecture 338 Object-fit add-on

Lecture 339 Layout HTML

Lecture 340 Layout CSS – General

Lecture 341 Layout CSS – Grid Lines

Lecture 342 Complete Source Code and Finished Project

Section 32: Porfolio Project – With CSS Grid

Lecture 343 Intro

Lecture 344 Starter Project

Lecture 345 Setup

Lecture 346 Navbar HTML

Lecture 347 Navbar CSS – Small Screen

Lecture 348 Navbar CSS – Big Screen

Lecture 349 Sidebar HTML

Lecture 350 Sidebar CSS

Lecture 351 Sidebar Functionality

Lecture 352 Fixed Navbar

Lecture 353 Hero HTML

Lecture 354 Hero CSS – Small Screen

Lecture 355 Hero CSS – Big Screen

Lecture 356 About HTML

Lecture 357 About CSS – Small Screen

Lecture 358 About CSS – Big Screen

Lecture 359 Services HTML

Lecture 360 Services CSS – Small Screen

Lecture 361 Services CSS – Big Screen

Lecture 362 Projects HTML

Lecture 363 Projects CSS – Small Screen

Lecture 364 Projects CSS – Big Screen

Lecture 365 Projects CSS – Custom Layout

Lecture 366 Connect HTML

Lecture 367 Connect CSS – Basic Video Setup

Lecture 368 Connect CSS – Overlay

Lecture 369 Connect – Banner

Lecture 370 Temporary Remove Video

Lecture 371 Connect Clip-Path

Lecture 372 External Video Resources

Lecture 373 Skills HTML

Lecture 374 Skills CSS

Lecture 375 Timeline HTML

Lecture 376 Timeline CSS

Lecture 377 Blog – Basic Setup

Lecture 378 Blog – Complete

Lecture 379 Footer

Lecture 380 About, Contact – HTML

Lecture 381 About, Contact -CSS

Lecture 382 Projects Page and Browser Prefixes

Lecture 383 Complete Project

Section 33: Default Starter

Lecture 384 Intro

Lecture 385 Resources

Lecture 386 Structure

Lecture 387 Html

Lecture 388 Normalize

Lecture 389 Fonts

Lecture 390 Fonts – Overview and Tweaks

Lecture 391 Colors – General Setup

Lecture 392 Primary Shades

Lecture 393 Gray Shades

Lecture 394 Happy Hues

Lecture 395 Rest of the Vars

Lecture 396 Image

Lecture 397 Buttons

Lecture 398 Alerts

Lecture 399 Form Setup

Lecture 400 Form CSS

Lecture 401 Loading

Lecture 402 Title

Section 34: Additional Projects

Lecture 403 Intro

Lecture 404 Starter

Lecture 405 Setup

Lecture 406 Color Flipper – Intro

Lecture 407 Color Flipper – HTML

Lecture 408 Color Flipper – CSS

Lecture 409 Counter – Intro

Lecture 410 Counter – HTML

Lecture 411 Counter – CSS

Lecture 412 Task Manager- Intro

Lecture 413 Task Manager – Form HTML

Lecture 414 Task Manager – Form CSS

Lecture 415 Task Manager – List HTML

Lecture 416 Task Manager – List CSS

Lecture 417 Task Manager – Edit Form HTML

Lecture 418 Task Manager – Edit Form CSS

Lecture 419 Reviews – Intro

Lecture 420 Reviews – HTML

Lecture 421 Reviews – CSS

Lecture 422 Navbar – Intro

Lecture 423 Navbar – HTML

Lecture 424 Navbar – CSS (small screen)

Lecture 425 Navbar – CSS (big screen)

Lecture 426 Navbar – JS (toggle functionality)

Lecture 427 Sidebar – Intro

Lecture 428 Sidebar – HTML

Lecture 429 Sidebar – Toggle Button

Lecture 430 Sidebar – CSS

Lecture 431 Sidebar – Functionality

Lecture 432 Modal – Intro

Lecture 433 Modal – HTML

Lecture 434 Modal – Hero CSS

Lecture 435 Modal – CSS

Lecture 436 Questions – Intro

Lecture 437 Questions – HTML

Lecture 438 Questions – CSS

Lecture 439 Menu – Intro

Lecture 440 Menu – HTML

Lecture 441 Menu – CSS

Lecture 442 Grocery Bud – Intro

Lecture 443 Grocery Bud – HTML

Lecture 444 Grocery Bud – CSS

Section 35: Bonus

Lecture 445 Bonus

Anyone who wants to learn Web Development from scratch.

Course Information:

Udemy | English | 40h 14m | 23.62 GB
Created by: John Smilga

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top