This is a solution to the Single-page developer portfolio challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Receive an error message when the
form
is submitted if:- Any field is empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
Mobile | Tablet | Desktop |
---|---|---|
![]() |
![]() |
![]() |
- Solution URL: Add solution URL here
- Live Site URL: Live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- JavaScript
Throughout this project, I gained valuable insights and learning experiences. Some of the key learnings include:
- Implementing form validation using JavaScript.
- Utilizing code snippets to highlight specific areas of the project.
In future projects, I aim to focus on the following areas:
- Further improving my understanding of JavaScript concepts.
- Refining and perfecting techniques that proved useful in this project.
- Resource 1 - Regular expressions are powerful tools for pattern matching and validation. The Mozilla Developer Network (MDN) guide on regular expressions in JavaScript provides detailed explanations and examples which helped me understand and utilize regex effectively.
- Resource 2 - The MDN documentation on classList provides detailed information and examples on how to add, remove, toggle, and check for classes using JavaScript.