https://github.com/chanda-abdul/single-page-developer-portfolio-frontend-mentor
This is a solution to the Single-page developer portfolio challenge on Frontend Mentor
https://github.com/chanda-abdul/single-page-developer-portfolio-frontend-mentor
css html javascript portfolio vanilla-javascript
Last synced: 8 months ago
JSON representation
This is a solution to the Single-page developer portfolio challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/chanda-abdul/single-page-developer-portfolio-frontend-mentor
- Owner: Chanda-Abdul
- Created: 2023-01-26T01:06:22.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T07:31:22.000Z (over 2 years ago)
- Last Synced: 2025-01-13T16:49:13.072Z (9 months ago)
- Topics: css, html, javascript, portfolio, vanilla-javascript
- Language: JavaScript
- Homepage: https://keen-bavarois-14c4e7.netlify.app/
- Size: 1000 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Single-page developer portfolio solution
This is a solution to the [Single-page developer portfolio challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/singlepage-developer-portfolio-bBVj2ZPi-x). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
# Table of contents
### [The challenge](#the-challenge)
### [Screenshots](#screenshots)
### [Links](#links)
### [Built with](#built-with)
### [What I learned](#what-i-learned)
### [Continued development](#continued-development)
### [Useful resources](#useful-resources)
### [Author](#author)
## The challenge
Users should be able to:
- [x] Receive an error message when the `form` is submitted if:
- [x] Any field is empty
- [x] The email address is not formatted correctly
- [x] View the optimal layout for the interface depending on their device's screen size:
- [x] Mobile @ 375px
- [x] Tablet @ 768px
- [x] Desktop @ 1220px
- [x] 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)
- [x] **Bonus**: Add your own details (image, skills, projects) to replace the ones in the design
## Screenshots
## Links
- Solution URL: [here](https://github.com/Chanda-Abdul/Single-page-developer-portfolio-Frontend-Mentor)
- Live Site URL: [here](https://keen-bavarois-14c4e7.netlify.app/)
## Built with
## What I learned
## Continued development
## Useful resources
- [Building a portfolio website with HTML & CSS | Part 1](https://youtu.be/65GVcdESj3s) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- [Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript) - This is an amazing article which hel
- [CSS Compressor](https://youtu.be/65GVcdESj3s) - Use CSS Compressor to compress CSS to reduce CSS code size and make your website load faster.
- [CSS Specificity Visualizer](https://isellsoap.github.io/specificity-visualizer/) - A visual way to analyze the specificity of selectors in CSS.
## Author
- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)
- Website - [Chanda Codes](https://chandacodes.com/)
- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)