Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

Set Up Your HTML/CSS For Success: Practical Checklists Included

If you’re just starting out with HTML/CSS, it’s important to build good habits so that your scripting is high-quality and nothing to be embarrassed of when you start to showcase a portfolio of your work.

What does successful HTML/CSS look like?

  1. It meets markup standards and passes validation testing.
  2. It’s functional and explains itself across all browsers even if a full experience cannot be enjoyed by all.
  3. It’s responsive and caters to different devices differently.
  4. It’s accessible
  5. It optimized for speed.
  6. Its structure, presentation, and behavior are separated.
  7. It’s well documented and organized.

A practical checklist for validation

A practical checklist for functionality

  • Does this work in Chrome?
  • Does this work in Firefox?
  • Does this work in Safari?
  • Does this work in Edge?
  • Does this work in Opera?
  • Are there any prefixes or polyfills that could enable support? https://caniuse.com/
  • Have I added a normalize.css if necessary?
  • Have I added clear fallback experience or notification to the user if an experience cannot be viewed due to their browser compatibility?
  • Have you added friendly 404 error pages and other error type messages?

A practical checklist for responsive design

  • Are my units in %, em, or rem?
  • Are my images wrapped in picture tags?
  • Have I added media query breakpoints when necessary?
  • Have I added < meta name = “viewport” content = “width=device-width” > ?
  • Have I set body { min-height: 100vh; } ?
  • Have I tested on multiple devices?

A practical checklist for accessibility

  • Does this pass an accessibility validator? https://achecker.ca/checker/index.php https://wave.webaim.org/extension/
  • Have I tested with a screen reader?
  • Have I tested with a color blindness tool? https://www.toptal.com/designers/colorfilter
  • Is my user experience accessible and intuitive across a spectrum of ages and cognitive abilities?
  • Have I added captions to my videos, images, tables, and charts?
  • Do my alt tags actually do a good description job?
  • Do my call to action buttons explain themselves? (not just “shop now”)
  • Have I added skip links and on focus form styling?
  • Is my HTML structured with landmarks such as header, nav, main, and footer tags?

A practical checklist for optimization

  • Are my files minified? http://minifycode.com/
  • Are my images the smallest dimensions and weight necessary?
  • Am I using everything that I’ve included? (or have you linked up a huge icon library that you only need 3 icons from)
  • Have you tested the speed of your site? https://www.webpagetest.org
  • Have you set compression and caching within your .htaccess or httpd.conf?

A practical checklist for separating structure, presentation, and behavior

  • Are all of my listening and behavior calls happening in my js files only?
  • Could I attach a completely different css file to my html and it would still make sense?
  • Does it work if I take away the js files or at least provide appropriate messaging?
  • Are my css styles named according to structure and not current presentation or location? For example: .dress { color: blue; } rather than .blue-dress { color: blue; }
  • Is my DOM beautiful and easy to navigate without any css?

A practical checklist for documentation and organization

  • Is my css separated into base, layout, components, states, and styles?
  • Have I used a consistent css naming style such as the BEM method or something else that makes sense for my project?
  • Have I created well-named folders to house my files such as css, js, images, data, etc… ?
  • Is my UI design consistent and able to be easily reused?
  • Have I written as much clear documentation as I can within my files explaining what I have done and why?
  • Have I used appropriate citations for images, libraries, and snippets?
  • Am I using a version control system so that I may return to a previous version of my project at any time?

Final Thoughts

It seems like a lot to keep track of, but when you do create a site that fulfills the definition of success, it’s something to be really proud of. It will impress web professionals, make you feel good, and be super high-quality for your user.