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.
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