Skip to content
OverviewSolutions
3
Comments
2
LorenzoSerra1
@LorenzoSerra1

All comments

  • lij110397•230
    @lij110397Submitted 8 months ago
    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?

    social- link-profile-component

    2
    LorenzoSerra1•50
    @LorenzoSerra1Posted 8 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
  • Jason Delgado•40
    @delgado-jasonSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that I got this project done quickly without compromising the quality.

    One thing i would do differently; for this project I wrote the css initially for the desktop version of the component. I then later went back and changed some of my css rules to make the project look good on all devices.

    In the future, I will try to write my css rules with responsiveness in mind from the get-go. Maybe start with a "mobile-first" codebase.

    What challenges did you encounter, and how did you overcome them?

    A few challenges I encountered was:

    • Trying to decide if I should import the google font through the HTML file or the CSS file.
    • Ways to get exact measurements in the Figma app

    For the google font, I just chose to put it in a link attribute on the index.html page. (note to self: I need to look more into doing it the CSS route. It seems more efficient this way.)

    As far as the Figma app goes, a lot of the measurements were there, I just had to do some digging. I resolved issues finding margin and padding measurements by sizing up a square and reading the measurements that way.. Seems inefficient, but it works.

    What specific areas of your project would you like help with?

    I wouldn't mind other people sharing what method they prefer to import fonts with. I also wouldn't mind finding out more efficient ways to get measurements in the Figma app besides sizing up squares and using the ruler.

    For this challenge, I used flexbox and natural responsiveness

    3
    LorenzoSerra1•50
    @LorenzoSerra1Posted 8 months ago

    The proposed solution seems well done, the card and the QR code image are ok. I would suggest changing the font, as it would look like the wrong one and is not the same as the design. It was probably not called correctly in the css. For the rest everything seems ok

    Marked as helpful
    1