This website is the completed code for the second "challenge" of the course, to create a portfolio webpage using html and css, which included these instructions:
- present the developer's name, a photo or avatar, and links to sections about the developer, their work, and how to contact them
- the links in the navigation should scroll to the corresponding section
- there should be titled images of the developer's applications
- the image of the first application should be larger than the others
- clicking the image of an application should send the browser to the relevant site
- there should be a responsive layout that adapts to resizing the page or viewing the site on various screens and devices
- Developed a wireframe plan to match the mock-up in the assignment.
- Developed a strategy for classes and id's to use for css coding.
- Decided on a list of global css variables.
- Wrote the text, gathered images, and decided how the responsiveness should work.
- Wrote the
htmlcode. - The css coding was very challenging; I learned a lot, but I feel like there are some fundamentals that I am still missing. Nevertheless, I was able to meet the challenge acceptance criteria as I understand them. Getting it to work involved a lot of trial and error, so I'd like to improve my css skills so that I can work more efficiently next time.
There are a couple of items that I did not have time to do. First, the title for the work cards is not clickable to access the hyperlink to the work product. I have made this an issue on GitHub. Second, I had planned to do a couple of cool alternative stylings, but as noted above, just matching the mock-up styling was very challenging. I hope to have a chance to implement alternative stylings of the portfolio in the future.
The live portfolio webpage can be found at this link: https://stuart-rickard.github.io/srport/