CSS and Cake: Making a (Mini) Dessert Site

My site features dessert recipes, including cakes, cookies, and pies. Thus, I wanted to create a simple, soft, and sweet site that would suit a dessert site. Many sites that feature dessert recipes use pastel colors, thus this site’s goal was to emulate that type of style with similar color and font choices. Using the eye dropper Google Chrome extension, different pastel colors were chosen from different baking related sites. Cursive fonts like the Google fonts Niconne and Berkshire Swash were used because they seemed to fit the sweetstyle the site is supposed to give off.  Berkshire Swash is even described as “an alluring semi-sweet typestyle with a bold yet feminine flair to it” by Google Fonts. Therefore, they seemed appropriate for the style being created. The Google font Coustard was also used because it seemed like a simple font that could balance out the more stylish, cursive typefaces. Finally, Josefin Sans was used for the main recipe text to further balance out the fanciful title typefaces, as well as to incorporate it as a workhorse sans-serif typeface. I stylized my menus with a main horizontal navigation bar at the top of my site for easy access to overview recipe pages, as well as including a navigation sidebar featuring the recipes within each broad category. Most website use a sidebar for their recipe categories if they don’t use a separate recipe page, so this seemed like the ideal type of navigation for this small site.

screenshot of Joys of Dessert site

Those hoping to reach people online can do so through simple web design and learning CSS/HTML5. Simple enough that it can be learned at home, may coders being self-taught, it can provide people with skills that can help them connect with people online via their own sites or by designing for others. There also seem to be many new CSS features that are becoming compatible over a wide range of devices, thus web developers can do more things and reach more people. There are now advanced selectors that allow you to have cleaner layouts and better stylesheets. As mentioned before, web safe fonts like Google fonts or typekit are also a great CSS addition that allow you to safely use lovely fonts on your sites.

There are many great resources out there for people who want to learn CSS/HTML5 such as:

  • The Eye Dropper extension on Google Chrome that allows you to get hex color codes off of various websites so that you can use the same colors for your own projects. It even saves your color history!
  • The site Text Fixer allows you to convert regular text to HTML paragraphs. It even converts fractions for you so they appear like this ½ instead of like this 1/2.
  • Listify allows you to convert text to lists, such as ordered or unordered lists.
  • w3schools also has great tutorials for HTML5 and CSS which show you the various tags used and how you can apply CSS to stylize them.
  • If you want to validate you code and make sure it follows web standards, you can use W3C’s markup validation service which will tell you whether or not your HTML is following the rules of that coding language.
Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s