This is my first time using css grid and create mobile view first.
Latest comments
- @budijiieSubmitted 20 days agoWhat are you most proud of, and what would you do differently next time?@JuniorGodoyOrtegaPosted 19 days ago
Hello, my friend!
The design looks great, and you're on the right track! If I had to be really picky, I would suggest adjusting the background color tone a little and tweaking the font size for the titles and descriptions to make them more balanced. Other than that, it looks fantastic!
I'm also learning, and I built mine using HTML and CSS. I really like the design you created with React—hopefully, I'll be able to strengthen my skills with that tool soon as well.
Keep up the great work!
By the way, my native language is Spanish, and I'm using a translator, so I apologize if anything is written incorrectly. 😊
1 - @Sangeeth612Submitted 3 months ago@JuniorGodoyOrtegaPosted about 2 months ago
The solution looks really great! Just pay attention to the style guide provided by Frontend Mentor, as it specifies which fonts to use. Also, try to make sure the image fits perfectly within its container, just like in the reference image, meaning it should be fully visible. Have you tried adjusting the text content in comparison with the image on the left? Apologies for my English, my native language is Spanish, and I'm using a translator.
0 - @Ziorko87Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
This time I've tried not to use className in HTML syntax. Inseted I've used plain css, targeting each tag separetly.Hope finished project will pay your attention.
@JuniorGodoyOrtegaPosted 2 months agoThe view looks identical, and it's clear that you've put a lot of effort into the details. It shows you have great talent and a keen eye for design. One small detail to consider is paying attention to the numbered lists, as they seem to have a different font and color compared to the design. Fixing this would make your work even more polished.
Keep up the excellent work—your dedication will take you far!
P.S.: My native language is Spanish; I translated what I wrote, so please forgive any mistakes.
Marked as helpful0 - @umera27Submitted 3 months ago@JuniorGodoyOrtegaPosted 2 months ago
The design looks great! Pay close attention to what Frontend Mentor provides within the .zip file. The style-guide includes the font, which you can import from Google Fonts. Also, take note of the button sizes in relation to the main container, ensuring they don't exceed its boundaries. You could try reducing the button sizes slightly to fit within the container. Additionally, consider adding a cursor: pointer to the buttons to emphasize their interactivity as clickable elements.
Keep up the excellent work—your dedication will take you far!
P.S.: My native language is Spanish; I translated what I wrote, so please forgive any mistakes.
0 - @mat-lietSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Accuracy
Use of flex box
What challenges did you encounter, and how did you overcome them?Font and getting the medium/extra bold stuff right
@JuniorGodoyOrtegaPosted 2 months agoThe view looks identical, and it’s clear that you’ve put a lot of effort into the details. It shows you have great talent and an eye for design. Keep up the excellent work—your dedication will take you far!😊 P.S.: My native language is Spanish; I translated what I wrote, so please forgive any mistakes.😁
0 - @Saltyman21Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I am very proud of completing this project.
I would look at all my resources first next time though
What challenges did you encounter, and how did you overcome them?Not much but because I dived right in with little background to frontend development it was a bit of challenge. But through the use of ai, tiktok and youtube I gained knowledge and understanding for the languages
What specific areas of your project would you like help with?Mainly how to improve my designing skills in CSS and alignment, font styles, knowing and have the right colour palettes to cater to the type of website. Understanding more html and linking pages/windows in a website
@JuniorGodoyOrtegaPosted 2 months agoHi @Saltyman21 Great job on completing this challenge! You're definitely on the right track, and it's exciting to see your progress. 🎉
I noticed a couple of things that might help you refine your project further:
-
Style guide: Within the .zip file provided by Frontend Mentor, there’s a style-guide.md file. This is super helpful for getting the recommended colors, fonts, and sizes to match the challenge's design more closely. It might save you some time and ensure consistency.
-
Vertical alignment: I see that centering the content vertically didn’t work as intended. A tip would be to wrap your content in a parent container and set its height to min-height: 100vh; so it takes up the full viewport height. From there, you could try using display: flex on the container and justify-content: center; and align-items: center; to perfectly center everything. Flexbox is very powerful for these types of layouts, and I'm sure you'll enjoy working with it!
You're doing really well, so keep up the fantastic work! 🚀 Challenges like these are a great way to improve your skills step by step. If you try these suggestions and need more tips, feel free to reach out—I'm happy to help.
Keep pushing forward, and congrats on the progress so far! 💪😊 P.S. My native language is Spanish, and I used a translator to write this. Apologies if anything is not perfectly written!
0 -