All solutions

What are you most proud of, and what would you do differently next time?

I am most proud of being able to incorporate both mobile and desktop versions, with the slightly different layouts for each screen size. I tried to do desktop first in this challenge. I would want to try to do mobile first in the next challenge.

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

Trying to figure out how to use the landscape or portrait image when screen size is different was difficult. Had to try out a bunch of things before hand before finding the solution that worked.

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

Quite a few things were challenging. Tried using border-bottom to put lines under each tag but it didn't work. What did work was putting lines under the tag, so that's what I did, and then removed the lines under the last row. Had trouble figuring out why my page wouldn't center horizontally. Finally figured it out. My max-width was in the body, not the .container. After switching from the body to the .container, page was successfully able to center horizontally. Then had to figure out how to change the layout for screen sizes, as the mobile and desktop versions were slightly different. Unlike the last few challenges, the desktop and mobile versions were the same. I decided to add an extra div so that the image could take up the whole width of the screen. But when switching from small to large and vice versa, the image isn't smooth. Also had to put @media at the very end, or else it wouldn't work.

What are you most proud of, and what would you do differently next time?

Not particularly proud of anything in the challenge.

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

I initially wanted to use grid to display the profile, but changed to flex because I wasn't sure how to center the texts with grid. Same with the social links. I just decided to use the break tag.

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

Is there a better way to format the tags instead of using the break tag? I know some tags automatically start on the next line, but when trying to use semantic html, I'm not too sure.

What are you most proud of, and what would you do differently next time?

I am proud that I was able to implement the font-family that I was trying in the QR Code challenge.

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

Trying to fit the contents of the card to look the same as the examples.

• don't know if I got this one tbh. Also the spacing between each element in the card.
• split into two different grid-template-area. Couldn't quite figure out how to centre the card vertically. Same as the previous challenge. To centre the card vertically, I used transform: translateY.

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

Still not sure if I'm using the right way to centre the card vertically. I know the justify-content: centre is working for the horizontal axis, but when trying to use align-content for the parent element or align-self for the card element itself, there is no change.

What are you most proud of, and what would you do differently next time?

I am most proud of completing this challenge as it was my first challenge.

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

Most things turned out the way I wanted. There were a few things that had me doing a trial an error.

1. Having the attribution behind the QR code. I kept switching between flex and grid display. In the end I stuck with flex and used position: absolute so the attribution appears at the very bottom of the screen.
2. The font url that was in the style guide didn't work. I tried using @font-family too, but nothing seemed to work. In the end I searched the font, and copied and pasted the code from google fonts and pasted it into my html. That seemed to do the trick.

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

If there are any suggestions to cut down or change my code, I would appreciate it. Or if there are better ways to code certain formats in CSS for example. Tips/tricks developers would use.