SuperSimpleDev Courses

6.1 Intro to the HTML Structure

6.2 The title Element

6.3 Live Server Extension

6.4 Add the HTML Structure to website.html and buttons.html

6.5 Separate CSS Into Its Own File

6.6 Filepaths

6.7 Add the HTML Structure to text.html

6.8 Add New Fonts to the Website

6.9 Conclusion & Exercises

7.1 Project Intro & Setup

7.2 The img Element

7.3 How to Style img Elements

7.4 The input Element

7.5 Exercises

8.1 The display Property

8.2 Block Elements

8.3 Inline-Block Elements

8.4 Inline Elements

8.5 Switch From Block to Inline-Block

8.6 Switch from Inline-Block to Block

8.7 Use display Property in the YouTube Project

8.8 Conclusion & Exercises

9.1 The div Element

9.2 div is a Container

9.3 Why Containers Are Useful

9.4 Create Multiple Video Previews

9.5 Finish the Second Video Preview

9.6 Conclusion and Exercises

10.1 Nested Layouts Technique

10.2 Another Example of Nested Layouts Technique

10.3 Create a Vertical Layout With Code

10.4 Create a Horizontal Layout With Code

10.5 Viewing Nested Layouts in the Chrome DevTools

10.6 Style the Profile Picture and Video Title

10.7 Finish Styling the Video Preview

10.8 Conclusion & Exercises

11.1 Problems With inline-block

11.2 Set Up CSS Grid Practice File

11.3 Intro to CSS Grid

11.4 Create Columns and Rows

11.5 fr Values

11.6 Multiple fr Values

11.7 Use Grid in the YouTube Project

11.8 Create a Bigger Grid

11.9 column-gap & row-gap

11.10 Create a Grid of Video Previews

11.11 Conclusion and Exercises

12.1 Set Up Flexbox Practice File

12.2 Intro to Flexbox

12.3 The flex Property

12.4 Multiple flex Properties

12.5 Difference Between Flexbox and Grid

12.6 More Setup in the Flexbox Practice File

12.7 Align Horizontally With justify-content

12.8 Align Vertically With align-items

12.9 Start Creating the Header

12.10 Separate CSS Into Multiple Files

12.11 Start Styling the Header

12.12 Position the Sections of the Header

12.13 Set max-width on the Middle Section

12.14 Conclusion & Exercises

13.1 Download the Icons for the Header

13.2 Create the Left Section of the Header

13.3 Create the Search Box and Buttons in the Middle Section

13.4 Style the Search Box in the Middle Section

13.5 Style the Buttons in the Middle Section

13.6 Create the Right Section of the Header

13.7 The flex-shrink Property

13.8 Exercises

14.1 Intro to Position & Position Static

14.2 Position Fixed

14.3 Move and Resize Position Fixed Elements

14.4 Make the Header Position Fixed

14.5 How to Position a Sidebar

14.6 Position the Sidebar in the YouTube Project

14.7 Conclusion & Exercises

15.1 Position Absolute

15.2 The z-index Property

15.3 Position Absolute Inside Position Fixed

15.4 Position Absolute Inside Position Relative

15.5 Create the Video Time in the YouTube Project

15.6 Style the Video Time

15.7 Add z-index to the Thumbnails

15.8 Create the Notification Count

15.9 Conclusion & Exercises

16.1 Create the Sidebar Structure

16.2 Add Icons to the Sidebar

16.3 Style the Icons and Text in the Sidebar

16.4 Finish Styling the Sidebar

16.5 Finish Styling the Video Previews

16.6 Create Tooltip for the Search Button

16.7 Make Tooltip Appear When Hovering

16.8 Create Tooltip for the Voice Search Button

16.9 Center the Tooltip With the Button

16.10 Create Tooltip for the Create Button

16.11 Conclusion & Exercises

17.1 Intro to Responsive Design

17.2 Shorthand Properties

17.3 Inheritance

17.4 Inheritance With CSS Specificity

17.5 Semantic Elements

17.6 Comments in HTML & CSS

17.7 Continue Learning by Using Google

17.8 Exercises

Final Test

Double check your completion & name before receiving your certificate!