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

Typographic Visual Hierarchy in UI Design (4 Examples) [Video] - Become a frontend developer (50% off limited time!)-- Want to learn UI/UX?​​​​​​​​​-- Today, we're going to take an example-based approach to learning and applying the concept of visual hierarchy to typography. We'll look at 4 common typographic-based layouts that you find on websites and web apps, and structure the type so that there's a solid balance based on the type that's most important. 0:00 - Introduction0:58 - An Awesome Offer1:33 - Example 15:29 - Example 211:13 - Example 312:34 - Example 415:22 - Final thoughtsLet's get started!#typography #ui #ux- - - - - - - - - - - - - - - - - - - - - -Subscribe for NEW VIDEOS!Learn UI/UX: https://designcourse.comMy personal FB account: FB:'s Twitter: my Discord!^-Chat with me and others- - - - - - - - - - - - - - - - - - - - - -Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn,, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website to my discord server or add me on social media and say Hi!

Website Design

Full Workshop: Content Strategy & Information Architecture [Video]

This week we released our new course Web Design: Becoming a Professional, and today I want to give you a taste of the quality and depth we go into in the course.So I’m giving you access to a full hour of video on the topic of Content strategy & Information architecture.... and this is just the tip of the iceberg as we have so much more than video content inside the course:- Exercises and practice files- 2 Course projects- Coaches to review your work- Live events- Resources and tools- Monthly challenges- And more!Are you ready to transform your whole career? Join us here: Timelapse:00:00 Introduction: Content Strategy01:19 Content Strategy vs. Information Architecture01:45 What is content strategy02:00 Information architecture02:17 How we do it02:40 First step: Do your prep03:38 Second step: Brainstorm and discuss content, tone, SEO04:33 Third step: Sort and group to pages06:28 Fourth step: How to structure the content08:27 The web structure tool: Site Map09:08 The web structure: The non-fancy way 10:15 Sitemap labeling matter10:40 Types of structure13:16 One page vs multi-page17:20 Common web components17:36 Homepage: purpose and structure20:48 Navigation: purpose and best practices25:00 Global vs Local Navigation27:00 Using breadcrumbs28:00 Do you need a search function?29:10 Hero section 31:40 Testimonials34:00 The logo bar36:00 Pricing table38:20 Product page40:30 Checkout page44:20 Forms45:00 Contact page46:58 Footer48:48 Content development process49:10 Do the heavy lifting for them50:10 Ask for approval50:30 Copywriting tips53:40 Proofread55:07 How I do a site map59:00 Summary-Find me on other social media platforms:Instagram: & Book Recommendations: #freelancer #webdevelopment #business #entrepreneur Thanks for watching the video [Insert Video Title Here]