In this lab, you'll have the opportunity to design a student newsletter. The content already exists -- you just need to style it to the best of your ability!
-
Fork and clone this repository.
-
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.
-
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
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.
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.
Hint: while styling, you can use the following to help see your elements and understand their overall placement and size:
* {
border: 1px solid gold;
}
- Set all paragraph text to have a font of
sans-serif
. - Set all heading text to have a font of
serif
. - Set all heading text to be centered.
- Set all anchor elements to have no text decoration.
- Set all anchor elements to have a color of
#4242EA
. - Set all unordered lists to have no list-style.
- Set all
span
elements inside the footer to have afont-weight
of700
. - Set all paragraph text inside the element with the class of
weather
to have a font size of40px
. - Set all articles inside the
.above-the-fold
element to have adisplay
value ofinline-block
. - Set the
.weather
element to have awidth
of300px
. - Set the
.weather
element to have a2px gray border
on all sides. - Set the
.breaking-news
element to have a top/down padding of0px
and a left/right padding of30px
. - Set the image inside of the
.breaking-news
element to have awidth
of200px
. - Set all articles inside the element with the class of
.click-bait
to have adisplay
ofinline-block
. - Set all articles inside the element with the class of
.click-bait
to have awidth
of250px
. - Set all articles inside the element with the class of
.click-bait
to have16px
of margin and padding on all sides. - Set all articles inside the element with the class of
.click-bait
to havebox-sizing
set toborder-box
. - Set all articles inside the element with the class of
.below-the-fold
to have adisplay
ofinline-block
. - Set the image inside the element with the class of
.below-the-fold
to have adisplay
ofinline-block
. - Set the image inside the element with the class of
.below-the-fold
to have16px
of margin and padding on all sides. - Set the image inside the element with the class of
.below-the-fold
to have awidth
of200px
. - Set the div inside the element with the class of
.below-the-fold
to have awidth
of500px
.
Once your complete with the above tasks, your page should look something like the image below.
Once you've completed these tasks, continue to style your page. Consider adding specific styles to all list items, only list items under the "Libraries" heading, the introductory paragraph, and the "Hardest Bug So Far" section.
Better alignment of inline elements. There are a few ways to approach this. Display Flex, and related properties, are recommended