lij110397• 230
@lij110397
Submitted
What are you most proud of, and what would you do differently next time?
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==
main {
/* Place main in the middle of body*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
What challenges did you encounter, and how did you overcome them?
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?
What specific areas of your project would you like help with?
1. Is there better way to management all margins and paddings of layouts?
2. How to handle margin collapse?
