@Stephanie0905
Submitted
@ePaulo
@Stephanie0905
Submitted
@ePaulo
Posted
I like how you made the UI responsive to mid-size widths... looks better than mine. The only suggestion I have is to include some code to adjust the "hrs" text displayed after the number of hours for current and previous times. For example, this is the code I used: const abbrHours = hours => (hours < 1 ? " " : hours > 1 ? "hrs" : "hr") // if hours is less than 1 (ie. 0)... then add nothing // if hours are more than 1... then add "hrs" // finally (default) if the time is 1... then add "hr"
Marked as helpful
@Vanillatte68
Submitted
What are you most proud of, and what would you do differently next time?
I'm happy i can get the styling as close to the design including the mobile design. I was able to make this using single page HTML. making the form validation was also pretty easy.
What challenges did you encounter, and how did you overcome them?
I was thinking about whether to make this as a single page or make another page for success message. but i decided to make it single page by changing the form and success message display on CSS.
What specific areas of your project would you like help with?
I wonder if you can use backend like php to display the success message and how to do it.
@ePaulo
Posted
Looks very good. Both desktop and mobile designs are very similar to the designs provided... well done.
Only one suggestion: you could have set the newletter image in your mobile-first CSS styling (instead of in your HTML) then reset the link to the desktop image in the media query for the desktop styling updates.
This is my CSS code for the newsletter image in my mobile styling: img.main-image { content: url('./assets/images/illustration-sign-up-mobile.svg'); width: 375px; height: 284px; object-fit: cover; }
Marked as helpful
What are you most proud of, and what would you do differently next time?
I think I kept the code simple and got close on the design. I don't know that I would have done anything differently, I felt like I had a good flow going with this project.
What challenges did you encounter, and how did you overcome them?
The image swap. I couldn't remember how to do that, but I ended up using CSS and content: url()
and that worked for me and made it easy enough to control.
What specific areas of your project would you like help with?
Ensuring that my HTML is clean and I kept the CSS simple. I tried hard not to "over code" this time.
@ePaulo
Posted
I think you succeeded in making your code simple, "clean" and easy to understand... very well done. :-)
@Anni-123-arc
Submitted
@ePaulo
Posted
Suggestions:
Marked as helpful
@luciehelias
Submitted
What are you most proud of, and what would you do differently next time?
Everything because I start to be more efficient and more faster.
What challenges did you encounter, and how did you overcome them?
On this one I didn't encounter any issue.
What specific areas of your project would you like help with?
Everything that can be help to improve my code and my way to do it.
@ePaulo
Posted
Your HTML and CSS look good. So does your UI based on the design files. I did notice the spacing between the lines is different from the provided design. I've been using the CSS styling "line-height" [https://developer.mozilla.org/en-US/docs/Web/CSS/line-height] to control spacing between lines. Give it a try... I find setting line-height very useful. :-)
@gilangr1440
Submitted
What are you most proud of, and what would you do differently next time?
I can copy the design almost the same
What challenges did you encounter, and how did you overcome them?
set class naming and determine css specificity
@ePaulo
Posted
Class naming is excellent. Responsiveness is very good. A couple of suggestions:
Marked as helpful
@arun81302
Submitted
What are you most proud of, and what would you do differently next time?
i have some problem with flexbox and media query so step by step i am learning these things by applying
What challenges did you encounter, and how did you overcome them?
there is nothing hard in this section.
What specific areas of your project would you like help with?
i can help with anything in this project.
@ePaulo
Posted
Three suggestions:
<link rel="stylesheet" href="./assets/css/styles.css" />
.<p class="publish-date">Published 21 Dec 2023</p>
while you used <span id="pub">Published 21 Dec 2023</span>
.<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet"/>
.Marked as helpful
@JacobKnittle
Submitted
What are you most proud of, and what would you do differently next time?
Getting the responsiveness to work at the header and footer
What challenges did you encounter, and how did you overcome them?
getting the layouts to work on the different screen sizes
What specific areas of your project would you like help with?
Any tips on laying out the hero and footer on different screen sizes using positioning, flex, or grid
@ePaulo
Posted
I just finished the same challenge and approached it differently. I have no idea whether the person creating the challenge expected you type of continuous responsive solution or my rigid 3 screen type solution. Would be interesting to know. You coded the designs VERY close. The few differences I noticed include:
Things you did correctly that I was unable to... 1) in my last section, my divider does not sit over top of the image but fades slightly into it... 2) also in my last section, my download button is not over top of the image but fades slightly into it.
@git-Indrajit
Submitted
What are you most proud of, and what would you do differently next time?
Nothing
What challenges did you encounter, and how did you overcome them?
Media Query
What specific areas of your project would you like help with?
Media Query
@ePaulo
Posted
I just finished the same challenge and it took me a few tries to figure out how to reorder the testimonials to match the design. If you set both grid-row and grid-column you can get a bit closer to the expected desktop design.
Marked as helpful
@Divyamsharma-18
Submitted
What are you most proud of, and what would you do differently next time?
That I did it on my own, no help taken from gpt or anyrhing
What challenges did you encounter, and how did you overcome them?
None
What specific areas of your project would you like help with?
I tackled it all.
@ePaulo
Posted
Looks good. One suggestion is to add a width setting to your <header> to limit the width of the text... if/when you decide to make your design look similar to the suggested design.
Marked as helpful
@Akansha82
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of successfully completing this Frontend Mentor challenge.
What challenges did you encounter, and how did you overcome them?
One of the major challenges I encountered was to properly align the images and text in card.
What specific areas of your project would you like help with?
Any guidance on improving responsiveness, optimizing code structure, or enhancing accessibility would be greatly appreciated.
@ePaulo
Posted
Desktop version look nice. :-) Suggestions:
My approach to responsive design... write the HTML code based on the desktop design, then write the first draft of the CSS code based on the mobile design, and finally add a media query to add or adjust css code specifically for the desktop design.
Here's a link to begin learning how to use a media query: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Marked as helpful
@Repajrnik
Submitted
@ePaulo
Posted
Your desktop design looks good. :-) Suggestions:
Here's a link to get started using media queries: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Marked as helpful