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 installThis 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
spanelements inside the footer to have afont-weightof700. - Set all paragraph text inside the element with the class of
weatherto have a font size of40px. - Set all articles inside the
.above-the-foldelement to have adisplayvalue ofinline-block. - Set the
.weatherelement to have awidthof300px. - Set the
.weatherelement to have a2px gray borderon all sides. - Set the
.breaking-newselement to have a top/down padding of0pxand a left/right padding of30px. - Set the image inside of the
.breaking-newselement to have awidthof200px. - Set all articles inside the element with the class of
.click-baitto have adisplayofinline-block. - Set all articles inside the element with the class of
.click-baitto have awidthof250px. - Set all articles inside the element with the class of
.click-baitto have16pxof margin and padding on all sides. - Set all articles inside the element with the class of
.click-baitto havebox-sizingset toborder-box. - Set all articles inside the element with the class of
.below-the-foldto have adisplayofinline-block. - Set the image inside the element with the class of
.below-the-foldto have adisplayofinline-block. - Set the image inside the element with the class of
.below-the-foldto have16pxof margin and padding on all sides. - Set the image inside the element with the class of
.below-the-foldto have awidthof200px. - Set the div inside the element with the class of
.below-the-foldto have awidthof500px.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent