Tips about the best implementation of the right breakpoints and relative units (should I use them more or just for specific purposes?)
Optimizing my code. Sometimes I still struggle with height:100% vs height: 100vh.
I'm open to any suggestion ;)
As for this one, I think I don't need any help because it was similar to the previous one.
Code optimization (when Flexbox should NOT be used, mistakes on tags usage)
Code optimization (when Flexbox should NOT be used, mistakes on tags usage)
made this with love
What challenges did you encounter, and how did you overcome them?I'm kind of skeptical on doing the mobile first, so I still did desktop first and it took a lot of changes in media query is this ok? please please check my code and recommend a better way thank you!
What specific areas of your project would you like help with?Did you do mobile first? how did you do it?
Honestly, I'm still struggling too with the mobile-first approach. I still find the other way (desktop first) easier for building websites from scratch. I took this exercise as an attempt to get more familiar with it. On the other hand, consider this: If you stick to the mobile-first approach sometimes you'll be able to save some time and effort (cause desktop versions of websites are not always required nowadays). This is not true if you stick to the desktop-first approach ;)
I would try defining colours and font-sizes at the start of the document. I feel like my code is all over the place and a bit repetitive.
What challenges did you encounter, and how did you overcome them?I struggled with margins/padding when displaying image in mobile view. I overcame this issue with just displaying image twice and adding a display none on second image.
There probably was a much simpler way to do it but I could not figure out how to do it. I do know there is a element we could use but from my understanding that's best to display a different image based on different display viewports.
What specific areas of your project would you like help with?I would like to know best way to approach styling the image element for desktop/mobile view.
This looks like a great job. Well done!
Really aesthetic looking card with hover effects.
What challenges did you encounter, and how did you overcome them?More info on box-shadow and hover actions and transitions.
What specific areas of your project would you like help with?More info on box-shadow and hover actions and transitions.
You did a good job, well done ;) Also remember that part of this work is to be able to replicate exactly the layouts that the designers will give you. I find it a bit boring too sometimes, but I try to focus on that as an exercise to sharpen my skills :)
Good job. Copying the design in a very detailed way is not as easy as it may look. Remember to check whether the zoom of your page is different than 100% cause sometimes we start copying layouts without realizing that the zoom (and so the look of the page) is different than the real one.
I use Flex to auto-center the content so that we can change the window size.
What challenges did you encounter, and how did you overcome them?I want to export an image from the Figma file, but I don't know how. I searched on Google and figured it out.
What specific areas of your project would you like help with?I want to know how to use CSS more effectively.
Try to give a look the the use of <h> tags. I'm not sure you should use a <h4> instead of a <h1> or <h2> tag since it's the only title in this page. Great job btw. Also, in order to optimize your css code you could create a class with flexbox properties and apply it to all the tags that need flexbox instead of repeating every time that piece of code.
