Resizing Module

I worked on the resizing of the About Me page of the portfolio that I had made in WRA 210. When I was in the class, I had wanted to make my website mobile-friendly, but I was not experienced enough to get it to work in the way that I wanted. I thought that this would be a good opportunity to practice.

Mockups

I remade my mockup for the desktop version of my website.Mockup of desktop view of portfolio for resizing module

Afterwards, I transformed these designs into something I would expect to see on a mobile device. Mockup of mobile version of portfolio for resizing module

Resizing through coding

I then coded my design into a desktop version:
Desktop version of Alexandria Drzazgowski's website for resizing module

The challenge came with transforming this desktop version into a mobile version. I needed to fix the widths of my photo/paragraphs so that they no longer shared the screen. Additionally, the size of my header and the height of the div box that was holding my navbar items needed fixing. I expected to simply be able to copy Professor Davidson’s CSS coding, but I actually had to change a lot to be successful. In the end, however, I was able to transform my web page into a mobile site! Coded mobile version part one for resizing moduleCoded mobile version part two for resizing module

Leave a Reply

Your email address will not be published. Required fields are marked *