Skip to content

Latest commit

 

History

History
121 lines (83 loc) · 4.32 KB

README.md

File metadata and controls

121 lines (83 loc) · 4.32 KB

Assignment - CSS 2

Configuration steps

  • Create a new repository based on repository from CSS 1
  • Nothing much changes here from

Assignment goal

The goal of this assignment is to make your site more responsive, using media queries and other techniques, as well as to add a few elements to your application.

Formal requirements

Your application should contain the following breakpoints, with adjustments listed below:

IMPORTANT Measurements such as font height or weight, paddings, margins should be adjusted for each breakpoint. I leave these adjustments to your liking, as each project differs from others.

Listed below are only CHANGES - if something is not mentioned for a particular breakpoint, it should remain as-is (excluding properties mentioned by important notice above)

  • 320px-768px
    • precisely 1 card per row
      • cards should now be horizontal
        • image should be on the left side
        • content and button remain in vertical orientation, as previously
    • Header navigation link list should be vertical instead of horizontal
    • Footer link lists should now be oriented vertically, one below the other
    • OPTIONAL Nav menu should become a hamburger menu - you can use some JS for this
    • OPTIONAL Should contain a floating button in bottom-right corner of the screen that shows the left panel mentioned in further steps, but on the right-hand side instead
  • 769px-1200px
    • precisely 3 cards per row
    • Should contain a floating panel on the left-hand side of the screen, containing 4-5 buttons
  • > 1200px
    • precisely 3 cards per row
      • cards should now be horizontal
        • image should be on the right side
        • content and button remain in vertical orientation, as previously
      • cards, along with text, should accommodate very wide screens
    • Should contain a floating panel on the left-hand side of the screen, containing 4-5 buttons
  • OPTIONAL If you feel comfortable with it, refactor your CSS to SASS
  • OPTIONAL Make it so that when user enters print mode for your app, only the card list gets printed

Assignment - CSS 1

Configuration steps

  • Fork this repository
  • Clone your forked copy
  • Run yarn install or similar to get this project's packages
  • Configure your IDE to run Prettier with settings provided
    • Note: make sure Prettier runs for CSS and HTML, this might be disabled by default in Webstorm

Please remember

  • Use consistent commit messages https://www.conventionalcommits.org/en/v1.0.0/
  • (Probably) the best source for technical information regarding this task: https://developer.mozilla.org/en-US/
  • If you're hopelessly stuck for more than 20 or so minutes, don't hesitate to contact me
  • HTML matters in this assignment, too. Try to use an appropriate tag for its function - f.e. <header> for a header and <ul> or <ol> for lists
  • Use your best stylistic judgment when it comes to creating elements described in formal requirements. Descriptions there are on the vague side on purpose - don't be afraid to make it pretty
  • Anywhere in this project where a link is present - it does not have to lead anywhere, just be there for presentational purpose
  • For any long-form text elements, use lorem ipsum
  • Interactive elements should have hover and other applicable modifiers also styled
  • Anywhere an image is mentioned, you can use a solid color or a gradient
  • Styles should not be in a <style> tag, but in their own file

Assignment goal

The goal of this assignment is to create a simple page using CSS and HTML that contains a header, a footer, and some content, using flexbox and BEM.

Formal requirements

The page should contain the following elements:

  • Header
    • Navigation bar
      • Should contain 3-5 links
    • Title image
      • HTML element with text styled to be in the middle of this image - your site name
  • Main content
    • OPTIONAL TASK: use grid instead of flex for this part
    • 11 cards, evenly distributed maximum 3 per row. Cards should consist of:
      • Card header image
      • Card title
      • Card content - a paragraph of text
      • "Details" button (should not do anything at this time)
  • Footer
    • Two columns, 2-4 links each, oriented vertically