Completed
9: Divs rule the world
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Learn HTML & CSS – Full Course for Beginners
Automatically move to the next video in the Classroom when playback concludes
- 1 Introduction
- 2 1: Welcome to the HTML & CSS Course
- 3 2: HTML Tags
- 4 3: Write a news article
- 5 4: The image tag
- 6 5: Nesting
- 7 6: Internet superpowers - Change the BBC news!
- 8 7: Interactive elements - Button
- 9 8: Interactive elements - input tags -- Experiment with input types 100%
- 10 9: Let’s build Google!
- 11 10: Aside - Anchor tags
- 12 11: Add an anchor tag to Google.com
- 13 12: Proper document structure
- 14 13: Aside: Lists
- 15 14: Build a personal Website
- 16 15: Deploy your Personal Website
- 17 16: HTML Recap
- 18 1: Let’s learn CSS!
- 19 2: Write your first lines of CSS!
- 20 3: Write your first lines of CSS! Solution
- 21 4: Let’s destroy wikipedia - recording
- 22 5: Link to the CSS file
- 23 6: Set the width of the elements
- 24 7: Inline vs block elements
- 25 8: Margin top
- 26 9: Divs rule the world
- 27 10: CSS classes
- 28 11: Aside - Learn margins via flags
- 29 12: Add space between our elements
- 30 13: Aside - Centering with margins
- 31 14: Centering our content
- 32 15: Aside - padding
- 33 16: Aside - Border and border-radius
- 34 17: Aside challenge - style Twitter button
- 35 18: Fix the input field
- 36 19: Center the button
- 37 20: Style the button
- 38 21: Why we can’t have two block-level buttons
- 39 22: Aside - Flexbox
- 40 23: Centering both buttons with flexbox
- 41 24: Google clone recap
- 42 1: Building your digital business card
- 43 2: Fix the image path
- 44 3: Add alt attribute
- 45 4: Make image smaller
- 46 5: Add a border and padding
- 47 6: Aside - flexbox child containers
- 48 7: Flex item containers
- 49 8: Add a utility class
- 50 9: Justify the items
- 51 10: Center the card
- 52 11: Aside - inheritance
- 53 12: Center the text via inheritance
- 54 13: Add colors
- 55 14: Web-safe fonts
- 56 15: Aside - margin/padding shorthand
- 57 16: Use the margin & padding shorhands
- 58 17: Deploy your Digital Business Card
- 59 18: Business Card Recap
- 60 1: Let’s go to space
- 61 2: Add a background image from unsplash
- 62 3: Center elements and Style button
- 63 4: Add a Google font
- 64 5: @font-face
- 65 6: Aside - spans
- 66 7: Add an underline using a span
- 67 8: Use an ID for the logo
- 68 9: Replace the jpg with a webp
- 69 10: Choose a color palette from an image
- 70 11: Add the terms & conditions section
- 71 12: Aside - text shadow
- 72 13: Improving the readability with text shadows
- 73 14: Space - Exploration recap
- 74 1: Let’s build a Birthday GIFt site
- 75 2: Add basic header styling
- 76 3: Set the colors
- 77 4: Add shadow on text
- 78 5: We have a problem that flexbox can fix
- 79 6: Aside - align-items
- 80 7: Aside - flex-direction
- 81 8: Turn the header into a flexbox
- 82 9: Fix date and age design
- 83 10: Create the first gift
- 84 11: Replace the img with a div
- 85 12: Aside - make elements change on hover
- 86 13: Add the hover effect
- 87 14: Create the next GIFt
- 88 15: Create two more GIFts
- 89 16: Create the final GIFt
- 90 17: Add the footer
- 91 18: Add a background gradient
- 92 19: Personalize the Birthday GIFt Site
- 93 20: Use GitHub Desktop to publish your Birthday GIFt Site
- 94 21: Deploying your Birthday GIFt Site
- 95 22: Use VS Code to edit your Birthday GIFt
- 96 23: GIFt site recap
- 97 1: It’s time to go solo!
- 98 2: Solo Project - Hometown Homepage
- 99 3: Congrats on completing the course!
