@JoelJohsSubmitted 4 months ago
P
Christian Chirtoaca
@Chirtoaca94All comments
- @Chirtoaca94Posted 4 months ago
Great site and advanced level of frameworks used - React and Tailwind. You should try building much more complex projects and challenges as this is probably too basic a level for you.
Marked as helpful1 - @msa-sitareSubmitted 4 months ago@Chirtoaca94Posted 4 months ago
Excellent work! Looks great in different screen sizes so meets the responsiveness test and it works as expected.
In your html, css, and js files however, I feel like you have too much. I think you have unnecessarily complicated the structure, layout, and code. You could simplify the code and get rid of redundant statements such as your first css line a workaround would be to use * { margin: 0; padding: 0; box-sizing: border-box; }
Try to look for ways to reduce complexity in your code and make it more readable for reviewers of your code. That will help your thinking. Overall, great effort!
0 - @SadikibendaSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I most proud to finish my first landing page.
What challenges did you encounter, and how did you overcome them?The biggest challenge I have encounter was applying css grid and working in responsiveness, I will need more practice on that. I overcome this challenge by using google.
What specific areas of your project would you like help with?css breakpoint, knowing the exact measure for tablet and phone.
@Chirtoaca94Posted 5 months agoGood effort overall, and layout looks good in full-screen size. Keep it up!
Needs improvement on the responsive side - try using max-width instead of width on containers and body element etc. this helps with the responsive layout. Also look at using @media (min-width) and (max-width) to create breakpoints in screen sizes. When you resize the screen to a smaller screen, the images overlap the text which is not great. So, figure out how to make your containers responsive. Also I would recommend building mobile-first, it is much easier to build for mobile screen sizes and then expand the elements!
0 - @Sopheaktra-PholSubmitted 5 months ago@Chirtoaca94Posted 5 months ago
Good overall responsive design and layout of the cards / testimonials. Only recommendations I would have relate to the formatting / styling of the fonts - pay particular attention to font weights and use a lighter font-weight for the body text of the testimonials or quotes. Could also look at increasing the line-height to make it more readable :)
0 - @JUNEDSKSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Getting learn responsive design and cards direction
What challenges did you encounter, and how did you overcome them?nothing its easy
What specific areas of your project would you like help with?nothing
@Chirtoaca94Posted 5 months agoGood responsive function on the project - particularly how it adapts to the screen sizes.
Would recommend paying closer attention to font weights and sizes, and margins to more closely align with the layouts in the challenge previews. Also keep your styles in a separate file, a CSS file. Can read the code easier then and helps keep things organised. Allows you to reuse styles across pages and components then.
Overall, code was good that I also learned to improve my own code so good job :)
Marked as helpful1 - @GAOV13Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
This was my first challenge and the one that taught me how to work entirely with just HTML and CSS. I would make the card work with a responsive design because, when viewed on a smaller device, the card doesn't fit the dimensions
@Chirtoaca94Posted 5 months agoPreview your projects at different screen sizes before submitting them.
If you resize your project to smaller screen sizes between mobile and largest size, you will see your design throw up issues with the text and button etc jumping out of the container. So, there are improvements that can be made for the layout on a range of screen sizes. You will need to use responsive widths on your div containers so that they resize relative to the size of the screen (use %)
0
