💻PROJECT #1.2: Stylish Recipes

Overview & Setup

  1. Find your CS1 Project 1.1 repository with your Recipe Blog HTML code.
  2. Open the repository in a Codespace whenever you spend time working on the program, in class or at home.

    ⚠️ Always remember to commit changes after every coding session!

  3. When your project is complete, you do not need to submit anything this time because I already have the links to your Recipe Blog repositories.

Instructions & Requirements

🎨 Remember the Recipe page you created for Project #1.1 to practice the HTML topics? Well, it’s rather plain looking, isn’t it? Let’s fix that by adding some CSS styling to it!

  • How you actually style it is completely open, but you should use the external CSS method (for this practice and moving forward).
  • You should also try to use several of the properties mentioned in the previous section (color, background color, typography properties, etc).
    • Take some time to play around with the various properties to get a feel for what they do. For now, don’t worry at all about making it look good. This is just to practice and get used to writing CSS, not to make something to show off on your resume.
  • We haven’t covered how to use a custom font for the font-family property yet, so for now take a look at CSS Fonts for a list of generic font families to use, and CSS Web Safe Fonts for a list of fonts that are web safe. Web safe means that these are fonts that are installed on basically every computer or device (but be sure to still include a generic font family as a fallback).
  • Apply what you learned about the box model to improve the appearance of your Recipe blog from Project #1.1. Get creative with layouts, colors, and styles to make your page uniquely captivating!