Looking to hire developers?
@wcyin9
@Mitko90
Submitted
This is my first page solution in a while.
I've done all the components but somehow I don't feel comfortable enough to tackle the landing pages yet.
That's why I played with this. Nothing serious, I was aiming for as close to the design as possible. That's why my CSS is all over the place.
These days I'll do it again, this time normally and maybe I'll finally do mobile first.
Hello there, great job on finishing the challenge! It looks incredible, keep up the great work!
There are two areas I would like to comment on:
There's a lack of :hover state on the buttons. This may be due to lacking access to the figma design, so it's absolutely not an issue, and is easily fixable.
The footer overlay looks different from the design given. This is due to the fact that the footer image lacks opacity changes, and you used an overlay for the blue color. There are multiple approaches that are valid for the footer. The approach I'll give you below is one of many, and it can just serve as an example/reference point:
I used picture tag with source tag in html for responsive purposes, as it works with media query to automatically change images upon different screen sizes. It eliminates the need to add extra code in CSS.
<picture>
for laptop dimensions:
<source srcset="assets/desktop/image-footer.jpg" media="(min-width: 850px)">
for tablet dimensions:
<source srcset="assets/tablet/image-footer.jpg" media="(min-width: 635px)">
for mobile dimensions using mobile first approach:
<img class="footerbg" src="assets/mobile/image-footer.jpg" alt="chanel perfume">
</picture>
Next, in CSS I targeted the .footerbg class that I gave to the image to give it an opacity of 0.1045, which was given in the Figma file, and position: absolute;. Last, I targeted the footer selector in CSS to give it a background-color: ##4D96A9 ;. This will make the result look exactly like the one given in the design. The reason this works is because the image itself is on top of the footer. By giving it an opacity of 0.1045, it will let the blue color below it seep through.
Hope this helped!
Marked as helpful
@Shivanshvohra
Submitted
What are you most proud of, and what would you do differently next time?
this seemed pretty easy
What challenges did you encounter, and how did you overcome them?
unable to centre the outerbox to the centre of the page vertically.and couldnt apply focus element rather used hover
What specific areas of your project would you like help with?
how to apply focus property to anything except an input label and how to centre the outerbox on the weboage verticaaly align items didnt work
Hi there!
You can make it align vertically by adding the code below to the body selector in css:
display: flex;
justify-content: center;
align-items: center;
In addition, I recommend using tags such as main in your html instead of relying on div. This is important for ARIA landmarks, which is helpful for screen readers to know where they are on the page. You can substitute div class="outerbox" to simply main.
Hope this was helpful!
@woohyodong
Submitted
What are you most proud of, and what would you do differently next time?
:)
What challenges did you encounter, and how did you overcome them?
:)
What specific areas of your project would you like help with?
:)
Hi there, really great work!
One thing I would suggest is implementing main in your html code for ARIA landmark purposes. It would really help the screen readers know where they are on the page. There's also no need to give header a class of header since you can just target header selector directly in CSS.
In terms of headings, it's best practice to use h1 to h6 in order. I noticed that you started with h3, so you can use h1 and h2 instead of div first, before jumping to h3.
You did a very good job, keep up the great work!
Marked as helpful
@muqsith3
Submitted
What are you most proud of, and what would you do differently next time?
a
What challenges did you encounter, and how did you overcome them?
i am struggle with background-image sizing and adapt size to responsive
What specific areas of your project would you like help with?
a
Hello there! You did a good job with the structure overall. Keep up the great work!
To provide you with some aid regarding responsive design and image sizing:
height: 100vh; and overflow: hidden; to the body selector in css. This will get rid of the scrollbar and keep the card fullscreen.max-width: 600px; to your mobile container, and max-width: 343px; to your desktop container.picture tag in your html and implement source srcset="image.png" media="(min-width: number)". This website explains how you use that element perfectly. The purpose of adding that code is so the image automatically switches with the media query. In addition, you can add max-width: 100%; to img in CSS to ensure it will never overflow the container.Marked as helpful
@chloeandrie
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of completing another Frontend Mentor challenge! I have not used html tables frequently; I tend to gravitate to css flexbox or grid. In this case, an html table seemed appropriate for the nutrition section.
What challenges did you encounter, and how did you overcome them?
I'm hoping to continue to learn about using html tables and how best to use them while prioritizing accessibility.
What specific areas of your project would you like help with?
Is there a better way to improve responsiveness? What would you change or do differently? Thanks for the feedback!
Hi there! I really liked your solution, and your choice of using html table for the nutrition section is the perfect choice! I myself did not come to that conclusion when I did this challenge, so thank you so much for enlightening me. I will go back and implement this in my design so I can practice html tables more.
In terms of responsive design, the only area I spotted was that the mobile version differed from the design given in Figma. There were no margins outside of the container in the mobile version, and the peach background is nowhere in view. The recipe itself fills out the entire viewport width.
Over than that, you did a very good job. Keep up the great work!
Marked as helpful
@giuseppecapraro
Submitted
Hello Giuseppe, great work!
I noticed that there is a scroll bar visible on the page. You can choose to keep it like that as a personal preference, or you can remove it to keep the viewer's attention more focused on the card itself.
To keep the card centered in the page without a scrollbar, you can add overflow: hidden and height: 100vh to the body selector in css!
Marked as helpful
@JreyIV
Submitted
What are you most proud of, and what would you do differently next time?
I don't know if my code is the cleanest version or if there are unnecessary things in there that I can take out
What challenges did you encounter, and how did you overcome them?
Flexbox is still hard at times. I also didn't know how to see the exact padding and spacing between items or font sizes and whatnot. I'm not too familiar with figma. I eyed it and guessed on the padding so it's definitely not perfect
What specific areas of your project would you like help with?
How do you use figma to make it more pixel perfect (or at least close to)
Hi! Your solution looks very clean and great! It looks almost identical to the design in terms of structure, very great job!
To help you with Figma, all the information about the margin/padding you need is located on the right side of the screen.
It would be easier to show if I can post screenshots here, but I hope that helped a bit. There's also tutorial videos for Figma online, I will link one of them here
Marked as helpful
@kevincanderson
Submitted
What are you most proud of, and what would you do differently next time?
Getting it done. Putting the time in.
What challenges did you encounter, and how did you overcome them?
Getting the font and sizing right between the devices.
What specific areas of your project would you like help with?
Fixing figma font issues. Learning what html elements to put margin on if there is multiple in a line/column.
Hi, you did a very great job approximating the font and margin/padding without the exact numbers from figma. I also really like how you were able to trigger the H1 color change upon hover on the card, in addition to the box-shadow change. That was something I struggled to trigger in my own solution.
Nicely done!
@NurAmmarNaufal
Submitted
This comment was deleted
