This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
My biggest challenge yet, 3 days needed for it to be done. I need to learn how to make dropdown list and transistion side bar from scratch, it was hard.
Users should be able to:
- View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
- View the optimal layout for the content depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: Solution here
- Live Site URL: Live site URL here
As my first junior level challenge, i somehow able to visualize the layout instinctively so making the layout in html feels like a flowing water. so of course like usual, layout first on mobile. But for this challenge i tried to finished off the mobile mode completly, with it's coloring and positioning of the elemnt, while moving onto the desktop mode, i can't think of other answer except using display:none on all mobile element, and creating a new element on html just for the desktop mode. It might make the code longer but i can understand it easier.
- Semantic hmtl
- CSS
- Flexbox
- Mobile-first workflow
- no library
- no javascript
There are 2 main things i learned from this challenge:
- make an transistion side bar
- making a dropdown list
It's not much, but for me, it is a huge leap
I want to learned more about dropdown list and transistion
- MDN web docs - I think everyone should know how to use this website, it is like wikipedia made only for coding
- getcssscan - i used this website to copypaste the shadow style