P
@K1dou
Latest solutions
Responsive CSS Grid, JS data fetch JSON
PSubmitted about 2 months agoProperly spacing in using CSS grid especially from the bottom of the content, there is a huge gap I need to get rid of that somehow.
Responsive newsletter with JS form event functionality
PSubmitted 3 months agoI need help with getting the button on the desktop active state to be that gradient color like in the Figma design, That was the only piece I couldn't achieve but I will go back and add that feature later as well as doing this project from scratch to get a good grasp on the JS functionality for form handling validation and event listening.
Responsive CSS Meet Landing Page
PSubmitted 4 months agoI need help with getting the background (with the faint stripes using CSS) using CSS to make it exactly like the final product and the exact color overlay for the bottom footer hero image. Everything else I believe I did alright by making it as close to the original product as possible. Any feedback is great. Kindly please advise. Thank you for taking the time to read my solution and help. Cheeers!
CSS Responsive grid & Media query
PSubmitted 5 months agoThe text in daniel's article & kira was flowing out a little bit, maybe if you could take a look at my work visually and the code, any advice would be great. The sizing of the text is a little off I did my best though but any coaching is great on that too. I would say to get help to work on getting this done with each different break points, but I will come back later for implementation as well as incorporating more accessibility features into it as I am learning on these path's. Any feedback is great, thank you for taking the time to review my work.
responsive grid media query
PSubmitted 5 months agoI forgot to add the shadowing effect on each boxes as you'll notice the difference from mine and the original, I will go back and do that later but other than that, I am open to any feedback.
Responsive mobile design & desktop
PSubmitted 5 months agoI had issues with the hover effect where the if you hover over the button it turns white and not the color that it was intended to be. I have to go back and fix that later or if anybody can kindly advise me otherwise.
Latest comments
- P@xayrax88
This is a wonderful build of the project. First off, it is impressive that you're using React to develop this part of the project. Great job in getting it to be centered & responsive to the different screen sizes from mobile, tablet and desktop sizes. The links also change when you click on daily, weekly and monthly reflecting the data from the JSON source file. Overall great job. :)
- @AnthoniaEfeP@xayrax88
I believe you did a wonderful job, the over all structure of your code is very neat, easy to read. I believe the spacing of the main container could be better but overall everything is close and identical to the design. It seems to be responsive and respective to the mobile and desktop sizes here. Great job using react!
Marked as helpful - @GentlestanWhat are you most proud of, and what would you do differently next time?
In this project, I improved on how to implement responsive design principles effectively. I worked with different screen sizes using CSS media queries, ensuring the layout adapts seamlessly across mobile, tablet, and desktop devices. This also helped me improve my CSS skills in handling flexbox and grid layout systems, especially when creating components like the portrait section and buttons.
I also gained more practice with semantic HTML. For example, I used elements like <main>, <section>, <footer>, and <h1> to improve the structure and accessibility of the webpage. This helped ensure better readability for both humans and screen readers, making the content more accessible.
Additionally, I worked with custom fonts and enhanced typography to make the page more visually appealing while maintaining readability. The use of reusable CSS classes for typography and layout allowed me to keep the styles consistent across the page, while also making the code more maintainable.
What challenges did you encounter, and how did you overcome them?One challenge I faced was ensuring the design was responsive across all screen sizes. Particularly, the layout of the hero section and the grid of portraits on different screen widths required lots of adjustments. I had to test my media queries multiple times and adjust the grid template to ensure it displayed well on tablets and desktops.
Another struggle was optimizing the use of semantic HTML in a way that kept the page structure both functional and visually organized. I had to pay attention to not only the visual hierarchy but also how I could use tags effectively for accessibility without sacrificing the design.
To overcome these, I referred to the project brief frequently and cross-checked my layout in different browser tools, like Chrome's developer tools, to make sure everything looked good on various devices.
P@xayrax88The project looks really good and fairly close to the design. The only thing I would say needs adjustment is the spacing of some elements like getting the footer image to be pushed down to the bottom more, fixing the border radius on the buttons and spacing out the grid images just a tad bit with space-between in CSS or margin left and right of each other. Other than that, great job! Happy Coding. :)
- @HishamBoghdadyP@xayrax88
The project is amazing and great in desktop view. Great job at an organized and clean HTML and CSS code. You did a good job with most of the HTML, however maybe start incorporating more semantic HTML like sections, articles tags etc. to be able to make it more accessible especially for screen readers and other semantic HTML tags for accessibility. The only thing I would say you could implement is mobile responsiveness by incorporating media queries for the mobile version. Other than that, great job!
Marked as helpful - @Abhishek1334What are you most proud of, and what would you do differently next time?
I am very happy with the responsive behavior of my site.
What challenges did you encounter, and how did you overcome them?I faced some issue with width and height of parent and child elements.
What specific areas of your project would you like help with?How do i make sure that my container covers the entire page and difference in height , width , max and min height and width and 100vw, 100% and 100vh ? when to use which?
P@xayrax88Hi I am just going to go off the questions from front end mentor for the feedback, Does the solution include semantic HTML? - Yes Is it accessible, and what improvements could be made? - Great job using the alt key for accessibility for your icon. Does the layout look good on a range of screen sizes?- Yes good job on the responsive design. Is the code well-structured, readable, and reusable? - Yes great job for a well structured code, it is easy to read. Does the solution differ considerably from the design? - No but the only thing I would say is to adjust the background color to fit more closer to the original design but other than that, you did well!
Marked as helpful - @AngelPenalverP@xayrax88
Does the solution include semantic HTML? - Yes Is it accessible, and what improvements could be made? N/A Does the layout look good on a range of screen sizes? - Yes Is the code well-structured, readable, and reusable? - yes Does the solution differ considerably from the design? It is very close to the design. Overall great job!
Marked as helpful
