Microverse-Student-Project-1
First project of Microverse curriculum to draft our future portfolio.
We are trying to apply what we have studied regarding:
- Understanding how to parse a Figma design to create a UI.
- Using Flexbox to place elements in the page.
- Building a personal portfolio site.
- Using images and backgrounds to enhance the look of the website.
Built With
- HTML, CSS
Authors
- GitHub: @juanmanuelbyc
🤝
Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Show your support
Give a
📝
License
This project doesn't have or require any license.
Preview
This is how this project looks like
Online version
Checkout the online version
Form local storage
Feature development to apply our learning about local Storage.
Main tasks: -Implement the following interactions: *When the user changes the content of any input field, the data is saved to the local storage. *When the user loads the page, if there is any data in the local storage the input fields are pre-filled with this data. *Create a single JavaScript object with all the data from the entire form and save it in local storage. Do not create one local storage entry per input field.
Email lowercase validation
This feature implements a simple validation:
-The content of the email field has to be in lower case.
We also implement the following interactions:
When the user submits the form, we check if the email is in lower case. If the validation is OK, the form is sent. If the validation is not OK, we show an error message to the user near the submit button informing them of the error and the form is not sent.
Pop up projects info
The main objective of this feature is to implement the following interactions:
Mobile menu js query
Create a dropdown mobile menu and apply some js query to make it responsive to user interaction
The most important project requirements are:
When the user clicks (or taps) the hamburger button, the mobile menu appears. When the user clicks (or taps) the close (X) button, the mobile menu disappears. When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears. When the user clicks (or taps) any of the mobile menu options, a correct part of the page is displayed.
Accessibility evaluation
We are going through these aspects:
Page titles - Changed the title to "Juan Diaz Portfolio" https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R9
Image text alternatives - updated https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R40-R44
https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R175-R179
Text heading - Fixed heading hierarchy for the main heading at the beginning of the page https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R30
Color contrast - fixed several text colors (also there's others that won't pass contrast text. But changing them would make them way different than Figma design)
https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R46
https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R122
https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R256
https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R266
https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-f6e4f9cac7473cf1fe513beba97669f195a6e1872bbd857c713d41e0f4b5d289R266
Resize - no issues found Interaction - no issues found Moving content - no issues found Multimedia - no issues found The basic structure of the page - no issues found
Add contact me section
In this Group Project, the contact form is added in the footer section with the following fields and requirements:
Name field accepts up to 30 chars. Email field accepts only emails. Message field accepts up to 500 chars. All fields have placeholder text. All fields have the correct type. A user cannot submit the form if one or more of the fields is empty. Formspree service is used to submit the form in the generated link Contact Form elements are layout in Flexbox. Implement the button Hover interactions This project is completed with the help of my coding partners:
Abel Gebeyehu (https://github.com/AbelG101) samlorlah https://github.com/samlorlah
NOTE: I am using Figma Template
Peer Feedback
For the sake of doing the peer project with @juanmanuelbyc, we get to create a bug in our project and the peer will use Developer tools to debug the code here is my debug process :
Morning Session Code Review.
Morning Session: Code Review
HTML is structured very nicely but there are a few changes that were recommended in the meeting:
display: flex
)@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
)