[#WebDesign #Coding] Learn HTML & CSS – Full Course for Beginners

Learn HTML & CSS – Full Course for Beginners


By freeCodeCamp.org
Published: Sep 14, 2022


freeCodeCamp.org Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges. Go here for the interactive browser version: https://scrimba.com/links/htmlandcss

This course was created by Per Harald Borgen, the co-founder and CEO of Scrimba. You can follow Per on Twitter here: https://twitter.com/perborgen.

    Contents

  • 0:00:00 Introduction
    Build and deploy your first website

  • 0:01:32 1: Welcome to the HTML & CSS Course
  • 0:04:12 2: HTML Tags
  • 0:07:33 3: Write a news article
  • 0:09:43 4: The image tag
  • 0:14:43 5: Nesting
  • 0:17:33 6: Internet superpowers – Change the BBC news!
  • 0:22:34 7: Interactive elements – Button
  • 0:24:37 8: Interactive elements – input tags — Experiment with input types 100%
  • 0:29:37 9: Let’s build Google!
  • 0:33:28 10: Aside – Anchor tags
  • 0:38:04 11: Add an anchor tag to Google.com
  • 0:39:43 12: Proper document structure
  • 0:45:29 13: Aside: Lists
  • 0:49:27 14: Build a personal Website
  • 0:58:15 15: Deploy your Personal Website
  • 1:01:30 16: HTML Recap
    Build a Google.com clone

  • 1:03:06 1: Let’s learn CSS!
  • 1:03:53 2: Write your first lines of CSS!
  • 1:08:10 3: Write your first lines of CSS! Solution
  • 1:11:46 4: Let’s destroy wikipedia – recording
  • 1:13:43 5: Link to the CSS file
  • 1:16:22 6: Set the width of the elements
  • 1:18:31 7: Inline vs block elements
  • 1:20:49 8: Margin top
  • 1:22:05 9: Divs rule the world
  • 1:24:10 10: CSS classes
  • 1:28:07 11: Aside – Learn margins via flags
  • 1:34:04 12: Add space between our elements
  • 1:35:12 13: Aside – Centering with margins
  • 1:38:39 14: Centering our content
  • 1:40:01 15: Aside – padding
  • 1:45:23 16: Aside – Border and border-radius
  • 1:50:33 17: Aside challenge – style Twitter button
  • 1:55:36 18: Fix the input field
  • 2:00:22 19: Center the button
  • 2:02:42 20: Style the button
  • 2:07:13 21: Why we can’t have two block-level buttons
  • 2:11:42 22: Aside – Flexbox
  • 2:15:25 23: Centering both buttons with flexbox
  • 2:18:20 24: Google clone recap
    Build a Digital Business Card

  • 2:20:27 1: Building your digital business card
  • 2:21:00 2: Fix the image path
  • 2:23:56 3: Add alt attribute
  • 2:28:24 4: Make the image smaller
  • 2:29:40 5: Add a border and padding
  • 2:33:30 6: Aside – flexbox child containers
  • 2:37:11 7: Flex item containers
  • 2:38:51 8: Add a utility class
  • 2:42:04 9: Justify the items
  • 2:44:13 10: Center the card
  • 2:46:13 11: Aside – inheritance
  • 2:50:31 12: Center the text via inheritance
  • 2:53:32 13: Add colors
  • 2:56:57 14: Web-safe fonts
  • 3:02:06 15: Aside – margin/padding shorthand
  • 3:06:09 16: Use the margin & padding shorthands
  • 3:07:26 17: Deploy your Digital Business Card
  • 3:12:16 18: Business Card Recap
    Build a Space Exploration Site

  • 3:14:17 1: Let’s go to space
  • 3:14:54 2: Add a background image from Unsplash
  • 3:18:54 3: Center elements and Style button
  • 3:22:12 4: Add a Google font
  • 3:26:34 5: @font-face
  • 3:28:39 6: Aside – spans
  • 3:32:37 7: Add an underline using a span
  • 3:34:27 8: Use an ID for the logo
  • 3:38:51 9: Replace the jpg with a webp
  • 3:41:25 10: Choose a color palette from an image
  • 3:44:18 11: Add the terms & conditions section
  • 3:48:17 12: Aside – text shadow
  • 3:54:17 13: Improving the readability with text shadows
  • 3:56:17 14: Space – Exploration recap
    Build a Birthday GIFt Site

  • 3:58:02 1: Let’s build a Birthday GIFt site
  • 3:59:13 2: Add basic header styling
  • 4:02:47 3: Set the colors
  • 4:04:13 4: Add shadow on text
  • 4:07:34 5: We have a problem that flexbox can fix
  • 4:10:10 6: Aside – align-items
  • 4:16:13 7: Aside – flex-direction
  • 4:20:42 8: Turn the header into a flexbox
  • 4:22:26 9: Fix date and age design
  • 4:26:36 10: Create the first gift
  • 4:31:56 11: Replace the img with a div
  • 4:36:14 12: Aside – make elements change on hover
  • 4:39:08 13: Add the hover effect
  • 4:41:17 14: Create the next GIFt
  • 4:45:39 15: Create two more GIFts
  • 4:48:15 16: Create the final GIFt
  • 4:51:38 17: Add the footer
  • 4:55:18 18: Add a background gradient
  • 4:58:46 19: Personalize the Birthday GIFt Site
  • 5:00:25 20: Use GitHub Desktop to publish your Birthday GIFt Site
  • 5:05:44 21: Deploying your Birthday GIFt Site
  • 5:06:45 22: Use VS Code to edit your Birthday GIFt
  • 5:11:36 23: GIFt site recap
    Solo Project: Hometown Homepage

  • 5:13:29 1: It’s time to go solo!
  • 5:15:47 2: Solo Project – Hometown Homepage
  • 5:19:54 3: Congrats on completing the course!

Proudly powered by WordPress
Creative Commons License
EricBrooks.Com® is licensed under a Creative Commons License.

Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.



Connect