Bookmark
HTML / CSS / JS
This project was a challenge from Frontend Mentor. The specifications required me to build a fully responsive landing page to the designs provided. I used semantic HTML, modern SCSS complied to CSS (based on CUBE CSS), with JavaScript for form validation and the tabbed component.
Visit Website Source CodeNotes and Queries
There were a couple of tricky aspects to this challenge. Notably the tabbed component and managing tab order to allow keyboard users to tab into the focused component, rather than onto the next tab. I used Heydon Pickering's in-depth write up on tabbed interfaces as a basis for the tabbed component. This was especially useful for dealing with the tab order.
The burger-menu shown on smaller screens was fiddly. The component is based on Andy Bell's totally full on fully responsive progressively enhanced burger menu which is excellent and very robust. Again, if JS should fail for any reason no content is hidden. I also allow the body scroll when the menu is open — some people don't like this, but I prefer not to restrict the user if possible.
The page also takes advantage of in-built HTML functionality. The FAQ section is created using the details-summary element (which has built in focus states). The no-validate attribute is added to the form using JavaScript, which enables a fallback to built-in, browser validation. I in-lined the CSS to improve performance, but some CLS issues remain that I need to look at again.
Static Previews
