This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each of the website's pages depending on their device's screen size
- See hover states for all interactive elements on the page
- View each page and be able to toggle between the tabs to see new information
- Live Site URL: Github Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I actually wanted to complete this without deviating too much. I need to improve my accessibility and add to my baseline performance.
- A Few Takeaways:
- You can have multiple headers on a page.
- Put images inside a div. The div will be the flex item. Flex on images === bugs.
- Don't break up headlines just to make styling easier. Use spans and work around it.
- Subtitles should use a paragraph tag.
- Grid is a inner display value.
- Viewport units don't response to zooming in and out.
- @supports requires both property and value - even if value is overridden immediately.
- To toggle a nav, you generally use attributes or a class.
- Remember, data-attributes are 'strings'.
- You can't animate background images.
- In keyboard navigation, the spacebar triggers the click event. Don't need extra event listener.
- where/is css - where doesn't add specificity.
- aspect-ratio: width / height
- The crew page pictures might be a little too large.
- I had issues with using hidden on a picture element. I created a utility class of d-none to hide the content instead.
- Use data.json() and fetch data from it when user click link to page / tab.
- Adjust padding / gaps to ensure everything fits into viewport height. No more scrollbar.
- Technology page only has mobile and desktop pictures. Not webp either. Thus, tablet view is compromised.
- Free Code Camp - Glass Morphism
- MDN Docs - @supports()
- MDN Docs - :focus-visible
- MDN Docs - margin-block
- MDN Docs - setAttribute("name", "value")
- Kevin Powell
- Scrimba
- Frontend Mentor