Learn HTML & CSS – Full Course for Beginners

Learn HTML & CSS – Full Course for Beginners

freeCodeCamp.org via freeCodeCamp Direct link

11: Aside - inheritance

52 of 99

52 of 99

11: Aside - inheritance

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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.