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
settingstab on GitHub, then choosePagesfrom the menu. Configure theBuild and Deploymentto have aSourceofDeploy from a branchand select themainbranch for deployment. Deployments can take a few minutes, so get started on the lab, and then be sure to check the deployment after you have made a few commits. -
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
To complete 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 provided image to see what exactly the appearance should be.
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