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

Create this Awesome AI Parallax Effect [Video]

http://bit.ly/3YeXzeU 👈 Learn UI/UX & CSS Today. Use "UI2023" for 23% Off!https://designcourse.com/af 👈 My upcoming "Advanced Frontends" Course-- Today, I'm going to show you exactly how to generate a piece of AI art from midjourney, and then use it on the web for an interactive scrolling parallax effect with the help of GSAP (https://greensock.com). Codepen demo:https://codepen.io/designcourse/pen/rNrbQMd0:00 - Intro0:39 - Cutting out the layers2:45 - Initial HTML & CSS Explanation3:50 - Finishing the CSS8:20 - JavaScript & GSAP16:26 - Final ProjectLet's get started!#ai #parallax #frontenddeveloper - - - - - - - - - - - - - - - - - - - - - -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

25 Responsive web design [Video]

Hi,I am Ugo Guazelli, Online Instructor and founder of Aprenda Training.In this course, you will learn about HTML and CSS, Main HTML tags and attributesMain CSS properties and the usageAt the end of this course, you will be able to take your carrer futher and start to learn Javascript and become a web developer

Categories
Website Design

#webdesign NAV tips to increase site conversions [Video]

#webdesign NAV tips to increase site conversions While there are exceptions (especially on larger sites with more links) it is always a good idea to simplify your sites and decrease overwhelm by placing less links in the navigation of your website. This will help you out more focus on your main CTA and get site visitors to focus on one specific action.