## W3Cx Front-End Web Developer
### W3Cx-3of5-HTML5.1x – Coding Essentials and Best Practices… ## Table of Contents
1. About W3C and the Web
2. Why accessibility is important
3. Why internationalization is important
4. W3C tools
1. Course Introduction and Practical Information
2. Course syllabus
3. Getting around the course
4. Course tools
### Module 1: HTML5 Basics
#### 1.1 Introduction – Module 1: HTML Basics
#### 1.2 From HTML1.0 to HTML5
#### 1.3 Structural element
#### 1.4 Other elements and attributes
#### 1.5 Microdata… ### Module 5: HTML5 Forms
#### 5.1 Introduction – Module 5
#### 5.2 Introduction to HTML5 Forms
#### 5.3 Accessible forms
#### 5.4 New types
#### 5.5 New forms attributes
#### 5.6 New elements related to forms
#### 5.7 Form validation API
#### 5.8 Exercises – Module 5… ## a1. About W3C and the Web
## Course Information
### Welcome to “HTML5 Coding Essentials and Best Practices”
– Course outline (syllabus)
– Course forums
– Course tools
– About W3C and the Web
W3C has designed a
“Front-End Web Developer” (FEWD) Professional Certificate where you learn all of the necessary skills needed to build interactive and responsive user experiences on the Web. This program deepens your knowledge of the 3 foundational languages that power the Web: HTML5, CSS and JavaScript…. The **W3C FEWD** program is composed of 5 courses:
1. CSS Basics
2. 5.0x HTML5 and CSS Fundamentals
3. This course: ***5.1x HTML5 Coding Essentials and Best Practices***
4. 5.2x HTML5 Apps and Games
5. JavaScript Introduction… This course is a natural follow up to the
CSS Basics and HTML5 & CSS Fundamentals courses.
As such, required prerequisites are:
– Be comfortable putting together an HTML document,
– Have minimal familiarity with CSS,
– Basic knowledge of JavaScript and DOM APis is sufficient, and this course
will include a recap of basics. You are also more than welcome to follow the
JavaScript Introduction course (introductory level)…. #### During this course, you will learn:
– Simplified HTML5 tags, and how to use microdata,
– Play with the audio and video tags,
– Use the Webcam,
– Draw and animate fun Web graphics,
– Discover HTML5 form features,
– Test the basic APIs, such as Web storage and geolocation, and
– Practice coding techniques thanks to multiple interactive examples…. #### Web Editors:
While any text editor, like NotePad or TextEdit, can be used to create Web pages, they don’t necessarily offer a lot of help towards that end. Other options offer more facilities for error checking, syntax coloring and saving some typing by filling things out for you.
Here are a few possibilities for Web editors:… #### Browser Compatibility:
The term browser compatibility refers to the ability of a given Web site to
appear fully functional on the browsers available in the market.
The most powerful aspect of the Web is what makes it so challenging to build
for: its universality. When you create a Web site, you’re writing code that
needs to be understood by many different browsers on different devices and operating systems!… ### W3C Validators:
For over 15 years, the W3C has been developing and hosting free and open source tools used every day by millions of Web developers and Web designers.
All the tools listed below are Web-based, and are available as downloadable sources or as free services on the W3C Developers tools site…. #### W3C Validator
The W3C validator checks the markup validity of various Web document formats, such as HTML. Note that you are automatically directed to the Nu Html Checker when validating an HTML5 document.
#### CSS Validator
The CSS validator checks Cascading Style Sheets (CSS) and (X)HTML documents that use CSS stylesheets…. #### Help Build the Web Platform
Most of the technologies you use when developing Web applications and Web sites are designed and standardized in W3C in a completely open and transparent process.
In fact, all W3C specifications are developed in public GitHub repositories, so if you are familiar with GitHub, you already know how to contribute to W3C specifications! This is all about raising issues (with feedback and suggestions) and/or bringing pull requests to fix identified issues…. #### Contribute
Contributing to this standardization process might be a bit scary or hard to approach at first, but understanding at a deeper level how these technologies are built is a great way to build your expertise.
If you’re looking to an easy way to dive into this standardization processes, check out which issues in the W3C GitHub repositories have been marked as “good first issue” and see if you find anything where you think you would be ready to help…. ### a1. What is W3C?
As steward of global Web standards, W3C’s mission is to safeguard the openness,
accessibility, and freedom of the World Wide Web from a technical perspective.
W3C’s primary activity is to develop protocols and guidelines that ensure long-term
growth for the Web. The widely adopted Web standards define key parts of what actually
makes the World Wide Web work…. #### A few figures
As of June 2020, W3C:
– Is a member-driven organization composed of nearly 430 companies, universities, start-ups, etc. from all over the world.
– Holds 44 technical groups, including Working and Interest Groups where technical specifications are discussed and developed.
– Published over 7,181 published technical reports, including 430 Web standards (or W3C Recommendations) – since January 1st,1995…. The web, which is short for World Wide Web, is one of the ways information is shared on the internet (others include email, File Transfer Protocol (FTP), and instant messaging services. The web is composed of billions of connected digital documents that are viewed in a web browser, such as Chrome, Safari, Microsoft Edge, Firefox, and others…. The web consists of digital documents, referred to as web pages, that are
viewable through web browser software on devices like smartphones, tablets, and computers. These pages contain many types of content, including static content like encyclopedia pages, but also dynamic content like eBay sales, stocks, weather, news, and traffic reports…. ### a2. Why Accessibility is Important
*The power of the Web is in its universality.* *Access by everyone regardless of disability is an essential aspect.*… #### Tim Berners-Lee, W3C Director and inventor of the World Wide Web
The Web has become an essential aspect of our daily lives, and everyone
should have access to this technology. Web accessibility focuses on ensuring
equivalent access for people with disabilities. It is increasingly important
to many organizations and governments from around the world, and has many
business benefits. Access to information, including on the Web, is also
recognized by the UN Convention on the Rights of Persons with Disabilities (CRPD)…. #### Who is impacted?
Web accessibility addresses all disabilities, including hearing, learning and
cognitive, neurological, physical, speech, and visual disabilities. Some examples
of Web accessibility features include:
– *Captions* on audio and multimedia content for people who are hard of hearing;
– *Clear and consistent layout* for people with learning and cognitive disabilities;
– *Keyboard support* for people with physical disabilities and who do not use a mouse;
– *Text alternatives* for people with visual disabilities and who are using screen readers;… #### Web accessibility benefits people with and without disabilities
Web accessibility features also benefit many more users, such as:
– People with temporary situational limitations, such as a broken arm;
– People using mobile devices, televisions, and other access channels;
– People using older computers, with low bandwidth, and other limitations;
– People who are new to computers, to the Web, or to your own Web site;
– People who are not fluent in the language of your particular Web site;… The Web is an increasingly important resource in many aspects of life: education,
employment, government, commerce, health care, recreation, and more. When Web pages,
Web technologies, Web tools, or Web applications are badly designed, they can create
barriers that exclude people from using the Web. More information is available in the
W3C Accessibility overview…. ##### Check #1 : There is a title that adequately and briefly describes the content of a page, and it distinguishes the page from other Web pages.
*Example*:
“`
…
…
“`… “`
…
“`… However, there are some issues with this approach:
– id and class names differ from one developer to another, from one country to another, etc,
– Even with the same ids and class names, the css rules may be different,
– JavaScript libraries have become increasingly heavy over the years,
– Web pages have become increasingly heavy over the years!
– These elements can not be handled by the Web browser natively…