Skip to main content

Assignment 4 - NPM Tailwind Assignment

Weight: 20%

Due:

Instructions

Use tailwindcss to style a web page. You can use the code from a previous assignment or write new code, either is acceptable. Practice using this utility class framework to either recreate the styles that you made in vanilla css or try building content from scratch.

If you use code from a previous assignment, it must be copied into a new repo for this assignment

For this assignment you cannot add tailwind via a cdn, you must set up a tailwind.config.js file.

Resources

Rubric

Review the following categories on how this assignment will be graded.

Tailwind Configuration (5pts)

  • tailwind.config.js file added to project
  • at least the following present in your tailwind config.
    • colors
    • fonts
    • screen size breakpoints
    • spacing
  • assets/css/main.css contains tailwind imports

Layout Styling (5pts)

  • Use of flexbox and/or grid effectively
  • Breakpoints are used on containing elements
  • Design is responsive and mobile first
  • margin, padding, width, and height are all used correctly to enhance your design

Content Styling (5pts)

  • Use of breakpoints on fonts
  • foreground and background images are responsive
  • Use of tailwind default colors and/or your own custom colors
  • hover and active states are set up in a navigation bar and/or on buttons

General Requirements (5pts)

Setup

  • Properly configured package.json
  • node_modules/ added to .gitignore
  • add a tailwind build command to the scripts
  • Project is in a github repo named cpnt201-a5

Documentation

  • Add a README.md file to the root of your project
    • Readme contains:
      • your name
      • course and assignment number
      • link to deployed github page
      • link to github repo
      • attributions to assets

Submission Instructions

  • Submit the zipped folder to brightspace
  • Submit your live page and repo link in the text area of your submission.