We were tasked with building a portfolio page from scratch by applying concepts covered in Module Two. This project focused mostly on our use of CSS styling using flexbox, application of pseudo-elements/classes/variables, media queries, and other CSS properties to meet our Acceptance Criteria (see below).
Disclaimer: At the time of submission, all projects are placeholders. This portfolio will be updated as the bootcamp progresses.
Here are the critical requirements necessary to develop a portfolio that satisfies a typical hiring manager’s needs:
GIVEN I need to sample a potential employee's previous work:
WHEN I load their portfolio
THEN I am presented with the developer's name, a recent photo or avatar, and links to sections about them, their work, and how to contact them
WHEN I click one of the links in the navigation
THEN the UI scrolls to the corresponding section
WHEN I click on the link to the section about their work
THEN the UI scrolls to a section with titled images of the developer's applications
WHEN I am presented with the developer's first application
THEN that application's image should be larger in size than the others
WHEN I click on the images of the applications
THEN I am taken to that deployed application
WHEN I resize the page or view the site on various screens and devices
THEN I am presented with a responsive layout that adapts to my viewport
The latest version of the webpage is active at: https://omar-razo.github.io/hw-challenge-2/
N/A
N/A
CSS-Tricks was visited for flexbox advice. https://css-tricks.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-background
MDN Web Docs was visited for application of CSS attributes/classes/pseudo-elements/variables and HTML review. https://developer.mozilla.org/en-US/docs/Learn/HTML https://developer.mozilla.org/en-US/docs/Web/CSS
N/A
Chrome DevTools were used to test various viewports.
- F12 - open Chrome DevTools
- Ctrl + Shift + M - Toggle device toolbar
- Dropdown menu with various presets