Skip to content

9-5-pursuit/lab-intro-to-css

Repository files navigation

Introductory CSS Lab

In this lab, you'll have the opportunity to design a personal webpage. The content already exists -- you just need to style it to the best of your ability!


Lab Setup

Getting started

  1. Fork and clone this repository.

  2. Navigate to the cloned repository's directory on your command line. Then, run the following command:

    npm install
    

    This will install the libraries needed to run the tests.

  3. Open up the repository in VSCode. Follow the instructions below to complete the Lab.

Tests

To run the tests, you can run the following command from the command line. You will need to be in the root directory of your local directory.

npm test

This will open the Cypress testing window, where you can click to run an individual suite of tests or all of the tests at once.

Instructions

To complete the tests in this lab, you will need to add the following styles. If you're unclear about any of the instructions below, remember that you can check the test file to see what exactly is being tested.

  • Change the font of the name header to be 'Fantasy' and purple.
  • Remove the bullet points from your unordered list of links.
  • Change the font-weight in your ordered list to bold.
  • Center all li elements on the page.
  • Give your li elements a 1px red border with curved corners.
  • Change the font color of your li elements to blue and the background color to a light pink.
  • All images should be 200 pixels tall.
  • Change all font in the body to sans-serif.
  • Underline all h3 elements.
  • All p tags should have 20 pixels of padding on the top and the bottom - not on the sides.
  • h1 tags should have a 30px font size.
  • Lists should have 30px of padding on the left.

After you've completed these tasks, continue styling your page to make it look unique. You should add at least ten additional declarations on top of the ones you've made above.

An example page.

Releases

No releases published

Packages

No packages published