Tips to help the modern Front End Developer (FED) build inclusive and intelligent solutions..
Heading levels are not about font size. They are all about meaning . Think of it this way: <h1> is the page title. <h2> is a major section within that page. <h3> is a subsection within that major section, and so on. While not explicitly a WCAG failure, maintaining proper heading order (h1-h6) improves accessibility. It creates a clear document structure, aids screen reader users and helps search…
1. Set up a repo and deploy early Git version control is key to success anyway, so get into this habit now if you don't alreay do this as a first step in every project! Having a fresh git repository set up from the start will help you to get help quickly. Committing regularly not only tracks your progress but also allows you to easily share your code with others . As well as the code repository…
Although I'm still actively mentoring Front End Developers (FEDs) as much as I can, my real passion has always been inclusion and accessibility. So when some opportunities to deliver accessibility-related online talks came my way through my work at Nomensa , I jumped at the chance! I've delivered training sessions before and done talks at tech-focused events in the past, but these sessions have…
In this guide, we'll explore how to create an accessible pattern for expandable content. By the end, you'll have a solid pattern in your pocket you can adapt for accordions, mobile navigation toggles (often called 'burger' menus) and any other components that reveal content following user interaction. The pattern I'm teaching should work for all users, no matter what modality they're using…
In the world of CSS, getting the spacing right is crucial for creating visually pleasing and well-structured layouts. Two fundamental properties for managing space are padding and margin . However, determining when to use each can be a bit confusing! In this post, we'll explore the differences between padding and margin, along with real-world examples to help you make informed decisions. The Box…
Quick Note… Sass is an extremely popular CSS pre-processor . This post is specifically looking at sass nesting, not native CSS nesting, but all the same prinicples will apply. More about Sass Understanding Nesting in Sass Sass nesting simply means placing selectors inside each other. It's a way of writing CSS selectors that is a little shorter, and places more emphasis on the parent-child…
What's Frontend Mentor?! Frontend Mentor (FM) is a brilliant site that provides you with loads of realistic components or site designs you can build. It's a place where you can stretch those front end muscles and embed your learning by actually building stuff and getting feedback or help as you go. It is important to still do some courses first! Don't try to start building projects until you feel…
Series Intro I have been mentoring junior developers for years. In that time, one issue comes up again and again. Courses for aspiring developers teach almost nothing about the importance of HTML structure! So it's not your fault if you struggle with this! Bootcamps and tutorials skip over HTML like it's unimportant. But this process of translating designs into appropriate and meaningful HTML is…
Post updated for clarity 2024 I want to make clear, this is an opinionated post because I am directly and regularly affected by this issue! People like me who need to be able to enlarge text in their device settings shouldn't have to constantly zoom in on web pages when developers like us could just use a better unit in CSS in the first place. Small changes in your code can make a big difference.…
Defining "responsive" All websites need to be responsive. (So do all Frontend Mentor challenges, even the single component ones!) Put simply, a responsive site or component is one that looks OK and functions well on all screen sizes from 320px wide and above without requiring horizontal (inline axis) scroll . "Making a site responsive" does not mean that every site / component needs a media query…
Please note! If you are blind, have a disability or have impaired vision and believe I have used offensive or ableist language in this post, please let me know ! I am always open to correction and improving awareness in this area. Similarly, please correct me if you note any inaccuracies or omissions in this post. What are 'vision impairments'? Disabilities or impairments that affect sight are…
Background: What and why? By default, browsers set the HTML font size to 16px. That means 1rem (root element font-size) equates to 16px in browsers by default. Users can change this default in their browser or OS settings, so this isn't strictly true all the time, but we'll come back to that later. For now, lets focus on 1rem === 16px . Historically, the rem unit didn't exist. Its introduction…
There are loads of ways to select elements with JavaScript... querySelector() querySelectorAll() getElementByID() getElementsByClassName() getElementsByName() getElementsByTagName() getElementsByTagNameNS() There's probably even more than that! Inside those methods you pass in parameters to select the element(s) you want (check the docs for each method if you want to know what params they can…
When we talk of IDs, really we're looking at the attribute value , as demonstrated here with "uniqueHeadingId" in this example: < h2 id = " uniqueHeadingId " > This heading has an ID attribute. </ h2 > That uniqueHeadingId can be referenced and used in a variety of ways throughout Front End code. You'll see IDs in HTML, CSS and JavaScript, but that doesn't mean every code example is using them…