@Achigyus
@mkhantk
Submitted
What are you most proud of, and what would you do differently next time?
I tried using frameworks and it works.
What challenges did you encounter, and how did you overcome them?
With the frameworks, images didn't load after deploy. I had to tweak a little in src to make them appear.
What specific areas of your project would you like help with?
Any Suggestion, please? Thanks.
@Achigyus
Posted
Hi @mkhantk
I love your solution, great use of flexbox but I noticed that your design is not so responsive at screen sizes between 766px and 1000px. Making this section responsive using css grid is really easy, but if you want to use flexbox, you can create a media breakpoint between those two dimensions and add the following css to the main element:
main {
flex-wrap: wrap;
flex-direction: row;
}
Then change flex-direction of the second div in the main element to row:
flex-direction: row;
Then change the flex order of the last div in the main element:
order: -1;
This will improve the display between these screen sizes, or alternatively you could use css-grid.
I hope this helps. Great work on the solution.
Marked as helpful
@Achigyus
Submitted
What are you most proud of, and what would you do differently next time?
I am proud at how fast I was able to get the markup setup and style the websites. I'm also proud that I was able to use more responsive properties in my css such as inline-size, block-size, and margin-block-end.
What challenges did you encounter, and how did you overcome them?
My major challenge was trying to be semantically correct
What specific areas of your project would you like help with?
I would like help with my html semantics and accessibility. Thanks
@Achigyus
Posted
@Jolijn0101 I guess it would be more proper to call it semantic JSX 😂. Thanks for the feedback
@ha308ing
Submitted
What are you most proud of, and what would you do differently next time?
not to say 'proud' but i liked to use responsive images with picture and source elements and grid-template
next time i'd like to avoid using absolute length values
What challenges did you encounter, and how did you overcome them?
📐
What specific areas of your project would you like help with?
how to move (higher or lower) the crossing line of strikethrough text? 🤔
@Achigyus
Posted
Hey mate.
Really great and pixel perfect solution. I couldn't find anything to correct, in fact I learnt some stuff from you.
Congrats on completing the challenge.
@Ashish-619
Submitted
What are you most proud of, and what would you do differently next time?
Gaining confidence
What challenges did you encounter, and how did you overcome them?
Nothing as such
What specific areas of your project would you like help with?
responsiveness & design
@Achigyus
Posted
Hey Ashish Vaidya.
Congrats on completing the recipe challenge. I looked through your jsx and the structure of your site looks solid but your css is where the issue is, one issue I can point out is that you can use media queries to ensure that the styles display the way you need them to on desktop(build for mobile first, then use media queries to get the desktop design).
One other thing I noted was that the background of the page was black on my device, I'm not sure if it's because I use dark mode, but you should probably check it out.
Congrats once again
@ffrosch
Submitted
What are you most proud of, and what would you do differently next time?
I really like trying out different approaches for CSS-in-JS. I think my style objects worked well, but it becomes clear that a component based approach will be necessary for larger projects to keep things simple.
What challenges did you encounter, and how did you overcome them?
I used absolute positioning to center the element and I enjoyed learning a bit more about this method. But I also found it quite hard to get everything right and had to make countless small adjustments to fix inconsistencies in the design.
What specific areas of your project would you like help with?
Nothing specific right now.
@Achigyus
Posted
Hi Florian.
I love your submission, your attention for details is really nice. However I noticed something.
On mobile, there are some gaps in the responsive design, I mean that some mobile screens don't have some padding between the edge of the screen and the social-links-card. You can check using your devtools and slowly resize down to see what I mean.
On desktop screens, there are horizontal and vertical scroll bars, funny thing is they don't show while the devtools tab is active, so maybe that's how you missed it. I identified the culprit code:
.css-13cezar {
position: absolute;
overflow: scroll;
inset: 0px;
min-width: 320px;
min-height: 580px;
width: 330px;
height: 580px;
margin: auto;
border-radius: 1rem;
background-color: var(--colors-darkgrey);
display: flex;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
}
The overflow property on your main tag is set to scroll, you can set it to hidden or remove it to fix the issue.
Kudos for your work once again.
Marked as helpful
@dynamic109
Submitted
What are you most proud of, and what would you do differently next time?
I was able to build the project
What challenges did you encounter, and how did you overcome them?
Encountered problem with css but i was able to resolve it using stack overflow
What specific areas of your project would you like help with?
None
@Achigyus
Posted
Hi mate.
Congrats on finishing the challenge, you did a good job. I just have a few recommendations
div and set it's background to the image, it would have been more appropriate to use an img tag.b tag, it would be more appropriate to use the font-weight css property to achieve the desired effect. This element could also have been a button or an a tag.h1 tag rather than a h2.text-shadow property added to the blog description makes the text difficult to read, you could consider removing it as it is not part of the design.Thank you.
Marked as helpful
@joshpickardme
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?
Quite a simple challenge
What specific areas of your project would you like help with?
N/A
@Achigyus
Posted
Really great solution. I love the animation
