State of CSS in 2022

 The State of CSS 2022 presentation at Google's IO 2022 conference provided an informative overview of  newly supported features in CSS and what is expected to be supported soon. An overview is available at https://web.dev/state-of-css-2022/. 

New 6th Edition of Basics of Web Design: HTML5 & CSS!

 Announcing the new Basics of Web Design: HTML5 & CSS 6th Edition!\

Available at Pearson

CSS Grid Layout Module Level 2 Candidate Recommendation

 CSS Grid Layout Module Level 2 specification is now a Candidate Recommendation. The biggest change is the addition of subgrids to the spec, although at the current time subgrids are only supported by the Firefox browser. https://www.w3.org/TR/css-grid-2/#subgrids

Lazy Loading for Images and Iframes

There is a new attribute in town. It's the loading attribute which can be applied to the img element and the iframe element. This can provide the perception of a quicker loading web page when you set the loading attribute to the value "lazy" on img and iframe elements that are not initially in the browser viewport. The resource is only requested when the web page visitor scrolls near the element. See https://web.dev/native-lazy-loading and https://web.dev/iframe-lazy-loading for more info.

Pausing a GIF with details & summary elements

Cool technique — create the effect of pausing an animated gif using the details and summary elements. See the demo and code at https://css-tricks.com/pause-gif-details-summary/ .

Tiny Helpers -- Free Tools for Web Developers

