tag:blogger.com,1999:blog-133046342024-02-28T17:37:10.551-05:00Web Development Foundationstrends in web design and web development Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.comBlogger156125tag:blogger.com,1999:blog-13304634.post-25035141929260890332022-05-18T10:18:00.001-05:002022-05-18T10:18:20.080-05:00State of CSS in 2022<p> 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 <a href="https://web.dev/state-of-css-2022/">https://web.dev/state-of-css-2022/</a>. </p>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-32983649728777499312021-03-04T20:26:00.003-05:002021-03-04T20:26:47.826-05:00New 6th Edition of Basics of Web Design: HTML5 & CSS!<p> Announcing the new Basics of Web Design: HTML5 & CSS 6th Edition!\</p><p><iframe id="vp1Fxc0C" title="Video Player" width="432" height="243" frameborder="0" src="https://s3.amazonaws.com/embed.animoto.com/play.html?w=swf/production/vp1&e=1614907469&f=Fxc0Cmip2OQ1Vkuj7jGf4A&d=0&m=a&r=360p&volume=100&start_res=360p&i=m&asset_domain=s3-p.animoto.com&animoto_domain=animoto.com&options=" allowfullscreen></iframe><br /></p><p>Available at <a href="https://www.pearson.com/store/p/basics-of-web-design-html5-css/P100003053847" target="_blank">Pearson</a></p>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-17705173754642728662020-08-18T12:31:00.003-05:002020-08-18T12:31:21.527-05:00CSS Grid Layout Module Level 2 Candidate Recommendation<p> <span data-offset-key="442uj-0-0" style="background-color: white; color: #14171a; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; font-size: 19px; white-space: pre-wrap;"><span data-text="true">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. </span></span><span data-offset-key="442uj-6-0" style="background-color: white; color: #14171a; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; font-size: 19px; white-space: pre-wrap;"><span data-text="true"> </span></span><span style="background-color: white; color: #1b95e0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif; font-size: 19px; white-space: pre-wrap;"><span data-offset-key="442uj-7-0"><span data-text="true">https://www.w3.org/TR/css-grid-2/#subgrids</span></span></span></p>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-74461178659301821962020-08-02T12:49:00.003-05:002020-08-02T12:51:07.883-05:00Lazy Loading for Images and IframesThere 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 <a href="https://web.dev/native-lazy-loading/">https://web.dev/native-lazy-loading</a> and <a href="https://web.dev/iframe-lazy-loading">https://web.dev/iframe-lazy-loading</a> for more info.Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-64256221442064714482020-08-02T12:46:00.001-05:002020-08-02T12:46:04.822-05:00Pausing a GIF with details & summary elements<span style="background-color: white; color: #1c1e21; font-family: "helvetica" , "arial" , sans-serif; font-size: 14px;">Cool technique — create the effect of pausing an animated gif using the details and summary elements. See the demo and code at </span><a href="https://css-tricks.com/pause-gif-details-summary/">https://css-tricks.com/pause-gif-details-summary/</a> .Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-12051079833377017182020-02-03T14:58:00.003-05:002020-02-03T14:58:16.034-05:00Tiny Helpers -- Free Tools for Web DevelopersCheckout Tiny Helpers (<a href="https://tiny-helpers.dev/)">https://tiny-helpers.dev/</a>) a collection of free single-purpose online tools for web developers.Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-84771726687044421392020-01-15T09:44:00.002-05:002020-01-15T09:44:30.341-05:00State of CSS 2019Explore the first ever State of CSS survey to find out which CSS features are used the most, which tools are gaining adoption, and more! <a href="https://2019.stateofcss.com/">https://2019.stateofcss.com/</a>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-55141328951952310602020-01-09T19:07:00.003-05:002020-01-11T20:38:53.784-05:0010th Edition of Web Development & Design Foundations with HTML5 <h2>The 10th Edition!</h2>
<iframe id="vp1RrLeL" title="Video Player" width="432" height="243" frameborder="0" src="https://s3.amazonaws.com/embed.animoto.com/play.html?w=swf/production/vp1&e=1578791830&f=RrLeLMFISoH0Py9mDTKUUg&d=0&m=a&r=360p&volume=100&start_res=360p&i=m&asset_domain=s3-p.animoto.com&animoto_domain=animoto.com&options=" allowfullscreen></iframe>
<p>
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!</p>
<p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNBTQ22Ac1x1fyWjuTvBZuzKyqpl7YdmcW3S20CIOE9Fs9gV_a-HP3Iy5B_IrRzm4Fw-j7m_2Rn7dvs914y-LDtz1W6UfNdw9CmGzXTJ9M1dG5m7InDkPq4RQXx72KuIu2H1ZtQ/s1600/10CoverTiny.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="411" data-original-width="330" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNBTQ22Ac1x1fyWjuTvBZuzKyqpl7YdmcW3S20CIOE9Fs9gV_a-HP3Iy5B_IrRzm4Fw-j7m_2Rn7dvs914y-LDtz1W6UfNdw9CmGzXTJ9M1dG5m7InDkPq4RQXx72KuIu2H1ZtQ/s200/10CoverTiny.jpg" width="160" /></a>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: <a href="https://t.co/haCGHoN2LZ?amp=1" rel=" noopener noreferrer" role="link" target="_blank" title="https://tinyurl.com/wdf10">Pearson website</a> <br />
<br />
Also see <a href="https://webdevfoundations.net/">https://webdevfoundations.net</a> for more information and supporting materials.<br />
<br />
</p>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-72674593502484907252019-11-14T10:45:00.002-05:002019-11-14T10:46:29.494-05:00Annual State of the Web Report by HTTP ArchiveExplore this comprehensive report on the State of the Web at <a href="https://almanac.httparchive.org/en/2019">https://almanac.httparchive.org/en/2019</a>/, 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.<br />
<div>
<br /></div>
Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-89650390708546121052019-10-11T08:28:00.002-05:002019-10-11T08:28:26.804-05:00Firefox 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. <a href="https://www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/">Smashing Magazine</a> has a great overview of the new tools. heckout <a href="https://developer.mozilla.org/en-US/docs/Tools">https://developer.mozilla.org/en-US/docs/Tools</a> for Mozilla's documentation. Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-87549310004752714282019-10-03T09:23:00.000-05:002019-10-03T09:23:48.985-05:0010th Edition of Web Development & Design Foundations with HTML5!<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrfZJfAXl_WBlxsQjB7aYtV_4lPWpqQURlxR9L4x_It3WfAmNuyfghtrf7yP_j2Qih8BXIaLrgHRmzeSRt35JRIpD85EUYVK0aJGeK7vX9bxm2texjvW6_BoeDxZw-8mboP9BiXg/s1600/10CoverSmaller.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" data-original-height="822" data-original-width="661" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrfZJfAXl_WBlxsQjB7aYtV_4lPWpqQURlxR9L4x_It3WfAmNuyfghtrf7yP_j2Qih8BXIaLrgHRmzeSRt35JRIpD85EUYVK0aJGeK7vX9bxm2texjvW6_BoeDxZw-8mboP9BiXg/s200/10CoverSmaller.jpg" width="160" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">New 10th Edition!</td></tr>
</tbody></table>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px;">
The 10th edition of Web Development & Design Foundations is currently in press and should be available Spring 2020.<br /></div>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;">
Building on this textbook’s successful ninth edition, new features for the tenth edition include the following:</div>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;">
• 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</div>
<div style="background-color: white; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;">
• Form layout with the CSS Flexbox and Grid Layout Systems</div>
<div class="text_exposed_show" style="background-color: white; color: #1c1e21; display: inline; font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
<div style="font-family: inherit; margin-bottom: 6px;">
• Updated coverage of HTML5 elements and attributes</div>
<div style="font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
• Updated code samples, case studies, and web resources</div>
<div style="font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
• Expanded treatment of page layout design and responsive web design techniques</div>
<div style="font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
<span style="font-family: inherit;">• Updated reference sections for HTML5 and CSS</span></div>
<div style="font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
• Additional Hands-On Practice exercises</div>
<div style="font-family: inherit; margin-bottom: 6px; margin-top: 6px;">
Visit <a href="http://webdevfoundations.net/">http://webdevfoundations.net</a> for more information about the new book. </div>
</div>
Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-71948742811957338572019-08-14T16:24:00.000-05:002019-08-14T19:57:07.527-05:00Lazy Loading Images and Iframes with the Google Chrome Browser<span style="font-family: "arial" , "helvetica" , sans-serif;">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.</span><br />
<a href="https://www.blogger.com/blogger.g?rinli=1&pli=1&blogID=13304634" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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. </span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Values for the loading attribute are:</span><br />
<ul>
<a href="https://www.blogger.com/blogger.g?rinli=1&pli=1&blogID=13304634" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a>
<li><span style="font-family: "georgia" , "times new roman" , serif;">auto</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">(default browser loading)</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">lazy</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">(defer loading the resource until it reaches a calculated distance from the viewport)</span></li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">eager</span> <span style="font-family: "arial" , "helvetica" , sans-serif;">(load the resource immediately)</span></li>
</ul>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Here’s an HTML example of adding lazing loading to the img element:</span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="border: 1px solid #000; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEislMG0LyF5fLZ9-aFhQNX0-uy5qU4A8gwEOHYHNPEEnU8Ni4XA3D73DIHihcFFX46jQEvluiDBGOKuw55Sm6MsN8suy5lPrk6dlpZR9ao2z9mrLhC8AGl_Q4nf7hXouAVj266uXA/s1600/code.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="HTML img ellement with loading="lazy" attribute" border="0" data-original-height="152" data-original-width="1027" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEislMG0LyF5fLZ9-aFhQNX0-uy5qU4A8gwEOHYHNPEEnU8Ni4XA3D73DIHihcFFX46jQEvluiDBGOKuw55Sm6MsN8suy5lPrk6dlpZR9ao2z9mrLhC8AGl_Q4nf7hXouAVj266uXA/s400/code.gif" title="" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">HTML img element with the loading attribute</td></tr>
</tbody></table>
<span style="font-family: "arial" , "helvetica" , sans-serif;">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 <a href="https://whatpr.org/html/3752/urls-and-fetching.html#lazy-loading-attributes">https://whatpr.org/html/3752/urls-and-fetching.html#lazy-loading-attributes</a>. Keep in mind that at this time only the Chrome browser supports native lazy loading and other browsers will ignore the loading attribute. </span>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-81192149780851294302019-04-22T10:10:00.000-05:002019-04-22T11:39:58.518-05:00An Event Apart Presentation by Jen SimmonsCheck out this excellent presentation by Jen Simmons at An Event Apart: "<a href="https://vimeo.com/316326187" target="_blank">Everything You Know About Web Design Just Changed</a>"<br />
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 Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-52633983817668441022019-01-31T11:07:00.002-05:002019-01-31T11:07:25.810-05:0010 Skills You Need to Land a Job as a Front-End DeveloperThe 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....
<p><a href="https://skillcrush.com/2017/03/20/front-end-developer-skills/"><img src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2017/03/FrontEndDev_Infographic.jpg" alt="10 Skills Every Front End Developer Needs" width="100%" border="0" /></a></p><br /><br /><br /><br />
<p>Graphic courtesy of <a href="https://skillcrush.com/2017/03/20/front-end-developer-skills/">Skillcrush.com</a></p>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-38392445599539299242019-01-05T11:43:00.002-05:002019-10-19T08:32:41.896-05:00New 5th Edition! Basics of Web Design: HTML5 & CSS<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTIaNWgpAb_wmn6iG_J4EZDMhCWE9tLaZR9ryAe5zu5FtNGBhZfQvQ_tX9vv9z-cwiuSlwrhWx2f5Dn81R21duCh_ABy8-X4TuLXqGTNInWrX63YD8lLUAvjYssod8B8GMw7c8DA/s1600/5eBasicsCoverLargest.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="1364" data-original-width="1090" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTIaNWgpAb_wmn6iG_J4EZDMhCWE9tLaZR9ryAe5zu5FtNGBhZfQvQ_tX9vv9z-cwiuSlwrhWx2f5Dn81R21duCh_ABy8-X4TuLXqGTNInWrX63YD8lLUAvjYssod8B8GMw7c8DA/s200/5eBasicsCoverLargest.jpg" width="159" /></a></div>
My new book, the 5th edition of Basics of Web Design: HTML 5 & CSS, is available for pre-order at <a href="https://amzn.to/2SD6pkS">Amazon</a>! As an Amazon Associate I earn from qualifying purchases.<br />
<br />
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.<br />
<br />
More info at <a href="https://webdevbasics.net/">https://webdevbasics.net</a>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-30144664734667268912018-08-16T10:58:00.001-05:002018-08-16T10:58:34.849-05:00Concise List of New WCAG 2.1 GuidelinesCheck out a handy list of the new WCAG 2.1 guidelines along with why they are helpful to website visitors at <a href="https://objectpartners.com/2018/08/09/the-whats-and-whys-of-wcag-2-1/">https://objectpartners.com/2018/08/09/the-whats-and-whys-of-wcag-2-1/</a>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-66498208220580560552018-06-20T07:08:00.001-05:002018-06-20T07:08:18.820-05:00What'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 <a href="http://intopia.digital/articles/whats-new-in-wcag-2-1/">http://intopia.digital/articles/whats-new-in-wcag-2-1/</a> for a For a quick overview of what's new in WCAG 2.1.Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-45469115422757530572018-06-11T16:02:00.000-05:002018-06-11T16:02:06.646-05:00WCAG 2.1 is an Official W3C Standard!WCAG (Web Content Accessibility Guidelines) 2.1 recently reached Recommendation status. <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> extends and expands WCAG 2.0 success criteria.<br />
<br />
Here are some helpful resources:<br />
<br />
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/">Understanding WCAG 2.1</a> </li>
<li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/glance/">WCAG 2.1 At a Glance</a> </li>
<li><a href="https://www.w3.org/WAI/WCAG21/quickref/">Quick Reference: How to Meet WCAG 2.1</a></li>
</ul>
Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-18297132919147146862018-02-24T13:40:00.004-05:002018-02-24T13:43:21.151-05:00New 9th Edition of Web Development & Design Foundations with HTML5 is available!<iframe width="560" height="315" src="https://www.youtube.com/embed/4lQ4MvB-z7U?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Announcing that the new 9th edition of Web Development & Design Foundations with HTML5 is now available for sale at <a href="https://www.amazon.com/gp/product/0134801148/ref=as_li_tl?ie=UTF8&tag=webdevfoundat-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=0134801148&linkId=0e73c7307b792573d6752e5f7d1f484c">Amazon.com</a>!</span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> 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. </span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Updates for the 9th edition include: </span><br />
<br />
<ul>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Updated coverage of HTML5 elements and attributes </span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Expanded coverage of responsive web design techniques and CSS media queries </span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Expanded coverage of responsive image techniques including the new HTML5 picture element</span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Introduction to new layout techniques -- CSS Grid Layout and CSS Flexbox Layout </span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Updated reference sections for HTML5 and CSS </span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Additional Hands-On Practice exercises </span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Updated Case Studies </span></li>
<li><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Updated code samples and web resources </span></li>
</ul>
<br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"> For information about this new edition, visit <a href="http://webdevfoundations.net/">http://webdevfoundations.net</a>. </span>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-70814681231407547012018-01-30T19:07:00.002-05:002018-01-30T23:03:04.291-05:00Newest version of Web Content Accessibility Guidelines (WCAG)!<div class="_1mf _1mj" data-offset-key="7fjru-0-0" style="direction: ltr; font-family: inherit; position: relative;">
<span style="font-family: inherit;">WCAG 2.1 is now in Candidate Recommendation Status. WCAG 2.1 extends WCAG 2.0 by adding new success criteria and guidelines. Visit <a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1</a> to read about the new features.</span></div>
Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-74110426971860449772017-08-26T07:52:00.003-05:002017-08-26T07:53:22.563-05:00Basics of Web Design 4th Edition Available at VitalSource<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibIPCofEngoNyeydIR5B16JxvDMqXu47oiwnXXEVGhkPXJGEWXjtanQUSE74ueTI6VA2qxHDuzc7Kaz3qZXjC6aK_v_OnkC1i2gxEcFq1nrok-fAYzpF2jgZdmo50P8x7jeOgzgg/s1600/4ecoversmall.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="232" data-original-width="185" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibIPCofEngoNyeydIR5B16JxvDMqXu47oiwnXXEVGhkPXJGEWXjtanQUSE74ueTI6VA2qxHDuzc7Kaz3qZXjC6aK_v_OnkC1i2gxEcFq1nrok-fAYzpF2jgZdmo50P8x7jeOgzgg/s200/4ecoversmall.jpg" width="159" /></a><span style="font-size: large;">
The 4th edition of Basics of Web Design: HTML5 & CSS3 is available at VitalSource: <a href="https://www.vitalsource.com/products/basics-of-web-design-terry-felke-morris-v9780134444413">https://www.vitalsource.com/products/basics-of-web-design-terry-felke-morris-v9780134444413</a></span>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-48518707845778499022017-08-21T22:07:00.001-05:002017-08-21T22:09:48.386-05:00Basics of Web Design 4th Edition Available on Chegg!<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-AAGgMH3v_2_vAA1UZXdkKwMe5DMYiTFcsoGl_2WV2id2CcDXQF5iIm3nSDW42HJnS4fwGeSuwNL1U69Y5vRIFLrk7NHrT7eCVO2hSndeY1Xt6sUvnkHdiZFabPmGfF74BhZVCA/s1600/4ecoversmall.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="232" data-original-width="185" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-AAGgMH3v_2_vAA1UZXdkKwMe5DMYiTFcsoGl_2WV2id2CcDXQF5iIm3nSDW42HJnS4fwGeSuwNL1U69Y5vRIFLrk7NHrT7eCVO2hSndeY1Xt6sUvnkHdiZFabPmGfF74BhZVCA/s200/4ecoversmall.jpg" width="159" /></a><span style="font-size: large;">Announcing that the 4th edition of Basics of Web Design: HTML5 & CSS3 is available for rental on <a href="http://www.chegg.com/textbooks/basics-of-web-design-4th-edition-9780134444338-0134444337">Chegg.com</a>. </span><br />
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">This edition is part of a Pearson Publishing pilot program intended to save students money by providing <a href="https://www.pearson.com/corporate/news/media/news-announcements/2017/01/pearson-lowers-price-of-e-book-rentals--adds-pilot-print-rental-.html">lower-cost book rentals</a>. </span>Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-31718315399287958812017-07-27T07:40:00.003-05:002017-07-27T07:40:45.751-05:00Adobe Announces End of Flash after 2020<a href="https://blogs.adobe.com/conversations/2017/07/adobe-flash-update.html">Adobe</a> recently announced that the Flash Player will no longer be developed and distributed after 2020.
When Flash was developed in the early days of the Web, the application offered a method to provide interactive, animated, multimedia content that was not possible with HTML and JavaScript. Over the years, technologies including HTML5 Video, HTML5 Audio, HTML Canvas, SVG, and robust JavaScript interfaces have been developed and have elminated the need for Flash.
There is a lot of legacy Flash content that could be lost forever when the Flash Player is no longer supported. There is a <a href="http://gizmodo.com/adobe-flash-fans-want-a-chance-to-fix-its-one-million-b-1797284544">petition</a> to open source the Flash Player to keep this legacy content available. Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-20989045511793486522017-07-20T11:51:00.002-05:002017-07-20T11:51:19.164-05:00Thimble -- A Free Online Code Editor<a href="https://thimble.mozilla.org/en-US/">Thimble</a> is a free online code editor supported by the <a href="http://mozilla.org">Mozilla Foundation</a>. After you sign up you can create multi-file projects -- including HTML, CSS, JavaScript, and ming files. There is an instant preview feature. When you are ready, you can publish your work to the Web and Thimble provides you with the URL. Thimble is an extremely useful tool for educators and students. Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0tag:blogger.com,1999:blog-13304634.post-76365021809121750322017-03-23T11:07:00.004-05:002017-03-23T11:10:37.178-05:00WCAG 2.1 Working Draft AvailableMobile devices were in their infancy back when the WCAG 2.0 guidelines were developed. The W3C has just released a first draft of a long-awaited update: WCAG 2.1 for public comment. The purpose of WCAG 2.1 is to extend WCAG 2.0 and introduce additional success criteria including mobile device accessibility, low vision accessibility, and cognitive and learning disability accessibility. WCAG 2.1 supports all WCAG 2.0 accessibility success criteria. So, if a web page meets WCAG 2.1 success criteria, the page also meets WCAG 2.0 success criteria.
The W3C invites you to read the working draft of <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> and submit <a href="https://github.com/w3c/wcag21/issues/new">feedback</a>. Terry Ann Morrishttp://www.blogger.com/profile/11987717906099196146noreply@blogger.com0