DTC 355

Project 2

Recipe Website

In the next few weeks, using HTML and CSS skills introduced so far in this class, you will create a one-page responsive website for a Recipe. You can use a family recipe, an historical recipe, a recipe you find on the web (that you credit), or one you make up. You are welcome to use AI tools for content, but the coding should be your own hand-written HTML and CSS. The focus of this project is effective visual design and hierarchy and responsive design.


Duration: 3 weeks
Phase 1: Design Concept
  • Create a new design file in Figma named 'lastname-firstname-recipe'.
  • In that one design file, create at least 2 designs for your recipe project—mobile and desktop.
  • If necessary, you may add a third design for tablet.
  • The design must have:
    • A custom font
    • A clearly defined color palette tested for accessibility
    • Clear visual structure and hierarchy
    • Application of design principles covered in class (alignment, proximity, repitition, etc.)
    • At least 3 images
  • Your recipe content must include:
    • Header/Hero Unit
    • Ingredients
    • Data such as cook time, tools, nutrition, etc.
    • Steps or instructions
    • Other information / background information
    • A footer
  • You should apply all concepts learned in the class so far.
  • Remember you will be graded on the quality of your design for this project.
  • Create a publicly shareable Figma link and paste it into Slack turn-in.
Phase 2: HTML and Responsive Structure

Write the HTML and CSS needed for your project's basic responsive structure. Your grade in this assignment will be based on your understanding of the fundamentals HTML (semantic markup, folder structure), responsive design (responsive units, media queries), and CSS flex or grid for layout.

  • Create a project folder called 'recipe'
  • Create your file organization: you should have an index.html file, a css folder, and an img folder.
  • Using semantic HTML, write the HTML needed for your recipe design.
  • Apply the neccesary CSS media queries to make the basic structure of your website is responsive.
  • Note: Your site should make use of flex or grid for this assignment.
  • Add different colored borders in the CSS so you can clearly see the HTML's structure.
  • Push your changes to GitHub.
  • Upload your project to the server via FTP.
  • Share your project URL in the Slack turn-in thread.
Phase 3: CSS and Applied Design

Finalize your project, adding all CSS and incorporating feedback from previous phases. Your grade will be determined by error-free code, responsive design, and effective execution.

  • You must have an external CSS file for both your reset and your site styles.
  • Your site should be fully responsive on all screen sizes, using flex or grid.
  • You should have at least 1 custom font.
  • Your site should look as close as possible to your intended design.
  • Your CSS must be clean, formatted, and organized.
  • Push your changes to GitHub.
  • Upload your final recipe project to your server space.
  • Paste the project URL in the Slack turn-in thread.