Assignment 1 Portfolio Site using HTML and CSS Areeba Alam-100978323

This website is a personal portfolio. It includes an About Me section, a Projects page showcasing some of my previous work, and a Contact Me page where users can get in touch with me. This is the link to the live portfolio: https://aree06.github.io/Assignment-1/ This is the link to the GitHub Repository: https://github.com/Aree06/Assignment-1

Question 2a. For laptop, I used 960px because 960px is a common minimum width for laptop layouts. It’s wide enough to allow multi-column layout. For tablet, I used 481px-959px. This range is chosen because anything 480px and below is typically considered a small screen, so this range comfortably fits tablet screens. For phone, I used 480px because 480px is a common minimum width for phone screens. Since phones have smaller screens, anything under 480px is considered a phone layout. From this viewpoint, I adjusted the design to stack content and make a bigger button while keeping the text readable.

Question 2b. I decided to use a linear and angular gradient on the Contact Me page to make it stand out. All the other pages use a simple light blue background for consistency. For the gradient, I chose to use a combination of light blue and dark blue, as these colors complement each other and create a smooth transition while keeping the theme cohesive.

Question 2c. The theme I went with is different shades of blue. For the laptop layout, I used a light blue background(#C1E1F0), black text, a white content box(for some pages), and blue buttons(#0F2EF5). This creates a clean and readable design for larger screens. For the tablet and phone layouts, I switched to a navy blue background with white text and coral-colored buttons that use teal text(#01E6DC). This combination provides a high contrast, making the content easy to read and easy to interact with.

I referenced stackoverflow for a few lines of code. I used the example to learn how to place text beside an image. This code is applied to the About Me page, where my picture is aligned to the left and the text is positioned to the right. I also got the copyright symbol’s code from w3schools, which is in my footer section. The last thing I used outside code was to learn how to remove bullets from unlisted lists. Other than that, all the other code I used comes from our previous lectures.

References(APA 7th ED) Create space between float image and text. Stack Overflow. (2021, January 23). https://stackoverflow.com/questions/22606955/create-space-between-float-image-and-text Removing bullets from unordered list. Stack Overflow. (2015, October 12). https://stackoverflow.com/questions/33075940/removing-bullets-from-unordered-list W3schools.com. W3Schools Online Web Tutorials. (n.d.). https://www.w3schools.com/html/html_symbols.asp