Course Contents
(0:00:00) Introduction
(0:01:37) Welcome to the HTML & CSS Course
(0:04:28) HTML Tags
(0:08:03) Write a news article
(0:10:22) The image tag
(0:15:43) Nesting
(0:18:45) Internet superpowers – Change the BBC news!
(0:24:07) Interactive elements – Button
(0:26:19) Interactive elements – input tags — Experiment with input types 100%
(0:31:40) Let’s build Google!
(0:35:47) Aside – Anchor tags
(0:40:42) Add an anchor tag to Google.com
(0:42:28) Proper document structure
(0:48:38) Aside: Lists
(0:52:53) Build a personal Website
(1:02:18) Deploy your Personal Website
(1:05:46) HTML Recap
Build a Google.com clone
(1:07:29) Let’s learn CSS!
(1:08:19) Write your first lines of CSS!
(1:12:54) Write your first lines of CSS! Solution
(1:16:45) Let’s destroy wikipedia – recording
(1:18:51) Link to the CSS file
(1:21:41) Set the width of the elements
(1:23:59) Inline vs block elements
(1:26:26) Margin top
(1:27:48) Divs rule the world
(1:30:01) CSS classes
(1:34:15) Aside – Learn margins via flags
(1:40:37) Add space between our elements
(1:41:50) Aside – Centering with margins
(1:45:31) Centering our content
(1:47:00) Aside – padding
(1:52:43) Aside – Border and border-radius
(1:58:15) Aside challenge – style Twitter button
(2:03:39) Fix the input field
(2:08:46) Center the button
(2:11:15) Style the button
(2:16:05) Why we can’t have two block-level buttons
(2:20:53) Aside – Flexbox
(2:24:51) Centering both buttons with flexbox
(2:28:00) Google clone recap
Build a Digital Business Card
(2:30:15) Building your digital business card
(2:30:50) Fix the image path
(2:33:58) Add alt attribute
(2:38:45)2 Make image smaller
(2:40:06) Add a border and padding
(2:44:12) Aside – flexbox child containers
(2:48:09) Flex item containers
(2:49:56) Add a utility class
(2:53:22) Justify the items
(2:55:41) Center the card
(2:57:48) Aside – inheritance
(3:02:24) Center the text via inheritance
(3:05:38) Add colors
(3:09:17) Web-safe fonts
(3:14:48) Aside – margin/padding shorthand
(3:19:09) Use the margin & padding shorthands
(3:20:30) Deploy your Digital Business Card
(3:25:41) Business Card Recap
Build a Space Exploration Site
(3:27:50) Let’s go to space
(3:28:30) Add a background image from unsplash
(3:32:46) Center elements and Style button
(3:36:18) Add a Google font
(3:40:59) @font-face
(3:43:12) Aside – spans
(3:47:27) Add an underline using a span
(3:49:25) Use an ID for the logo
(3:54:07) Replace the jpg with a webp
(3:56:52) Choose a color palette from an image
(3:59:57) Add the terms & conditions section
(4:04:13) Aside – text shadow
(4:10:39) Improving the readability with text shadows
(4:12:46) Space – Exploration recap
Build a Birthday GIFt Site
(4:14:38) Let’s build a Birthday GIFt site
(4:15:54) Add basic header styling
(4:19:43) Set the colors
(4:21:15) Add shadow on text
(4:24:50) We have a problem that flexbox can fix
(4:27:37) Aside – align-items
(4:34:06) Aside – flex-direction
(4:38:55) Turn the header into a flexbox
(4:40:45) Fix date and age design
(4:45:12) Create the first gift
(4:50:55) Replace the img with a div
(4:55:31) Aside – make elements change on hover
(4:58:37) Add the hover effect
(5:00:55) Create the next GIFt
(5:05:35) Create two more GIFts
(5:08:22) Create the final GIFt
(5:11:59) Add the footer
(5:15:55) Add a background gradient
(5:19:37) Personalize the Birthday GIFt Site
(5:21:23) Use GitHub Desktop to publish your Birthday GIFt Site
(5:27:05) Deploying your Birthday GIFt Site
(5:10:43) Use VS Code to edit your Birthday GIFt
(5:15:38) GIFt site recap
Solo Project- Hometown Homepage
(5:17:33) It’s time to go solo!
(5:19:52) Solo Project – Hometown Homepage
(5:24:02) Congrats on completing the course!