| Technology Used | Resource URL |
|---|---|
| HTML | https://developer.mozilla.org/en-US/docs/Web/HTML |
| CSS | https://developer.mozilla.org/en-US/docs/Web/CSS |
| Git | https://git-scm.com/ |
| VSCode | https://code.visualstudio.com/ |
| Web Accessibility Evaluation Tool | https://wave.webaim.org/ |
- Create and deploy portfolio that demonstrates work and skills
- Include name, title, photo, personal highlights, skills, work, and contact information
- Activate navigation links to scroll users to sections on page
- Work projects direct the user to engage with their live sites
- The first work project is emphasized by being the largest
- Site is responsive for various screen sizes
- Code is reviewed by accessibility tools: https://wave.webaim.org/
Initiated the project by framing out the semantic HTML with the content that I knew I wanted to include in the project
- Updated HTML as needed during testing of CSS and responsiveness
- Used semantic elements as much as possible
- Utilized a tutoring session to walk through display:flex and element dimensions
- Refactored to make some DIV elements surrounding elements I needed to have flex/flow better
- Added comments to various areas for clarity
I had a rough idea of how I wanted to engage my selectors based off of previously building a portfolio.
- Started from top to bottom in terms of how the HTML flows
- Created :root variants to have base colors and fonts to call upon
- Styled the website from a mobile-focus first, then added media queries to set min-width for tablet and desktop
- Utilized a tutoring session to walk through display:flex and element dimensions
- Refactored to optimized the various areas flex/wrap better
- Reviewed each selector and property/value to make sure it served it's best purpose
- Consolidated selectors where it made sense to do so
- Removed redundant selectors and properties
- Website Deployed: https://twixmixyjanet.github.io/janet-webster-portfolio/
- Critical details included
- Active navigation applied
- Work projects linked
- First project is emphasized
- Site is responsive
- Code reviewed
- Create a new repository on GitHub, to store this project.
- Clone the repository to your computer.
- Copy files to your own repository.
- Make changes to the code.
- Commit the changes to the local repo.
- Push the changes to the remote repo.
This one page website portfolio can be used as a base template. Simply swap out information, work, skills, and contact you may need for it to match your requirements.
MIT License Copyright (c) 2023 Twixmixy / Janet Webster
Full Stack MERN Software Engineer in training.
