@CertificationSurya
P
Carlos Castillo
@CharlieCastleWebAll comments
- P@CharlieCastleWeb
Hi CertificationSurya!
Nice solution, can't really comment on the code since I don't know much React, but you definitely met the challenge requirements.
Only thing I'd say is that the design is a bit off.
Anyway nice solution! Keep up the good work!
- @aksoyalpiWhat challenges did you encounter, and how did you overcome them?
- to style the input correctly when there is an error
- if it is a (good) performant solution, or too complex
P@CharlieCastleWebHi Alperen Aksoy!
Nice solution. You matched the design and functionality! I would only suggest a more structured approach to your styles, maybe creating more variables and files so it would be more modular.
Other than that I liked your solution!
Keep up the good work
- @romelquinteroP@CharlieCastleWeb
Hi Romel!
Nice solution!
You've definitely matched the design. I also liked your code but would recommend to use a more structured approach to it, like setting variables with common values.
Anyway good job!
- @M4R0C4P@CharlieCastleWeb
Hi M4R0C4!
Nice solution. But there are some things off comparing to the design:
- The images in the hero section should overflow a little bit according to the design.
- The main section text is too wide.
- The elements in the footer section should stack vertically in mobile, also the background should be positioned top.
Other than that I loved your scss structure, nice code!
- P@KellenkjamesWhat are you most proud of, and what would you do differently next time?
I'm proud of the modular SCSS architecture, BEM structure, and how closely the final build matched the Figma design across all breakpoints. Next time, I would plan the breakpoint strategy even earlier—defining custom breakpoints upfront for a smoother responsive flow.
What challenges did you encounter, and how did you overcome them?Managing decorative images that extended beyond the viewport was tricky, especially with transform offsets and padding interactions. I overcame this by refining the container structure, controlling overflow properly, and using custom flex strategies for wrapping and spacing at critical breakpoints.
What specific areas of your project would you like help with?N/A
P@CharlieCastleWebHey James!
Awesome solution, I loved your styles structure.
Just a couple of things, the images in the main content appear in a row in tablet design. Also there's the footer image missing.
You might want to take a look at my solution, I try to follow ITCSS structure, a bit similar to your approach.
Nice job! I'm definitely getting some ideas to improve my solution from seeing your code!
Marked as helpful - @NitiemaAllassaneP@CharlieCastleWeb
Hey! Good solution overall, just a few comments:
-
Your solution skips the tablet design.
-
Since the quotation mark is a design element I would put it in css as background image.
-
Nice css structure. You could go a bit further and make it more modular, separating variables in different files.
Nice work, keep it up!
Marked as helpful -
- @TinymolyDDWhat are you most proud of, and what would you do differently next time?
I used Flexbox layout mode to finish this project. By combining an outer Flexbox for horizontal layout and inner Flexboxes for vertical content, I achieved a structure similar to Grid. In my next project, I'll try to explore Grid instead.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was when trying to add colorful borders to the top of the cards while maintaining the cards' rounded corners. Initially, I used the border-top property. However, the border followed the curve of the card’s border-radius, which wasn’t the effect I wanted. To overcome this, I added a custom div directly to each card and applied different colors. This approach ensured the border remained straight and sharp, without being affected by the card’s border-radius. Additionally, by using overflow: hidden, I made sure that any part of the border extending beyond the card's edges was hidden, preserving the desired sharp edge.
What specific areas of your project would you like help with?For the card borders, if you have different solution, welcome to discuss! Also, I would appreciate any feedback or suggestions regarding my code. If you have any recommendations for improvement, I’d be happy to hear them.
P@CharlieCastleWebHi! Awesome solution.
To solve the border problem I would suggest using a :before element so you don't need to add an extra empty div.
I really liked your SCSS, only thing I'd say about is maybe separate it in multiple smaller files for improved organisation.
Anyway, good job! Keep up the good work
Marked as helpful - @Diluk-priyanathP@CharlieCastleWeb
Well it doesn`t look like the design but pretty cool anyway
- @NENGXTP@CharlieCastleWeb
Hi! Overall pretty good job! Just a few comments.
-
The responsiveness is fine but you should establish some minimum widths in order to make it look closer to the design.
-
Good job on setting variables and mixins! I would suggest separating some style code in multiple files in order to make it easier to read. You can look up ITCSS structure or my solution to this challenge.
Let me know if I can help you with any specific feedback! Keep up the good work!
-
- @juliangavirialugoWhat are you most proud of, and what would you do differently next time?
Time resolution
P@CharlieCastleWebHey Julian! Congrats on your solution!
Overall good work, just the dimensions are a bit off from the design.
As improvement I would suggest using some css variables in order to make your code more reusable and versatile.
Keep up the good work!
- @mouadh7belgoumriWhat are you most proud of, and what would you do differently next time?
I'm proud of how I figured out how should I align the name of the publisher (Greg Hooper) vertically wtith his image using align items and not vertical-align
P@CharlieCastleWebGood job!
Overall nice solution, just a couple of things.
Check the line height of the main paragraph.
The avatar should be aligned with the main paragraph. Check your flex div.
- @medievalnudistofthedeadWhat are you most proud of, and what would you do differently next time?
It's a simple enough design, I think next time I would try my hand at using flexbox
What challenges did you encounter, and how did you overcome them?Vertical alignment which I eventually just settled on setting margin based on vh
What specific areas of your project would you like help with?I imagine using a flexbox might solve my vertical issues but that was the area I was struggling with most.
P@CharlieCastleWebAdded information footer
- @nenadmneP@CharlieCastleWeb
Hi Nenad! Good work!
Just a few tips:
-
Instead of using
<div id="main-div">you can use just the<main>tag. -
Instead of using the h2 tag, I think you should use an h1 tag.
-
According to the design, the card should be centered horizontally and vertically. To do that I use flexbox. The following code should center everything inside the body:
`html, body { height: 100%; }
body { display: flex; align-items: center; justify-content: center; }`
Let me know if you have any doubts or I can help you with other questions!
Marked as helpful -
- @CharlesSquirelP@CharlieCastleWeb
Hi Karol! Good work keep it up!
In my opinion these circles are not important information in the page, but a design decision. So I think that they should not be implemented in the html file, but as a background in the css as follows:
body { font-family: 'Kumbh Sans', sans-serif; background: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");Also I think that the position of the card could be improved, to be more accurate to the design.
Let me know if you need any more information or doubts!
Marked as helpful - @arunkanaujia23P@CharlieCastleWeb
Hi Arun ! Great work, anyway!
The solution I use to center the main content is:
- Give both the html and body a height of 100%
- On the body selector apply display: flex, align-items:center, justify-content: center
- Then in order to leave the footer at the bottom you'll need to apply margin-top: auto to both the main and footer selectors.
Hope this works, let me know if you need more help
Marked as helpful - @neuyannP@CharlieCastleWeb
Hi Yann! Great work.
The solution I use to center the main content is:
- Give both the html and boyd a height of 100%
- On the body selector apply display: flex, align-items:center, justify-content: center
- Then in order to leave the footer at the bottom you'll need to apply margin-top: auto to both the main and footer selectors.
Hope this works, let me know if you need more help
Marked as helpful - @d3longasP@CharlieCastleWeb
Hi Arthur! Great work!
For the overlay effect one solution could be :
- Create a new div after the image tag.
- Fill it with the green color and eye image
- Position it on top of the image
- On hover play with the opacity of both the image and this new div.
Contact me if you need more help, but that should be a start
