Categories
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: https://www.freecodecamp.org/learn/responsive-web-design/

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

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: https://bytesized.xyz/discord

Deploy your first serverless function with Cloudflare Workers! Watch my free Egghead.io course to get started: https://egghead.io/playlists/introduction-to-cloudflare-workers-5aa3?af=a54gwi

MY GEAR!

CAMERA https://geni.us/PAvvcAI
ONE AND DONE LENS https://geni.us/xKKIX
WIDE LENS FOR WALKING AROUND https://geni.us/rczDv
ON CAMERA MIC https://geni.us/ChI0U

THE BEST MIC FOR NARRATION https://geni.us/hT3zR8c
MIC ACTIVATOR (must-have for above mic) https://geni.us/8ABzGzA
USB INTERFACE https://geni.us/z1MZ

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

🐦 Follow me on Twitter https://twitter.com/signalnerve

💛 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 https://bytesized.xyz!

Watch/Read More
Categories
Website Design

Typographic Visual Hierarchy in UI Design (4 Examples) [Video]

https://bit.ly/3i3X3xh - Become a frontend developer (50% off limited time!)-- Want to learn UI/UX? https://designcourse.com​​​​​​​​​-- 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: http://fb.com/logodesignerCoursetro FB: http://fb.com/coursetroCoursetro's Twitter: http://twitter.com/designcoursecomJoin my Discord! https://discord.gg/a27CKAF^-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, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com.Come to my discord server or add me on social media and say Hi!

Categories
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: https://www.flux-academy.com/courses/learn-web-design-become-a-professional- 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: https://www.instagram.com/ransegall/Twitter: http://twitter.com/ransegallLinkedIn: https://www.linkedin.com/in/ran-segall-0b582a33/-Gear & Book Recommendations: http://bit.ly/2ohFOuj#webdesign #freelancer #webdevelopment #business #entrepreneur Thanks for watching the video [Insert Video Title Here]