Website Design

Basic HTML and HTML5: freeCodeCamp Responsive Web Design Certification (Complete Code Walkthrough) [Video]

Basic HTML and HTML5: freeCodeCamp Responsive Web Design Certification (Complete Code Walkthrough)

Coding through all of freeCodeCamp’s Responsive Web Design certification — starting with the Basic HTML and HTML5 module.

Check out freeCodeCamp’s Responsive Web Design certification:

Get free additional cheat sheets, study guides, and resources for freeCodeCamp and all kinds of other things on my website:

00:00:00 Introduction
00:01:19 Introducing the Responsive Web Design Course
00:02:10 Get Familiar with The Editor
00:02:55 Say Hello to HTML Elements
00:04:24 Headline with the h2 Element
00:06:21 Inform with the Paragraph Element
00:08:39 Fill in the Blank with Placeholder Text
00:10:24 Uncomment HTML
00:11:35 Comment out HTML
00:13:37 Delete HTML Elements
00:14:22 Introduction to HTML5 Elements
00:17:56 Add Images to Your Website
00:21:50 Link to External Pages with Anchor Elements
00:24:20 Link to Internal Sections of a Page with Anchor Elements
00:28:32 Nest an Anchor Element within a Paragraph
00:29:44 Tricks for Indenting Your Code
00:31:08 Make Dead Links Using the Hash Symbol
00:32:36 Turn an Image into a Link
00:34:29 Create a Bulleted Unordered List
00:36:40 Create an Ordered List
00:39:00 Explaining the Difference Between Unordered and Ordered Lists
00:39:33 Create a Text Field
00:40:51 Add Placeholder Text to a Text Field
00:42:11 Create a Form Element
00:44:12 Add a Submit Button to a Form
00:45:55 Use HTML5 to Require a Field
00:47:16 Create a Set of Radio Buttons
00:53:22 Create a Set of Checkboxes
00:56:11 Explaining the br Tag
00:56:53 It’s okay to copy and paste!
00:58:38 Use the value attribute with Radio Buttons and Checkboxes
01:03:06 Check Radio Buttons and Checkboxes by Default
01:04:46 Nest Many Elements within a Single div Element
01:07:12 Declare the Doctype of an HTML Document
01:10:44 Define the Head and Body of an HTML Document
01:14:24 Conclusion

Join Bytesized’s Discord server:

Deploy your first serverless function with Cloudflare Workers! Watch my free course to get started:



MIC ACTIVATOR (must-have for above mic)

These are affiliate links – buying any of the gear I use with them will help support the channel. Thanks β™₯️

🐦 Follow me on Twitter

πŸ’› BYTESIZED is a weekly newsletter for developers — join 4,000+ developers who read our email every Tuesday to stay in-the-know. Subscribe for free at!

Watch/Read More
Website Design

Creating GOOD digital product imagery [Video]

Marketing a physical product can be easy, given you can take beautiful flatlays/lifestyle shots... But when you're marketing an app or SAS product, all you have is screenshots. 😐 I spoke to Cory Etzkorn recently, who is a Designer at Notion (and you know I love Notion). He spoke about how Notion prioritise making imagery that looks & feels real. I really loved what he had to say, and wanted to share it here. You can watch the full episode interview here:πŸš€ CharliMarieTV is now powered by Figma! is a design tool that helps teams create, test, and ship better designs from start to finish. And it's free! :)TIMESTAMPS:00:00 An important part of marketing materials 00:36 Hear what Cory has to say 01:46 Who creates all the product imagery? 02:45 Who the imagery is created for 04:11 UI straight from a 'real creator's' account05:02 How do you handle digital product shots? πŸ’¬-----------------------------------------------// ENJOY MY VIDEOS?My videos don't have pre-roll ads because ads are annoying and I don't want you to have to sit through them. If you want to support me and my channel the best thing you can do is join my Patreon! You'll get extra content and ways to learn, like behind-the-scenes process info, downloadable assets and a patron-only podcast! Sign up here: ABOUT MEHello there! I'm Charli and I'm a half-British, half-kiwi web and graphic designer currently living in Valencia and posting design videos about tools, projects, and concepts as well as vlogs of my life as a designer. Please subscribe and say hi in the comments so we can be friends :) -----------------------------------------------// MOREBuy my font: http://charlimarie.storeMy site & blog: https://charlimarie.comDesign Life podcast: http://designlife.fmInside Marketing Design podcast: SOCIALTwitter: MUSIC & TECHMusic from Epidemic Sound. If you want to try it out, sign up using my link! & end card animation by hand lettering animator Austin Saylor: by Nancy Palm & BelΓ©n Albiol