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.

  • By Juan Diaz
  • Last update: Aug 26, 2022
  • Comments: 9

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

👤 Author1

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project doesn't have or require any license.

Preview

This is how this project looks like

here!

Online version

Checkout the online version

here!

Github

https://github.com/juanmanuelbyc/Microverse-Student-Project-1

Comments(9)

  • 1

    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.

  • 2

    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.

  • 3

    Pop up projects info

    The main objective of this feature is to implement the following interactions:

    • When the user clicks (or taps) the button to check project details, the popup with details about the project appears.
    • When the user clicks (or taps) the close (X) button, the popup disappears.
    • Implement popups for both mobile and desktop screen sizes: Mobile popup
  • 4

    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.

  • 5

    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

  • 6

    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

  • 7

    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 :

    • On line 243 they were missing an closing parenthesis to close the addEventListerner function
  • 8

    Morning Session Code Review.

    • Kindly style the nav links and the logo to look like the figma design i.e remove the underline.
    • The popup images should be resized in desktop i.e to look clearer.
    • Please make the header position fixed in both mobile and desktop.
    • Adjust the width and the height of the popup in mobile to fit the screen.
    • It will be good to change the text color of the error message for email validation to red for accessibility.
  • 9

    Morning Session: Code Review

    HTML is structured very nicely but there are a few changes that were recommended in the meeting:

    • Create a separate class for the CSS properties that are being used repeatedly in style.css (for example display: flex)
    • Import via single URL for different font weights for a same font family (for example: @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');)