Categories
Website Design

NEW 2021 | FreeCodeCamp: Applied Accessibility & Responsive Web Design Principles [Video]

NEW 2021 | FreeCodeCamp: Applied Accessibility & Responsive Web Design Principles

The solutions are found in this Github repo. ✅
https://github.com/shimphillip/applied-accessibility-and-responsive-web-design-principles

This are the 4th and 5th courses of the Responsive Web Design module https://www.freecodecamp.org/learn/responsive-web-design/#applied-accessibility
https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-principles

Timecodes
0:00 Intro
0:23 Add a Text Alternative to Images for Visually Impaired Accessibility
1:12 Know When Alt Text Should be Left Blank
1:45 Use Headings to Show Hierarchical Relationships of Content
2:40 Jump Straight to the Content Using the main Element
3:04 Wrap Content in the article Element
3:27 Make Screen Reader Navigation Easier with the header Landmark
3:52 Make Screen Reader Navigation Easier with the nav Landmark
4:15 Make Screen Reader Navigation Easier with the footer Landmark
4:36 Improve Accessibility of Audio Content with the audio Element
5:44 Improve Chart Accessibility with the figure Element
6:26 Improve Form Field Accessibility with the label Element
7:04 Wrap Radio Buttons in a fieldset Element for Better Accessibility
8:03 Add an Accessible Date Picker
8:51 Standardize Times with the HTML5 datetime Attribute
9:39 Make Elements Only Visible to a Screen Reader by using Custom CSS
10:28 Improve Readability with High Contrast Text
11:01 Avoid Colorblindness Issues by Using Sufficient Contrast
11:46 Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
12:17 Give Links Meaning by Using Descriptive Link Text
13:05 Make Links Navigable with HTML Access Keys
13:57 Use tabindex to Add Keyboard Focus to an Element
14:41 Use tabindex to Specify the Order of Keyboard Focus for Several Elements
15:45 Create a Media Query
16:24 Make an Image Responsive
16:55 Use a Retina Image for Higher Resolution Displays
17:29 Make Typography Responsive
18:23 Outro

Watch/Read More
Categories
Website Design

Download This Stunning and Creative HTML Website Template for free today [Video]

11+ Complete website design course in bundle Enroll here - https://www.udemy.com/course/be-a-front-end-website-developer-today-10-projects-included/?couponCode=U-THE-BEST Top animation videos watch these below -------------------- #1- https://youtu.be/icrEhXdVcUw #2-https://youtu.be/i0YOfn2bn_8 #3-https://www.youtube.com/watch?v=Qco4kOjNDno #4-https://www.youtube.com/watch?v=cUe9FUAMH18 #5-https://www.youtube.com/watch?v=1dQJzKUwKCo #6-https://www.youtube.com/watch?v=cOLM2RrVX_4 #7-https://www.youtube.com/watch?v=TkiiGL_YMbA&t #8-https://www.youtube.com/watch?v=RJ0Gz3ApZ4M&t=43s #9-https://www.youtube.com/watch?v=p_gsUxCC_L0 Download this theme - http://www.uplabs.com/posts/foody-latest-html-css-js-responsive-website-template Join our fb group - https://www.facebook.com/groups/328971707545530

Categories
Website Design

Coding a Button Dropdown Menu [Video]

https://bit.ly/39L5LQ0 👈 Learn UI/UX Today. Use "UI2022" for 22% Off! -- Today, we're going to take the button dropdown that we designed in Figma in the previous tutorial (linked below), and make it a working reality in the browser with HTML and CSS only. Part 1 (Design in Figma)l: https://www.youtube.com/watch?v=VjMfSfKflfk 0:00 - Introduction 0:44 - Learn UI/UX Today 1:29 - Preview in Figma 2:23 - Project Setup 3:20 - Writing the HTML 7:18 - Writing the CSS 17:17 - Final Thoughts Let's get started! #frontenddeveloper #html #css - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join 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

CSS Button with Cool Hover animation effect [Video]

11+ Complete website design course in bundle Enroll here - https://www.udemy.com/course/be-a-front-end-website-developer-today-10-projects-included/?couponCode=U-THE-BEST Top animation videos watch these below -------------------- #1- https://youtu.be/icrEhXdVcUw #2-https://youtu.be/i0YOfn2bn_8 #3-https://www.youtube.com/watch?v=Qco4kOjNDno #4-https://www.youtube.com/watch?v=cUe9FUAMH18 #5-https://www.youtube.com/watch?v=1dQJzKUwKCo #6-https://www.youtube.com/watch?v=cOLM2RrVX_4 #7-https://www.youtube.com/watch?v=TkiiGL_YMbA&t #8-https://www.youtube.com/watch?v=RJ0Gz3ApZ4M&t=43s #9-https://www.youtube.com/watch?v=p_gsUxCC_L0 Join our fb group - https://www.facebook.com/groups/328971707545530