Frontend Mentor - Minimalist portfolio website solution

This is a solution to the Minimalist portfolio website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site
• Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section
• Receive an error message when the contact form is submitted if:
  • The Name, Email Address or Message fields are empty should show "This field is required"
  • The Email Address is not formatted correctly should show "Please use a valid email address"

Screenshot

Links

• Solution URL: Go to Solution Site
• Live Site URL: Go to Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Javascript
• Content-first workflow

What I learned

I learnt how to create a forms with custom error messages, it was a challenge getting it to look like the design but I am glad to have finally gotten it done.

Continued development

I would like to learn more about forms in order to be a able to create some amazing ones. I will also like to hone my javascript skills.

Useful resources

• form validation - This is an amazing article which helped me with form validation.
• form validation - This helped me with the form validation.

Author

• Frontend Mentor - @faruking2
• Twitter - @faruking2

Acknowledgments

Shout out to "vanzasetia" on "frontend-mentor" slack channel for pointing me in the right direction when looking for information about "form validation".