All solutions

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

• This was the first time I have ever worked with CSS Grid and I am really pleased with the result. I also managed to combine Flex Property with the Grid set up, so below 1200px I have a flex set up and above that it changes to the grid as specified.

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

• As mentioned above this was the first time I worked with grid, so I had to look up the correlating properties regularly. This was also my first Junior challenge and a decent step up from the challenges I completed so for.

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

• Any suggestions related to my approach, readability and structure or any other aspects you see that I could approve on or think I might be better of doing in the future are welcome. :D Thaks

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

• I am getting better at using CSS selectors. Feeling like I am making progress

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

• I used a mobile first approach using flex box so I used flex-direction: column and then at @media (min-width: 1100px) changed to flex-direction: row.
• It felt like the column structure made the screen look somewhat empty while the width was > 800px.
• I moved to @media(min-width: 800px) but added flex-wrap: wrap which let the last card move to a new row while keeping the others on one line so the screen doesn't feel empty when changing from column to row structure (or the other way around)

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

• Any feedback and ideas for improvement are welcome - really helps a lot :D

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

-This was the first time I worked with 'em' and 'rem' as units and took a mobile first approach and I think I came quite close to what it's supposed to look like

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

• I struggled to change the picture at different screen sizes
• After a while I found a video by Web Dev Simplified that helped me out a lot https://www.youtube.com/watch?v=fp9eVtkQ4EA and after some trial and error I figured out a solution that works

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

• Any advice on better understanding 'em' , 'rem' and when to use which one would be appreciated as well as any improvements related to structure of my code

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

-Done without the Figma files

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

This was the first time I worked with and had to style lists and tables. I referenced MDN a lot to work through the challenge.

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

Any feedback and ideas for improvement are appreciated.

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

That I managed to implement transitions for the hover effect for the first time.

transition: color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;

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

-Done without the Figma Files

-I used Flex Box to center the different elements. When it came to the elements in the card, or link profile, I used:

flex-direction: column;
justify-content: space-between; 
align-items: center;

Setting justify-content: space-between; made it difficult to get the spacing right between the different elements. So I removed this line and added margin-top: to the different elements and was able to come close to what it was supposed to look like.

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

Is there a way I could have kept justify-content: space-between and then adjusted the margins? My original thought was to use the justify-content: space-between property to ensure that the picture was at the top of the card and the actual links (I grouped these together in a div) at the bottom and to then adjust the other spaces. I ended up playing around with margin-top set to negative values which seemed odd which is why I ended up the the approach I explained above.

-Basic HTML layout was

-Basic CSS

.linksProfile { 
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    padding: 40px 30px 39px 30px;
}

I ended up commenting out justify-content because that seemed to be what made it impossible for me to get the remaining spaces between the elements right. Then I started adding margin-top to the individual elements until I came close to the layout.

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

Successfully adding 2 Breakpoints

• One at 500px
• Another at 365px

Next time I would try to start with the smaller Screen Sizes first and work my way up to the larger screen sizes.

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

I had difficulty sizing the image for the smaller screen sizes. I solved this by using

position: relative;
top: px;
left: px;

in combination with setting the width of the image to over 100%.

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

None in specific - but any suggestions are welcome.

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

This was the first Challenge I ever completed on my own.

I most proud of setting up my machine, connecting to and working with GitHub and managing to complete the task set without a tutorial or direct help.

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

The most difficult part was understanding how to use the :root functionality as to avoid having to write out the color codes each time. I found an article on freeCodeCamp where someone had the same issue/question which helped me better understand and adjust my code.

Next the "card" seemed to have a shadow on the bottom border which I had difficulty re creating. I used a combination of the MDN explanations of box-shadow and trial and error to reach a solution that seemed to look good.

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

I still struggle to fully understand how to use box-shadow. In my solution I used the syntax:

box-shadow: 0px 4px 16px 0.1px var(--project-grayishblue);

While I understand that the first two inputs move the shadow on the x/y axis, the third and fourth input I don't fully understand.

I would have liked to adjust the shadow so that there is less on the sides and the opacity is even lower so that the shadow would be more subtle.

In the attempted solution I did not access the Figma files.