This is a solution to the Bookmark landing page 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.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the newsletter form is submitted if:
- The input field is empty
- The email address is not formatted correctly
- Desktop Preview
- Solution URL: Solution
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I learned how to create toggle elements using Vanilla Javascript using some primitive logic. I don't feel very proud of CSS in this and found that there is a major scope for learning and improvement especially about Mobile first Workflow and Responsive design.
- Make the design pixel perfect
- Work on the Hamburger Menu and implement sliding menu
- Make CSS more compact and reduce the lines of code
- Right now there are about 7 Media Queries varying with respect to different widths, but I wish to make them as los as possible as I continue learning more about CSS.
- Implementation of the same Landing Page using React
-
Dropdown Menu - This helped me with toggle different elements.
-
Flexbox Guide - This is an amazing article/cheatsheet for Flexbox. I'd recommend it to anyone still learning this concept.
- Frontend Mentor - @suraj-singh127
This was a really good challenge and I really enjoyed doing it. I got to know and implement many interesting things along with my weakpoints on which I really need to work on along with brushing up the already strong points.