Design comparison
Solution retrospective
1. More familiar with building html and css files in the following process:
- Setup Github remote and local repository
echo "# git-test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com//git-test.git
git push -u origin main
- Check design files and list all elements included
- Completed html files which includes all listed elements
- Completed style file in order of root color, font import, global color and font, size and layout
- Make css more responsive by using "rem/em" unit, flex/grid layout
- Check the website in browser starting from mobile size; adjust according to the screen scale
- Check whether it meets WCAG standards
- Upload to Github and Github Page
- Edit README.md file
- Upload README.md file and submit
2. How to place the element in the middle of its parent container
body{ width: 100vw; display: flex; justify-content: center; align-items: center; }
==if this is not working, add following code==
What challenges did you encounter, and how did you overcome them?main { /* Place main in the middle of body*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
About margin management?
In the previous task, I found margin management confusing. In this task, I only used margin-bottom attribute instead of setting all different paddings and margins.
- What is good about this way? If I need to change the margin between two elements, I don't need to change both of the margin. I just need to change one margin-bottom to adjust the marin. The css file will be more neat and controllable.
- About margin collapse Margin collapse should be avoided usually as it may cause unexpected collapse and unexpected layout. According to most of lessons, it occurs between block elements in the same level or between the last element and its parent element. However, in reality, I just never see margin collapse happens?
1. Is there better way to management all margins and paddings of layouts?
2. How to handle margin collapse?
Community feedback
- @scamgiPosted 7 months ago
Hey @ lij110397
I wanted to say to you that it's right the way you center the div. There's also the
display: flexbox
method if you wanna try.I don't know if the margin collapse is actually a bad thing.
I wanted to add that I think you added too much code for managing the font. You can do this:
- go to
- copy and paste this code:
.html { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "slnt" 0; }
- then when you wanna select a different weight, you write:
.class { font-weight: 700; }
And it's done.
Marked as helpful0@lij110397Posted 7 months agoThanks for your detailed reply! I will learn from it!@scamgi
0 - @LorenzoSerra1Posted 7 months ago
Congratulations, the result is definitely very faithful. The writing containing the name "Jessica Randall" would need to be enlarged. For the rest everything is perfect
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord