Before We Start Our Projects | developedbyed | Creative Programming

Autoplay
Autocomplete

Previous Lesson Complete and Continue

The Creative HTML5 & CSS3 Course

Introduction

Welcome To The Course! (0:56)
Full Course Download

HTML5 Basics

Setting Up VS Code (1:43)
Installing Extensions (2:46)
Creating a HTML Tag (4:15)
Basic Layout (4:23)
Meta Tags (12:58)
h and p Tags (7:00)
Images and Video (7:10)
a Tags (5:12)
Forms (16:48)
Lists (4:04)
Comments (2:25)
Tables (3:13)
Classes and ID's (5:33)
HTML5 Semantics (16:00)
HTML5 Entities (3:17)

CSS3 Basics

Let's Learn CSS (0:27)
How To Use CSS3 (3:56)
Basic Syntax (5:19)
Selectors (15:30)
Specificity (7:41)
Padding and Margin (8:04)
Box Model (8:32)
Pixels, rem, em (13:36)
Styling a Button (7:02)
Display Types (7:22)
Positions (17:47)
Pseudo Elements and Classes (5:55)
Mini Project - How to not create layouts (optional) (33:51)

Mobile Responsiveness

Media Queries (10:26)
VH and VW (12:11)

Flexbox

Flexbox Basics (27:03)
Let's Practice Flexbox (28:38)

Project 1 - Travel Website

Quick Notice about paths
Before We Start Our Projects (1:21)
Setting Things Up (12:56)
Creating Our Nav&Hero (38:21)
Creating the City Section (42:43)
Card Section (20:06)
Form Section (14:44)
Submitting Forms (5:31)
Travelly Final Code

Accessibility

Semantics (3:30)
Contrast (4:15)
Keyboard (4:14)
Text (4:56)
Labels and Alt (6:18)

CSS Grid

CSS Grid Basics (19:30)
CSS Grid vs Flexbox (6:22)

Project 2 - Photography Website

Starter Files
Setup (14:36)
Adding Fonts (2:27)
First Page (28:41)
Plant Animation (10:38)
Burger Animation (22:42)
Fixing Small Issues (3:18)
About Section (17:47)
Image Gallery (17:34)
Contact Page (26:17)
Javascript Functionality (15:45)
Elena Joy Final Code

Basics of SASS

Basics of SASS (24:23)
Let's Learn a Magic Trick (1:23)

Final Project - Portfolio

Starter Files
Portfolio Setup (12:01)
Getting SVGs and Icons (9:01)
Creating the Nav and Section (21:25)
Animating SVGs (8:37)
Mobile Friendly (11:43)
Project Page (11:31)
Finish Line (14:28)
Portofolio Final Code

Optimizing and Deploying

Optimizing Images (4:11)
Optimizing HTML and CSS (1:53)
Deployment (4:44)
The End (0:47)

Teach online with

Before We Start Our Projects

Complete and Continue

Discussion

21 comments