Checkout Tiny Helpers (https://tiny-helpers.dev/) a collection of free single-purpose online tools for web developers.

State of CSS 2019

Explore the first ever State of CSS survey to find out which CSS features are used the most, which tools are gaining adoption, and more! https://2019.stateofcss.com/

10th Edition of Web Development & Design Foundations with HTML5

The 10th Edition!

A promotion trailer for the 10th edition of Web Development & Design Foundations with HTML5 by Terry Felke-Morris. This book is a great choice for a first course in web design. The approach is hands-on with lots of exercises and case studies that run throughout the book. Topics include: HTML5, CSS, Configure images & multimedia, Responsive Web Design techniques, Accessibility, CSS Flexbox Layout, CSS Grid Layout, Introduction to JavaScript, jQuery, and more!

We are still working on the interactive eText features, but I am very pleased to announce that the 10th edition of my Web Development & Design Foundations with HTML5 book is "available" on the: Pearson website

Also see https://webdevfoundations.net for more information and supporting materials.

Annual State of the Web Report by HTTP Archive

Explore this comprehensive report on the State of the Web at https://almanac.httparchive.org/en/2019/, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content (HTML, CSS, JavaScript), user experience, publishing, and distribution.

Firefox DevTools!

There are some new developer tools in Firefox. New tools include a Flexbox Inspector, Grid Inspector, Shape Path Editor, Fonts, Editor, Changes Panel, Inactive CSS, and Accessibility Panel. Smashing Magazine has a great overview of the new tools. heckout https://developer.mozilla.org/en-US/docs/Tools for Mozilla's documentation. 

10th Edition of Web Development & Design Foundations with HTML5!

New 10th Edition!

The 10th edition of Web Development & Design Foundations is currently in press and should be available Spring 2020.

Building on this textbook’s successful ninth edition, new features for the tenth edition include the following:

• Chapter 7 has been renamed Responsive Page Layout, takes a mobile first approach, and has an expanded focus on new layout systems including CSS Flexible Layout Module (Flexbox) and CSS Grid Layout

• Form layout with the CSS Flexbox and Grid Layout Systems

• Updated coverage of HTML5 elements and attributes

• Updated code samples, case studies, and web resources

• Expanded treatment of page layout design and responsive web design techniques

• Updated reference sections for HTML5 and CSS

• Additional Hands-On Practice exercises

Visit http://webdevfoundations.net for more information about the new book.  

Lazy Loading Images and Iframes with the Google Chrome Browser

Lazy loading is a term that describes delaying the loading of  below-the-fold images until the web page visitor scrolls down the page to them. The major benefits are quicker load times, less bandwidth, and reduced memory usage. Until this announcement by Chrome, developers needed Javascript event handlers create this effect.

The latest version of Chrome browser (Chrome 76) will support native lazy loading, by implementing the new HTML loading attribute for img and iframe elements. 
Values for the loading attribute are:

• auto (default browser loading)
• lazy (defer loading the resource until it reaches a calculated distance from the viewport)
• eager  (load the resource immediately)

Here’s an HTML example of adding lazing loading to the img element:

HTML img element with the loading attribute

Although not yet part of an official W3C HTML5 Recommendation, the loading attribute is in the process of being added to the HTML5 standard and is documented at https://whatpr.org/html/3752/urls-and-fetching.html#lazy-loading-attributes. Keep in mind that at this time only the Chrome browser supports native lazy loading and other browsers will ignore the loading attribute. 

An Event Apart Presentation by Jen Simmons

Check out this excellent presentation by Jen Simmons at An Event Apart: "Everything You Know About Web Design Just Changed"
You will see an  an overview of how layout has changed in stages since the beginning of the Web, as folks got new ideas, implemented them, found issues, and then tried new ideas.... a process we are still going through today... Simmons calls today's era of Grid and Flexbox layout "Intrinsic Web Design" #webdesign #layout #intrinsicwebdesign

10 Skills You Need to Land a Job as a Front-End Developer

The Web Development & Design Foundations with HTML5 and Basics of Web Design: HTML5 & CSS textbooks get you started on the skills you need to become a front-end web developer....

Graphic courtesy of Skillcrush.com

New 5th Edition! Basics of Web Design: HTML5 & CSS

My new book, the 5th edition of Basics of Web Design: HTML 5 & CSS, is available for pre-order at Amazon! As an Amazon Associate I earn from qualifying purchases.

 The 5th Edition features a major change from previous edition. Although classic page layout methods using CSS float are still introduced, there is a new emphasis on Responsive Page Layout utilizing the new CSS Flexible Box Layout (Flexbox) and CSS Grid Layout techniques. The 5th Edition features new content, updated topics, hands-on practice exercises, and case studies.

More info at https://webdevbasics.net

Concise List of New WCAG 2.1 Guidelines

Check out a handy list of the new WCAG 2.1 guidelines along with why they are helpful to website visitors at https://objectpartners.com/2018/08/09/the-whats-and-whys-of-wcag-2-1/

What's New in WCAG 2.1?

WCAG 2.1 extends WCAG 2.0 -- so what's new? There are 17 new Success Criteria items in WCAG 2.1. Twelve of these 17 are level AA -- which is the level that most websites strive to meet. See http://intopia.digital/articles/whats-new-in-wcag-2-1/ for a For a quick overview of what's new  in WCAG 2.1.

WCAG 2.1 is an Official W3C Standard!

WCAG (Web Content Accessibility Guidelines) 2.1 recently reached Recommendation status. WCAG 2.1 extends and expands WCAG 2.0 success criteria.

Here are some helpful resources:

• Understanding WCAG 2.1 
• WCAG 2.1 At a Glance 
• Quick Reference: How to Meet WCAG 2.1

New 9th Edition of Web Development & Design Foundations with HTML5 is available!

Announcing that the new 9th edition of Web Development & Design Foundations with HTML5 is now available for sale at Amazon.com!

 Building on the textbook's successful 8th edition, the 9th edition continues to integrate HTML and CSS topics such as text configuration, color configuration, and page layout with an enhanced focus on the topics of design, accessibility, and Web standards. 

Updates for the 9th edition include: 

• Updated coverage of HTML5 elements and attributes 
• Expanded coverage of responsive web design techniques and CSS media queries 
• Expanded coverage of responsive image techniques including the new HTML5 picture element
• Introduction to new layout techniques -- CSS Grid Layout and CSS Flexbox Layout 
• Updated reference sections for HTML5 and CSS 
• Additional Hands-On Practice exercises 
• Updated Case Studies 
• Updated code samples and web resources 

 For information about this new edition, visit http://webdevfoundations.net.

Newest version of Web Content Accessibility Guidelines (WCAG)!

WCAG 2.1 is now in Candidate Recommendation Status. WCAG 2.1 extends WCAG 2.0 by adding new success criteria and guidelines. Visit https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1 to read about the new features.