All solutions

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

This time I tried to use semantic tags like , , . I also put `display: grid;` & `place-content: center;`, `min-height: 100vh;` on the body for the centring purpose. I've learned how to use & `` tags for images with 2 different file sources.

Challenge was rather easy, so I'm gaining confidence with projects like that. So let's go to the next one!

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

The main problem was the image formatting. I used Kevin Powell solution with and tags, which is alternative to standard solution with two different background-images from different sources.

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

I've learnt to better plan and organise my code. I'm proud that I can easily find info especially about spacing and sizes of the divs in Figma file.

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

Biggest challenge was the mobile version, especially spacing ordered list. There was a lot of media queries on the mobile, but that's the cost of the desktop-first approach, which I prefer.

Mobile version media queries:

@media (max-width: 375px) {
	.container {
		max-width: 100%;
		margin: 0;
	}
	.card {
		margin-block: 0;
		border-radius: 0;
		padding: 0;
		gap: 0;
	}

	.top-image {
		height: 17.1rem;
		border-radius: 0;
	}

	.text-content {
		padding: 4rem 3.2rem;
	}

	h1 {
		font-size: 3.6rem;
	}

	.attribution {
		margin-top: 4rem;
	}

	.instructions ol {
		gap: 0.8rem;
	}

	.instructions span {
		padding-left: 1.6rem;
	}

	ol {
		list-style-position: outside;
		margin-left: 1rem;
	}

	li {
		padding-left: 2.4rem;
	}
}

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

I'm not sure margin-left: 1rem; on the mobile ol is correct, when I use list-style-position: outside; but it works.

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

I'm proud it didn't take much time to do this one. I code faster with every single challenge. Also I am better and better with reading infos from figma files.

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

The main problem and challenge for me is to motivate myself to do systematic work. I need to do it on consistant basis not only from time to time.

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

I don't know what can I do better in this one.

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

I've learned using more information about sizes and spaces from figma file. I used it and planned my code better - for example using flexbox with gaps for spacing elements.

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

The most challenging thing was making perfect yellow label "Learning", because when I used flexbox it's turned into block element even when I changed display property do "inline-block". Propably display wasn't problematic but default flexbox behavior which makes all content take all free space like block elements do. I just put that label word into span and it works fine.

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

I don't know if it was necessary to use "span" for a label element. Maybe there is another way to make horizontal padding works while being flexbox item.

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

I'm proud it was easy challenge and I didn't have any problems with working on the Figma file. I also wrote the readme.md file for the first time. I tried to be pixel perfect and I'm very close to achieve that.

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

I didn't remember how to upload project to GitHub, but after recalling one video from the course (MMC School - Kurs Tworzenia Stron WWW cz.3) I've done it easily. I wanted to make one repository with multiple projects, but after short research I've decided it's too hard and i don't want confilcts in my GitHub, so maybe I will try it later in the future after gaining more experience, especially with Git. In my first solution spacing above the text wasn't perfect. I adjusted it by adding margin-top to the title and a little more line-hight and also letter spacing to the paragraph. I also changed class names to use BEM system.

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

I don't know what can I do more to make my solution better. Let's jump to the next one.