CSS Assignment

Hello! In this assignment we will:

1. Practice CSS formatting

2. Practice interpreting requirements from a non technical source

3. Read/Debug/Improve an existing code base

Alright! So here’s the scenario. You work for a web development firm that acquired a client that is a small Apt complex. They’ve sent you the email below.

Email from Client

Hi!

Our website was built by someone in our small company a while ago and he left a couple years ago. We would like to make the below changes to it.

1. The main title on the top seems to be stuck to the left. Could we make it so that it’s in the middle of the screen?

2. We feel that the overall font looks outdated. Could you please change it to a more modern font.

3. For the amenities, we would like to add another item. The item should be titled “Walking Trail” and below is the copy. For the image, we left one in the folder.

   “There is a nice walking trail that spans about a mile around the whole property. Whether it's to walk your pets or just go for a stroll, it's definitely a key advantage of our community”

4. We used some blue colors for our branding, but could we change all the colors to a cleaner monochrome theme with different shades of blacks and grays?

5. The images that we have for the amenities are different sizes. Could you make it so that they are more uniform?

6. According to the browser’s window size, we have two rows or more for the amenities. When this happens, the lower blocks touch the upper blocks. Could we add in some space between the rows?

7. There’s a lot of space between the very bottom of the page and the end of the content. We would like there to be less space between the bottom of the page and the rest of the content.

8. For the amenities, the blocks have rounded corners. Could we take this away and just make them straight corners?

9. When you make the browser window smaller, or when you view this site on a cell phone, the text seems to stick to the left. Could we put some space on the left between the text and the border of the browser window?

If all of the 9 items above are addressed and we have some more capacity to work, below are some additional items that we’d like to get some help on.

10. The nav bar works, but when you click on it, for instance on “About”, it does take you to the location of “About”, but you couldn’t see the title “About.” Could this be fixed?

11. Any other style changes that you recommend to make the site look more modern?

Thank you! Sincerely, Dusty Woods Apartments

---

You could notice that they are not speaking the “language” of what’s been taught as the requests are coming from a non-technical person, which is most often the case. Working in tech, a lot of times you get requests such as “the clicky thing doesn’t do that slidy thing anymore.”

If it’s a large project, you might have a BA (Business Analyst) that interprets the business language to technical requirements. For smaller projects like this, you’ll have to interpret the request and understand in technical terms what’s being asked.

To complete this assignment:

1. Create a technical requirement list from the action item list above. Simply re-write the requests (1-10) in technical terms using the terms learned during the course so it’s a clear list of to-dos using the proper HTML or CSS terminology.

2. Work through requests 1-9.

3. Requests 10 and 11 are stretch goals. Try them out and feel free to share what you’ve done and how.

Have fun!