mas web resources
Web Resources
- Unclassified resources
- Accessibility
- Cookies
- CSS
- Developer tools
- Fonts and typography
- HTML
- Image Compression
- Information collections and training courses
- Performance
- Responsive email
- Responsive Images
- Responsive Web Design
- Sass: Syntactically Awesome Style Sheets
- Scalable Vector Graphics (SVG)
- Search optimisation
- Security
- Semantic web
- Servers
- Service Workers
- Spam prevention
- URL shortening services
- Validation and testing
- Video
- Viewport
- Workflow
Unclassified resources
- A List Apart by Jeffrey Zeldman.
- Can I Use …? Which CSS, HTML and other front-end web technologies are supported by which browsers, with estimates of usage.
- Centmin Mod Community.
- Church Marketing Sucks.
- CodePen code snippet workspace.
- CodePen Pro subscribers can have unlimited themes. This allows, for example, large font embedded pens.
- Dan Cederholm at simplebits.com.
- Web Designer’s Toolbox including Lorem Ipsum generator and HTML special character list.
- Heal Your Church Web Site.
- Hero header building.
- HTML Dog HTML and CSS reference.
- HTTP Compression comparisons from 2014, on the MSDN blog.
- Minimal web design examples.
- httpster.com samples of leading site design.
- The Plain English Campaign has free guides with one on web sites.
- Pull-quotes with HTML5 and CSS, a helpful approach from Maykel Loomans.
- schema.org, Google-supported web metadata.
- Schema.org: Evolution of Structured Data on the Web. Big data makes common schemas even more necessary. A paper published in ACM Queue, Volume 13, issue 9, by R V Guha and Dan Brickley of Google, and Steve Macbeth of Microsoft.
- sitemaps.org, Google-supported XML sitemap schema.
- Structured data introduction by Yauhen Khutarniuk in July 2018.
- UK Government styles, components and patterns.
- USDS Playbook. US Government Digital Services playbook for the delivery of working digital services on time and on budget.
- US Government Web Design standards reached version 1.0.0 in .
- Website style guide resources.
- The Web Ahead podcasts with Jen Simmons.
- Web Evangelism.
Cookies
- Google’s Cookie Choices provides code samples for developers needing to obtain cookie consent from users.
CSS
W3C maintains an index of all CSS terms [this is a link to the editor’s draft].
- 11 CSS Learning tools, collected by Louis Lazaris.
- @font-face, a 2011 article by Ralf Hermann introduces web fonts.
- @font-face and performance, 2009 article by Steve Souders.
- Aligning inline images by Russ Weakley.
- Box alignment cheatsheet by Rachel Andrew.
- Breakpoint selection or The 100% correct way to do CSS breakpoints by David Gilbertson, .
- Building your colour palette from Refactoring UI.
- Center in CSS: a web site dedicated to the code for this.
- Clearfix or the various ways of clearing floats, from by Nick Salloum.
- Colours used by the top 10 web sites in by Paul-Hebert. Includes examples of the use of and conversion between different colour specification models.
- CSS errors and their resolution: a blog post by Mariano Miguel.
- CSS Gotchas, an essay by Isaac Lyman.
- CSS Guidelines, a CSS Style Guide by Harry Roberts.
- CSS Level 2 Revision 2 (CSS 2.2) Specification, W3C Editors’ Draft. Appendix I provides a useful index to CSS terms.
- CSS-only examples by Phạm Ngọc Quang Nam of design elements that often use JavaScript.
- CSS properties list from W3C documents. A similar list is maintained by Meiert.
- CSS pseudo-classes and pseudo-elements, Smashing Magazine article by Richard Zea, . Tiffany Brown wrote an article on CSS selectors: pseudo elements for Sitepoint in January 2017.
- CSS reference visual summary at cssreference.io.
- CSS resets no longer needed?, argued by Jens Oliver Meiert.
- CSS Shapes Editor for Chrome by Razvan Caliman.
- CSS Style Guide by Hugo Giraudel on sitepoint.com.
- CSS support in modern mail clients by Campaign Monitor.
- CSS Triggers, whether a given CSS change triggers layout, paint, or composition.
- CSS Troubleshooting by Hugo Giraudel on Codrops, .
- CSS Values, look up a CSS property and view the possible values; by Louis Lazaris.
- CSS Zen Garden.
- Cubic bezier animations useful for keyframe animation design.
- Display property summary by Chen Hui Jing on .
- Flexbox and Grid
A good place to start is the MDN guides to Flexbox by Rachel Andrew.
- Building Mega Menus with Flexbox by Kalpesh Singh, July 2017.
- Building Production-Ready CSS Grid Layouts Today by Morten Rand-Hendriksen, June 2017.
- CSS Grid fall-backs and overrides and the Grid by Example website by Rachel Andrew.
- CSS Grid, Flexbox and Box Alignment: Our New System For Web Layout by Rachel Andrew, . Rachel has also published a summary of CSS Grid resources in .
- CSS Grid Layout: a cornucopia of options tutorial by Jeremy Osborn at Gymnasium on Medium.
- Flexbox: complete guide by Chris Coyier complete and kept up-to-date.
- flexbox explained with animated coloured blocks by Scott Domes.
- Flexbox Froggy, a game where you practise using flexbox by writing CSS to help Froggy and friends.
- Flexbox. training course by Wes Bos
- Flexbox Grid: a grid system based on
flex. - Flexbox patterns by C J Cenizlal.
- Flexbox: Justifying Text and Using Flexbox a sitepoint A to Z CSS Quick Tip.
- Understanding Flexbox by Ohans Emmanuel in , also by the same author The Ultimate Guide to Flexbox – Learning Through Examples from .
- fr unit and flexbox introduction by Robin Rendle, June 2017.
- Ultimate Guide to Flexbox – Learning Through Examples by Ohan Emmanuel, September 2017.
- Using CSS Flexible Boxes from MDN.
- W3C Candidate Recommendation for CSS Flexbox Level 1.
- Friendly introduction to Flexbox by Christian Krammer, July 2017.
- Grid
- Fundamentals of Grid by Chris Wright, .
- Learn CSS Grid site.
- Practical CSS Grid: Adding Grid to an Existing Design by Eric Meyer .
- Full Width Containers in Limited Width Parents by Chris Coyier .
- Inheritance and cascade article by Heydon Pickering in Smashing Magazine, .
- Loading CSS in the body rather than the head, an interesting blog article by Jake Archibald, published .
- Multiple classes within selectors by Russ Weakley.
- Scalable and Modular Architecture for CSS.
- Shorthand Syntax Considered an Anti-Pattern a helpful reminder by Harry of CSS Wizardry that CSS shorthand syntax can unset other properties that we did not intend to modify. Includes suggested searches to find these in your own code. From .
- Tufte CSS, based on the Tufte-LaTeX.
- Writing CSS and Sass that doesn’t suck by Ashley Nolan.
- You might not need JavaScript by Una Kravets shows how modern CSS can remove the need for JavaScript for features such as an image slider or a lightbox.
- rem units a Sitepoint article by Adrian Sandu from entitled Understanding and Using rem Units in CSS gives several examples and approaches.
- z-index.
Web developer tools
- How to use Chrome developer tools, a collection of shortcuts and ideas by Ibrahim Nergiz from .
- Material design by Google at material.io. The home for material design resources including a colour tool, a resizing tool, guidelines, components and icons.
- Material design palette: Materielette by Mike Schulz.
- Paul Irish on web tools. YouTube video from Chrome Dev Summit .
- W3C Developers' Avenus is a single page with links to W3C developer tools, learning resources (W3DevCampus and W3Cx courses), open web testing platforms and web standards groups.
Fonts and Typography
- Art of Mixing Typefaces, a webmag.co article.
- Balancing Line Length and Font Size in RWD by Laura Franz, .
- CSS Length Units You Can Use for Font Size.
- The New Bulletproof @Font-Face Syntax, a fontspring blog article.
- Better web typography for a better web, a free. emailed training course by Matej Latin. Part of this, the equilateral triangle of a perfect paragraph is available on CSS-Tricks. Matej also maintains a web typography resources page.
- CSS Fonts Module Level 3.
- CSS Locks, proposed by Tim Brown, head of typography for Adobe Typekit and Adobe Type, adjusts line height for responsive typography. Jake Giltsoff provides an interactive prototype.
- Edward Tufte ET book font on GitHub.
- everythingfonts.com includes font converters such as TTF to WOFF2 and WOFF to WOFF2.
- Fluid Typography by Chris Coyier, .
- Fluid typography to match font sizes and line lengths to screen geometry. A Smashing Magazine article by Michael Riethmuller from .
- Fonts and colours used by social media in June 2017.
- IDEO font map shows form relationships between Google fonts.
- Numerals in web typography, an article in alistapart by Richard Rutter, October 2017.
- Responsive Typography Precise Control by Mike Riethmullerm in .
- Fontello icon font sub-setting and compression. There is a Sitepoint article on using Fontello.
- fontfamily.io compatibility tables for default local fonts.
- Font loading strategies compared by Zach Leatherman, published .
- Font samples from W3C showing how the browser displays the most commonly requested inbuilt fonts, styles, weights and effects.
- FontsInUse independent archive of typography that indexes fonts used on many sites and in many publications.
- Font style matcher by Monica Dinculescu gives a visual indication of the effect of FOUC between two fonts.
- Google fonts provides over 700 free-to-use fonts to download or to have provided from Google’s servers. The Font combination recommendations at canva.com for some of the Google fonts. https://femmebot.github.io/google-type/ provides examples of the use of a range of the fonts. There is a helpful Google developer article on webfont optimisation.
- Icon Fonts, a sitepoint.com article.
- Lazy loading web fonts in the article “Web fonts, boy, I don't know” by Monica Dinculescu from November 2016.
- Modular scale calculator by Scott Kellum and Tim Brown gives visual results and SaSS coding. The Sass coding source is available on GitHub.
- Opentype font feature demo using CSS.
- The Rich (Typefaces) Get Richer an article on A List Apart by Jeremiah Shoaf on considers typeface range, availability and selection.
- Roboto, Google’s default font for Android, is open-source and licensed under the Apache License Version 2.0.
- Technical Web Typography Guidelines by Harry Roberts. From March 2011 but a useful introduction.
- Typeconnection uses a game interface to teach font matching principles.
- Typekit Practice, a collection of typography resources and Adobe Typekit blog.
- Type terms illustrates terms relating to typography.
- Unicode character usage sitepoint quick tip.
- Unicode Range and @font-face sitepoint screencast and transcript.
- Webfont load performance on Adam Beres-Deak's blog, .
- Webfont performance How Changing WebFonts Made Rubygems.org 10x Faster by Nate Berkopec. Why Google webfonts are fast and tips for making them even faster.
HTML
- 2016 review by CSS-Tricks of HTML/SVG best practice usage from .
- Elements of HTML, an unofficial W3C list of HTML and XHTML elements; Elements of HTML github repository.
- Fig and figcaption elements, an article by Georgie Luhur, .
- HTML Landscape W3C paper on the differences between the main HTML5 specifications.
- HTML5 Doctor, helping you implement HTML5 today.
- W3C all standards and drafts.
- Latest HTML Editor’s Draft on GitHub. Version 5.2 from July 2016.
- Official HTML5.1 Recommendation on w3.org. HTML5.1 is a W3C recommendation since . The article Welcome to HTML 5.2! by Annarita Tranfici on summarises changes between versions 5, 5.1 and 5.2.
- Lesser known HTML5
tags such as
<mark> <small> <q> <blockquote> <ins> <del> <s> <optgroup> <datalist>by Simon Codrington, published by Sitepoint on . What’s new in HTML5.1 is a more recent article on Sitepoint by Pavels Jelisejevs from . - WHATWG HTML5 specification and
- WHATWG HTML5 specification repository on GitHub.
Sass
- Intro to Sass by Jorie Clark on CodePen.
- Sass reference by Sitepoint.
Responsive email
- Foundation for Emails 2 by Zurb is a template system for responsive email.
- Google support for CSS in gmail from .
- Introduction to building and sending HTML email by Lee Munroe on Smashing Magazine, .
- Responsive email design by Lee Munroe.
- Slinky on CodePen is Zurb Slinky, Inky on CodePen, to generate emails.
Search Optimisation (SEO)
- Dareboost tests individual pages for performance and SEO issues. A subscription service with a free tier.
- Google Adwords includes the Google AdWords Keyword Planner has essential guidance on keyword selection even if you are not planning a pay-per-click campaign. The interface to this changed in 2018, see this Jeffalytics guide for details.
- Google Analytics includes Google Tag Manager. Google offers certification an analytics certification examination. I was Google Analytics Certified until May 2018. This article by Benjamin Mangold gives an outline of the requirements and a few practice questions. In October 2016 Google announced changes to their analytics desktop UI.
- Google Trends has current and historic data on search trends but also on individual and grouped keywords together with common queries and regions where the keywords are used.
- Google Webmasters has links to Search Console, Webmaster Academy and Google Search Console help including Google Webmaster Guidelines. Google announced that future indexing will be of mobile pages on .
- How to get your site indexed by Google, a Sitepoint article by Sam Gooch of WooRank, dateline . An overview of steps for improving search ranking but includes details such as the correct format of the XML sitemap.
- Increasing website traffic is not limited to SEO and this page from SumoMe gives a list of considerations to bring more visitors to a site.
- Local SEO tips by Christine Maisel.
- Latent Semantic Indexing (LSI) is a copy-writing technique. In addition to using the keyword and some synonyms, LSI proposes including some words or phrases that relate to the keyword and that are found in other high-ranking pages for that keyword. LSIGraph.com offers suggestions for these.
- Link-building myths from Link-Assistant.com updates the old beliefs about this to 2018 realities.
- OnCrawl offers a paid on-page crawl and reporting service but has generally useful blog posts.
- On-page SEO checklist for the optimized page at Sitepoint.
- Open Site Explorer is a free research tool from Moz that provides the inbound linking profile for a specified URL. Limited to three checks a day by default. The Moz toolbar provides some link stats for each page visited and search engine customisation.
- SEO bootcamp for beginners by Greg Snow-Wasserman, .
- Technical SEO checklist for developers by Sam Gooch, [published at Sitepoint, .
- varvy.com by Patrick Sexton provides free services to report on web page SEO, mobile SEO and web page speed optimisation.
- textmetrics provides SEO aids and analysis for writing web content.
The semantic web
As the web has developed the importance of semantic significance has increased, It aids user understanding but also allows meaning to be extracted by processes. HTML5 provides new tags to better structure the page and there are a variety of semantic mark-up schemes to augment this.
- ARIA is discussed under accessibility.
- Microdata using schema.org
- Email markup advice by Google using schema.org.
- Google structured data testing tool
- schema.org sponsored by Google, Microsoft, Yahoo and Yandex. The vocabularies are developed by an open community process,
- Structured data guides by Google.
- Open Graph was developed by Facebook to allow resources outside Facebook to be rich objects in the Facebook
social graph. It is used when a URL is used to link to the resource from within Facebook.
- Open Graph protocol definition
- Sharing Debugger from Facebook requires a Facebook Developer account. Provides a testing service to show how the Open Graph content in an external web page will be interpreted, together with comments and warnings.
- Sharing for webmasters by Facebook provides the documentation for the Facebook implementation of Open Graph.
- Open Graph protocol examples by Niall Kennedy. The entries are old but still make a useful reference.
- Meta tags for Twitter are introduced in a post on CSS-Tricks by Adam Coti.
Languages for expressing the semantic wed
Servers
- How to monitor nginx by Datadog.
- htconvert a utility by Luke Childs to convert apache-style .htaccess redirects to nginx-style.
- nginx.org for the NGINX web server community edition and also nginx.com for the commercial version.
- How To Secure Nginx on Ubuntu 14.04 by Anatoliy Dimitrov, published by DigitalOcean on is also useful for CentOS servers.
- How to secure your web applications with nginx slidedeck from Wallarm.
- nginxconfig.io Nginx configurator.
- Pitfalls and common mistakes when configuring nginx, published by Nginx.
- Understanding nginx server and location block selection from Digital Ocean.
Service Workers
- Introduction to Service Workers by Ritesh Kumar .
- Service Workers — an introduction by Matt Gaunt. Part of the Web Fundamentals resources provided for developers by Google and so is being kept updated.
Spam prevention
- Modern anti-spam methods by Mike Hearn, .
SVG (Scalable Vector Graphics)
- Accessible SVGs by Heather Migliorisi on CSS-Tricks, . Looks at many of the ways of using SVGs with suggestions on improving accessibility.
- Align SVG Icons to Text by Elliot Dahl, .
- Converting icon fonts to SVG by Sara Soueidan, .
- Inline SVG versus Icon fonts cage-match by Chris Coyier, .
- Pocket Guide to Writing SVG by Joni Trythall.
- Seriously, don’t use icon fonts by Tyler Sticka on .
- SVG Information compendium on CSS-Tricks from . Written by Chris Coyier, co-founder of CodePen and an advocate of using SVG.
- SVGito web app for SVG optimisation.
- Manipulating SVG text from is one of a series of blog posts on SVG by Steven Bradley.
- SVG logos Github repository by Gil Barbara has hundreds of optimised SVG logos. The logos are displayed at svgporn.com/. All logos appearing on the site are the property of their respective owners.
- SVG migration experience at GitHub, a blog from .
- svgur.com to upload, embed and share SVG files by Kevin Marks.
- SVG Authoring guide from W3C.
- SVG on web pages, a tutorial by Florens Verschelde from .
- SVG Path Tester by Nickolay Savchenko.
- Using <object> to embed SVG for accessibility and art-direction, by Sara Soueidan.
- A working SVG workflow for accessible icons by Hugo Giraudel on Sitepoint, .
- Web-based SVG editors compared looks at six tools available in early 2017 including: Vectr, also available as a desktop app; Rollapp, a browser-based version of Inkscape; BoxSVG, includes a code inspector; draw-svg, fully standards-compliant; Figma, Web UI tool that produces optimised SVG.
URL shortening services
- bit.do
- bitly has optional previews.
- goo.gl operated by Google, also provides usage graphs and a QR code. Offers an HTTPS code for long URLs that use HTTPS. Non-HTTPS URLs shorten to a non-HTTPS code but the HTTPS version of the same code also works.
- sprig.gs
- tinyurl.com
- is.gd
- v.gd (has previews)
Validation and testing
Specific accessibility validation and testing tools have their own section.
- AMP page validation from TechnicalSEO.com.
- Cross-browser and multiple device testing
- In addition to, or instead of, third-party services there are other approaches:
- Multiple browsers on own devices. For example, Firefox, Chrome and Chrome Unstable on a GNU/Linux workstation; Firefox, Firefox beta, Chrome, Chrome Dev, Chrome Canary, Opera on an Android tablet or phone.
- In-browser tools such as Chrome Webtools provide hardware emulation facilities.
- Virtual machines for other OSs and browser versions.
- Specific testing hardware: as well as buying hardware it can be worth keep old hardware.
- Browserling cross-browser testing using VMs rather than emulators.
- AMP pages can be validated at validator.ampproject.org.
- BrowserShots, free, open-source, testing showing rendering in several browsers (excluding IE). There is a paid version of the service.
- BrowserStack.com cross-browser testing. Chargeable service with reduced cost options available for freelancers and some open source projects.
- Browsersync, a module for Node.js providing free synchronised browser testing. The source code is available on GitHub,
- Microsoft’s Edge browser testing offers a variety of testing services including site scans, screenshots and virtual machines.
- netrenderer cross-browser testing for the IE family, supported by donations.
- Quirktools.com Screenfly shows a web page in several simulated devices or any arbitrary viewport size.
- Responsinator.com shows a web page in several simulated devices on a single page.
- Sauce Labs subscription cross-browser testing.
- Screenfly displays a live page as it would appear on one of a large number of target devices.
- In addition to, or instead of, third-party services there are other approaches:
- Copyscape, free service that checks for duplicate content across the web.
- CSS validation
- CSS Lint.
- cssnano optimises and minifies a CSS file.
- CSS triggers lists, by browser, which CSS properties cause layout, paint and composite operations.
- stylelint CSS linter finds errors and enforces consistency.
- Feed validators for RSS
- feedvalidator.org by Mark Pilgrim and Sam Ruby.
- W3C RSS/Atom Feed Validator.
- Manifest-validator.com checks cache manifest files for web application offline storage.
- Matt Kersley responsive testing, with GitHub link, for a static page (unless you add the code to your own site) from a single URL displaying the page in several widths.
- Google Mobile-Friendly Test, part of the Google Mobile Search Guide.
- Google mobile speed test with visualisation and emailed detail report. Useful, despite advertising AMP.
- Google Pagespeed Insights provides reports to make your web pages fast on all devices.
- JavaScript validation was the subject of Improving quality front end projects automatically: JavaScript and Accessibility by Aurelio De Rosa on . It includes updates on JSCS and on Tenon.io.
- Parker is a static analysis tool for compiled CSS files. It is installed using npm. Improving Your CSS with Parker by Harry Roberts on gives a useful overview.
- Pingdom website speed test.
- Screaming Frog SEO Spider available for Windows, Mac and Ubuntu Linux. The free download tool can scan up to 500 pages providing information on result codes for internal and external URIs, protocols, file sizes, page structure, meta records, page titles, headers and SEO tips. The paid version allows configuration setting, larger scans and scan saves.
- Search Engine Results Page (SERP) Preview. Tony McCreath has provided this useful tool to show the effect of various factors, including title and meta data, on the content and appearance of a page’s possible appearance in Google search results.
- SerpStat SEO platform.
- Siteliner is a free service that explores a website to show issues affecting a site’s quality and search engine rankings: duplicate content; broken links; page power (page prominence based on the link patterns between your pages); reports including a standard XML Sitemap and a more detailed Siteliner Report. The free Siteliner service is limited to monthly analyses of sites up to 250 pages. The Siteliner Premium service charges $0.01 a page but allows the analysis of larger with no limitations on how often analyses are run.
- Structured data tester from Google.
- Tidy describes itself as the grand-daddy of HTML tools and is maintained by the HTML Tidy Advocacy Community Group (HTACG).
- Total Validator Java application. No-cost single URL validator, low cost site validator and a browser plug-in. The site validator is a low licence fee plus annual maintenance and is run locally rather than a per-page online service.
- WebPagetest.org website speed analysis, WebPagetest documentation and 8-minute video overviews.
- WebsiteOptimization.com speed checker. Older than some other testers (e.g. does not load font resources) but gives a concise summary.
- W3C Developer Tools provides a catalogue
of W3C validation tools including
- W3C Nu Validator, an experimental HTML checker updating the W3C Markup Validation Service.
- W3C Unicorn unified validator for CSS, HTML and RSS.
- W3C Validator Suite GitHub repository for individual URLs or can spider a siteChecks HTML, CSS and internationalisation. It was a chargeable service operated by W3C. Sadly, the service closed, even to existing subscribers, at the end of February 2016.
- YellowLab Tools by Gaël Métais is a straightforward test for components of a web page that can impact performance. Open source tool, using PhantomJS. It can be run in a variety of ways, including a web page at http://yellowlab.tools/.
- YSlow analyses web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
Video
- Video for Everyone, tips for including video clips on websites.
Viewport
- Fun with viewport units including responsive typography and hero images. By Miriam Suzanne on CSS-Tricks, 5 June 2017.
- Peter-Paul Koch of QuirksMode.org gave a detailed and helpful presentation at HTML5DevConf on Viewports (video); Viewports (PDF of slides). He is also the author of The Mobile Web Handbook, published in by Smashing Magazine.
- Viewport units: vw, vh, vmin, vmax on Web Design Weekly.
Workflow
- 5 Grunt tasks that improve the performance of your website on SitePoint.
- Automating your workflow with Grunt.js article on Techneblog.
- Sonarwhal linting tool description by Stephanie Drescher at 24 Ways.