Web development with HTML and CSS: Build Real-World websites

Course Curriculum

Chapter 1: Getting started

Lecture 1: A bigger picture of how the internet works

Lecture 2: Setting up our environment – browser

Lecture 3: Setting up our environment – IDE and code editor

Lecture 4: Some useful tips to follow during this course

Lecture 5: Help and source

Lecture 6: Help and src code

Chapter 2: Master HTML – Part I

Lecture 1: Introduction

Lecture 2: Build your very first page

Lecture 3: Page structure

Lecture 4: Heading

Lecture 5: Paragraphs, hrules, line-break, pre-formatted

Lecture 6: Formatting text

Lecture 7: Comments

Chapter 3: Master HTML – Part II

Lecture 1: Span and Div! So important

Lecture 2: Header, nav, section, article, aside and footer

Lecture 3: Quotes

Lecture 4: Links

Lecture 5: Images

Lecture 6: Favicon

Lecture 7: Tables

Lecture 8: Lists

Lecture 9: Forms

Lecture 10: Form elements

Chapter 4: Master HTML – Part III

Lecture 1: Block, inline-block and inline

Lecture 2: Class and id

Lecture 3: Iframe

Lecture 4: Entities symbols and emojis

Lecture 5: Audio and video

Chapter 5: Grasp CSS Foundation – Part I

Lecture 1: Brief introduction

Lecture 2: Syntax and selectors

Lecture 3: How to insert css

Lecture 4: Colors, backgrounds and borders

Lecture 5: Padding, margins, width and height

Lecture 6: Units, specificity and !important

Chapter 6: Grasp CSS Foundation – Part II

Lecture 1: Box model and box-sizing

Lecture 2: Text

Lecture 3: Fonts

Lecture 4: Links and tables

Chapter 7: Wrapping all stuff together Pt 1 – 7Cars

Lecture 1: Sass and Node JS

Lecture 2: 20 minutes of Sass

Lecture 3: Setup the environment! [Files]

Lecture 4: NodeJs and Saas architecture in our project

Lecture 5: Base and Typography

Chapter 8: 7 Cars – Project development

Lecture 1: Header – part 1

Lecture 2: Header – part 2

Lecture 3: Background Video

Lecture 4: Slide

Lecture 5: Designing our grid system

Lecture 6: In high demand – Deal now part 1

Lecture 7: In high demand – Deal now part 2

Lecture 8: In high demand – Deal now part 3

Lecture 9: Top models – part 1

Lecture 10: Top models – part 2

Lecture 11: Racing by Nature

Lecture 12: Our services – part 1

Lecture 13: Our services – part 2

Lecture 14: Where we at?

Lecture 15: Contact us – part 1

Lecture 16: Contact us – part 2

Lecture 17: Testimonials – part 1

Lecture 18: Footer – part 1

Lecture 19: Popup – part 1

Lecture 20: Popup – part 2

Lecture 21: Popup – part 3

Lecture 22: Menu – part 1

Lecture 23: Menu – part 2

Chapter 9: 7 Cars – Responsiveness

Lecture 1: What is responsiveness and how to apply

Lecture 2: Responsive header and slider

Lecture 3: Responsive cards

Lecture 4: Responsive models

Lecture 5: Responsive racing by nature

Lecture 6: Responsive service-box

Lecture 7: Responsive map for where we at

Lecture 8: Responsive form for contact us

Lecture 9: Responsive testimonial

Lecture 10: Responsive footer

Lecture 11: Responsive popup

Lecture 12: Responsive menu

Chapter 10: 7 Cars – Show car page development

Lecture 1: Building the header

Lecture 2: Building description box

Lecture 3: Building the fixed background

Lecture 4: Building the specs

Lecture 5: Building the specs – part 2

Lecture 6: Building the car design

Lecture 7: Building the same brand models

Lecture 8: Building the same brand models – part 2

Lecture 9: Building the shopping tools

Lecture 10: Building the footer

Chapter 11: 7 Cars – Show page responsiveness

Lecture 1: Building responsive header