A solution provided by jefflangtech News homepage challenge on Frontend Mentor.
Users should be able to:
- View the page in desktop mode and mobile. It is not optimized for tablets or mediums-sized screens but will still work
- See hover and focus states for all interactive elements on the page
- Access a pretty standard nav-bar menu in desktop that moves to a slide-out drawer menu in mobile mode
- Solution URL: Frontend Mentor Solution
- Live Site URL: JeffLangTech Github Repo
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
This project was challenging in that, while it wasn't difficult to implement grid in the way I wanted for the desktop, transitioning some of the grid children through media query breakpoints down to mobile size didn't work as well as I'd have hoped.
I think having a designed tablet view to work off of would have made a difference.
I did learn, however, that I've been trying to implement slide-out nav menus wrong. I was using absolute positioning and dealing with some layout quirks and behaviors on previous pages. After reviewing a Kevin Powell video I realized that I needed to use fixed positioning, and that helped quite a bit.
My next steps are going to be to focus on implementing page sections instead of entire pages. Definitely I will need more practice with grid across a wide variety of designs. I will probably begin with navbars first though.
- Kevin Powell: Responsive navbar tutorial using HTML CSS & JS - This was actually from a Frontend Mentor Challenge that Kevin Powell did, and I specifically was looking at the parts where he implemented the nav menu
- Website - JeffLangTech
- Frontend Mentor - @jefflangtech
- Twitter - @jefflangtech