The CSS Bakery: Trials & Tribulations of Nav Bars


A screenshot of the Black & White Cookies recipe page of my finished site, displaying the bulleted lists, navigation bar, header, and picture elements.

For my second minisite assignment, I selected the topic of a dessert recipe exclusive website. This allowed me to give the website a whimsical, fun atmosphere, and I had a lot of fun selecting from bright, spring-y color palettes and curly serifs in my mockups and design of the site. My three sub-categories of desserts were cupcakes, cookies, and cheesecake, which are all things I enjoy and I knew would match the site’s design. However, despite the fact that I had fun coming up with the visual design of the website, the coding proved to be one of my toughest challenges yet. My minisite can be found here for your viewing pleasure.

One of the elements of coding that I struggled with the most on my second minisite was my attempts to incorporate responsive design into it. I attempted using percentages and the property max-width to make elements of the page (the content div, the header, etc) stretch and grow along with the page, but this sometimes lead to massive distortion of the page was anything other than at maximum computer resolution. I also tried to do this with my drop-down navigation bar, and the result was that it shifts to the right abruptly when the window is not maximized. I was not able to fix these jarring problems in responsive design on this assignment, because I wrestled with them for over six hours and at a certain point, I had to cut my losses. Hopefully I will be able to better implement them in the next assignment.

And although I didn’t struggle very much with the float property during my project, I did run into the problem of my footer not properly falling to the bottom on my “About” pages for Cookies, Cheesecake, and Cupcakes. If I cleared the float, it would default to the left, and if i used the “clear” property, it would no longer be in alignment with the rest of the page. I’m not sure what to do about this in future projects, so it’s clear I still need to learn more about properly floating chunks of information on a page.

Another general problem that I struggled with during this project was just how time-consuming it was. Even though most of my pages share very, very similar elements, editing them so that they all had the correct, distinct information on them took an incredibly long amount of time. Especially when taking into consideration that CSS had to constantly be tweaked to make sure that it looked good on every page. I can only imagine what designing a full website must be like.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s