Skip to main content

HW2 - CSS

Introduction​

CSS is important because it allows web designers, developer, bloggers, and so forth to make our websites unique and attractive. CSS gives us the opportunity to play with a page layout, adjust colors and fonts, add effects to images, etc.

Part 0: Read the Notes​

Make sure you read the Introductory CSS reading before getting started on this homework. The Advanced CSS reading will also be very useful.

Your Tasks For This Assignment​

  1. Recreate four flags from various countries using your new knowledge of HTML and CSS.
  2. Given an unstyled HTML file, add CSS to it accordingly to make it match an image.

Task One: Flags of the World​

1. Set up your file structure​

2. Skeleton Code Walkthrough​

HTML File

  • All flags are organized inside the insideborder div.
    • The insideborder is a flexbox with a flex-direction column.
  • We have provided the Poland flag as an example
    <div class="flag">
      <div class="white twovert"></div>
      <div class="red twovert"></div>
    </div>
    • flag is a container that has a width of 500px & a height of 300px
    • twovert is a class that has 50% height, the class creates the upper & lower division of the flagg.
    • red and white are two classes that provide the background color to the divisions.

Task Two: Season Your Site​

Required​

  1. Inside the HTML document, you need to recreate and display the following flags:

    1. Luxembourg
    2. Thailand
    3. Romania
    4. Mexico Hint: Grab the Eagle using an image tag
      • Here's the eagle image: flag_eagle.png
    5. Greece Hint: you need a LOT OF flexboxs

Optional​

These are some challenges for you, they are entirely optional.

  1. South Africa

  2. Seychelles

  3. North Macedonia

  4. Finland Hint: Google CSS properties that would allow you to rotate or superimpose objects

  5. In your CSS stylesheet, make sure to create and reuse classes (a lot of flags share similarities). Within your stylesheet, you should use at least 5 classes and 2 IDs, although you will certainly use more than that. In addition, use the wildcard operator and at least 2 tag selectors (h1, p, etc…)

    1. Don't stress too much on colors or sizes, A close enough will work just as fine!
    2. Remember that google is your friend and that there is a multitude of CSS properties out there.

  6. Don't forget to enjoy your creative freedom and make the website as visually pleasing as you can! Aim to use as many different CSS properties as possible, spanning as many types or “buckets” as you can. Feel free to explore and use any interesting CSS properties!

  • Bonus Challenge: try to find a cool CSS property that we haven't seen before!

Submission​

After you finish, push these changes onto your WDB-education repository.

Turn your code into a GitHub pages link, and upload the link to your page to Gradescope. The Gradescope can be found on the syllabus, and instructions for creating a GitHub page link can be found at the end of homework 1.

Helpful Resources​

CSS Tutorial

Getting started with CSS

Contributors