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

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: https://youtu.be/jKx2cjy2FRoπŸš€ CharliMarieTV is now powered by Figma! https://bit.ly/figma-charliFigma 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: http://patreon.com/charlimarie-----------------------------------------------// 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: https://insidemarketingdesign.co// SOCIALTwitter: https://twitter.com/charliprangleyInstagram: http://instagram.com/charliprangleyFacebook: http://www.facebook.com/charlimarieTVTwitch: https://www.twitch.tv/charlimarietv-----------------------------------------------// MUSIC & TECHMusic from Epidemic Sound. If you want to try it out, sign up using my link! http://charlimarie.com/epidemicsoundIntro & end card animation by hand lettering animator Austin Saylor: http://www.austinsaylor.com/Editing by Nancy Palm http://nancypalm.com & BelΓ©n Albiol https://www.instagram.com/molen.audiovisual