This was actually the first challenge that I took on Frontend Mentor.
I can tell you struggled big time with the layouts. Hahahah!
Like it took me 3 days to figure it out.
But now I'm more confident with it and the other challenges felt easy afterwards.
I guess good practice makes perfect?
I am proud of what I have achieved so far I was able to use:: before and:: after methods at least now I understand what and how it is been used for and when to apply it . I was able to learnt tooltip in the design and it made lots of sense.
What challenges did you encounter, and how did you overcome them?I encountered lots of challenge on javascript because I didn't use jquery to answer I did make enquires on js sheet to call on things when using add event listener. since I used bootstrap positioning outside a card was kind of wired at first but it beginning to make lots of sense now.
What specific areas of your project would you like help with?z-index on my share btn isn't displaying
Hey, the solution looks good, here are a few things that you can improve.
The card does not need a border. Since the background color is different and the card is white, the card is already separated from the background, You can use a box-shadow to make it look elevated.
Instead of using z-index and using the same button, just copy and use that button on the component.
Try to focus a bit more on font-size, padding. Also try to write without using any framework at first, it'll help you a lot.
Made with:
It was completely horrible, I need to learn the fundamentals of CSS better
What challenges did you encounter, and how did you overcome them?The most difficult was setting the list bulletpoints and numbers which I couldn't do so I gave up.
Also sizing anything was horrible and the responsive is inconsistent.
What specific areas of your project would you like help with?Overall review of my weaknesses, why do I think my code is a pile of garbage.
Why it feels like I don't know CSS.
Hey your solution is good, here are a few things that you can change/improve:
<b> tag as it is not semantic HTML.object-fit: cover or object-fit:contain property on the image element to fit the image inside the container.preperation-block__header class and a few other elements.Other than this, your solution is actually good
display grid
What challenges did you encounter, and how did you overcome them?display grid
What specific areas of your project would you like help with?display grid
Good work, here are a few things you can improve,
Everything else looks good
Not much. I took way too long for such a simple result.
What challenges did you encounter, and how did you overcome them?I was not sure the best option to place the tiles between 2 lines.
What specific areas of your project would you like help with?n/a
Good work and the site looks great, some things that can be improved are,
Iam proud of my project and make my project better next time.
What challenges did you encounter, and how did you overcome them?one of the challenges was change image based on screen size.
What specific areas of your project would you like help with?in all of the project.
Good work on completing the challenge. Here are a few things that I would improve.
<picture class="product-img"> <source srcset="images/image-product-desktop.jpg" media="(min-width: 500px)" /> <source srcset="images/image-product-mobile.jpg" media="(max-width: 500px)" /> <img src="images/image-product-mobile.jpg" alt="Perfume bottle" /> </picture> I feel happy to have completed another challenge.
What challenges did you encounter, and how did you overcome them?I had some problems with the nutrition table but it's just a matter of doing a little research.
What specific areas of your project would you like help with?Any help is welcome.
Looks great, here are a few things you can improve:
I feel I did a good job. However, there is always room for improvement
What challenges did you encounter, and how did you overcome them?For the most part, it was easy to implement. I did almost forget to make the buttons active
What specific areas of your project would you like help with?Im pretty happy with it but any advice is welcome
You component looks good, here are a few improvements you could make:
height:100vh, always try to use min-height:100vh.<ul><li><a href="">Github</a>...</li></ul>font-weight: bold but it is not applied because you are trying to apply font-weight property to a div element which does not work, if you had used something like <p> or <a> element, it would have worked.I am proud of that I did not expected that I can complete this task but I have completed it with such basic knowledge of HTML and CSS.
What challenges did you encounter, and how did you overcome them?As I am beginner I got problem while making it responsive I got solution from simple google search.
What specific areas of your project would you like help with?I need help for learning how to make responsive components
Good work, you can improve it by making some changes like,
