My main challenges were two fold, and probably related: Understanding positioning and keeping my code organized. I could probably have figured out my positioning trouble if I had organized my code better. Similarly, I could never get my margins/padding/borders to work like I expected them too – they always ruined my positioning/alignment. I think my plan for the final is to work through my wire frame in more detail assigning vw/vh values and margin values so that everything adds up and lines up and it will be less overwhelming when things start to not work because I will have a written plan.

https://github.com/NJPaganelli/BootcampWebProjects

Call outs:

Nav Menu in upper right is single block with words appearing beneath on mouse over: About, Projects, and Contact

Title adds a bounding box with mouse over

Social icon (linked in only) doesn’t move

Main project blocks descend one appearing from underneath another as the page loads

The small of the two sub divs will have a second one hidden. It slides out from under the IMG to cover the Project title. It could be a second image or a description.

Call Outs:

Content blocks on product and about pages move same as above on open

Two blocks spread out and make room for a third in the center when mouse over one of them – a detail image or description related to the corresponding content block. Single image will be format for all in most cases.

Related projects get a slightly transparent overlay with another image or title or both when moused over. As is they show a single image with now title.

https://www.cedricpereira.com/

https://fabianirsara.com/

https://www.graz.io/

I like these sites because they are interactive/responsive but they are not excessive about it. They display skills and their design aesthetic without distracting from the content.

Are image sizes controlled in the same way as video sizes are?

https://github.com/NJPaganelli/BootcampWebHomework/blob/master/index.html