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
formis 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
- Bonus: Hook the form up so it sends and stores the user's enquiry (you can use a spreadsheet or Airtable to save the enquiries)
- Bonus: Add your own details (image, skills, projects) to replace the ones in the design
- Semantic HTML5 markup
- Accessibility In Mind
- CSS
- Flexbox
- Grid Layout
- Custom properties
- Native nesting
- Container queries
- Mobile-first workflow
- Postcss - CSS Preprocessor
- pnpm - Package Manager
My goal was to produce a fast, performant, accissible and responsive website, and discover CSS latest technologies. I learnt about and used CSS Native Nesting, Container Queries etc. I also learnt how to analyse CSS Code Complexity and used Project Wallace to improve my CSS code and I got 100% score in all CSS code quality sections 🎉 I learnt about HTML Form client-side validation and JavaScript Constraint Validation API. I kept Accessibility in my mind during every stage of development. I used Wave Evaluation Tool to test my site and ensured no errors or alerts related to accessibility. I also used Google Chrome devtools to measure many aspects of my site's performance and scored 100% in LightHouse 🎉
This is good for now and later I'm going to publish a detailed article about what I've learnt.
- Invisible Content Just for Screen Reader Users - This is an amazing article which helped me to understand different techniques and use-cases for hiding content. I'd recommend it to anyone still learning this concept.
- The Guide To Responsive Design In 2023 and Beyond
- The new responsive: Web design in a component-driven world These amazing articles helped me to discover latest CSS techniques. I'd recommend it to anyone aiming to keep up-to-date in CSS.
- google-webfonts-helper - This amazinge tool helped me for optimizing google fonts.
These was some useful resources and I'll add more later.
- Frontend Mentor - @ahmadkdev
- Linkedin - @ahmadkhaliddev
- Twitter - @ahmadkhalidmo
I deeply thank Fronend Mentor for their amazing designs. and many thanks to Coder Coder Her amazing tutorials really helped me alot.