has-dev11• 80
@has-dev11
Submitted
Jawad Mahmud
@JawadM2002
All comments
- Jawad Mahmud• 150
@JawadM2002
Posted
There are some semantic HTML elements that have been utilised, such as <article> for testimonial cards and '<img>' for images, which means that it is semantically correct. The layout is responsive and adapts well to different screen sizes, transitioning smoothly from a four-column grid to a single-column layout. The code is well-structured, readable, and reusable with clear classes and comments. The CSS uses variables to define colours and font families, making the code concise and easy to maintain. However, it could be improved by giving a detailed description for the alt attribute for the images. Overall solution is very close to the design, but some adjustments can be made to the image sizes, text alignment and colour variations to match the design closely. But it still demonstrates a great practice with CSS Grid, keep up the great practice. :)
0 - Steph• 500
@xStephx
Submitted
Jawad Mahmud• 150@JawadM2002
Posted
The code is able to utilise semantic HTML elements such as main, section, article, img, p, h1, h2 and span, which makes the code more meaningful. The code is well-structured and easy to read. It utilizes semantic HTML, CSS classes, and is organized into sections, which promotes readability. Reusability can be further enhanced by considering CSS classes for repetitive styling elements. Whilst it is accessible, you could consider descriptive and meaningful text on the 'alt' attributes for the images. Furthermore, the solution and its elements are able to match that of the design. Overall, the provided code incorporates semantic HTML and Tailwind CSS for the style and shows a great demonstration of learning, so keep it up! :)
1 - rt• 210
@rtPirate
Submitted
Jawad Mahmud• 150@JawadM2002
Posted
The design is considerably similar to the solution, and the layout looks really good on a range of screen sizes. There are some noticeable differences, which are, in particular, the box and font sizes.
0 - emmadumbi• 100
@emmadumbi
Submitted
Jawad Mahmud• 150@JawadM2002
Posted
This seems like a great effort, and you gave it your best shot. There is a meaningful use of semantic HTML with descriptive classes to help define the different parts of the component. The solution itself is accessible, and what you can improve on it is that you can add a label element with the button element to improve accessibility for screen readers. Moreover, the layout looks really good on a range of screen sizes, and you used relative units to make it more responsive, as well as a media query of 600 pixels to adjust the layout for larger screen sizes. The code is well-structure, readable and reusable, as there are consistent naming conventions and clear class names. The only difference in the solution is the size of the card, but the position of the elements inside remain the same. Overall, well done and keep it up. :)
Marked as helpful
0 What are you most proud of, and what would you do differently next time?
I used BEM for naming classes.
What challenges did you encounter, and how did you overcome them?
I encountered difficulties with the image shrinking due to margins reducing the available width, which affected its aspect ratio. I resolved this by using a fixed width for the image.
What specific areas of your project would you like help with?
I would appreciate advice on more effective methods for addressing image shrinking and spacing issues within a flexbox layout. Any suggestions for improving responsiveness or optimizing the layout would be helpful.
Jawad Mahmud• 150@JawadM2002
Posted
The solution provided shows a good mixture of HTML and CSS, particularly with how it is able to follow the desktop design as expected, and moreover, you have demonstrated a good use of CSS variables that helps with the theme colours. The layout looks very good and has very well-structured code. You've also made good use of the media query using the min-width function so that the user is able to determine what the width for the page would be. Overall, the solution looks very identical to the design, but is able to follow the expected outcome and result, so very good and keep it up.
0- Salva• 250
@salva-it
Submitted
What are you most proud of, and what would you do differently next time?
I am very happy that I was able to complete the fourth challenge
What challenges did you encounter, and how did you overcome them?
I had challenges with sizing and responsive issues, but by searching, I was able to overcome them
Jawad Mahmud• 150@JawadM2002
Posted
The solution does include semantic HTML, as it shows the emphasis of the elements, for instance, <section> is used for each aspect like ingredients, preparation and nutrition. It is very accessible, with a very good layout for all screen sizes. Furthermore, the code is well structured and readable, with consistent indentation and clear sectioning to define the clear sections, making it easier to read and organise. The use of lists have been used well, as well as relating to each section within the page, as well as meaningful class names that help identify the purpose of each section. Overall, this shows a very great and well structured meaning for semantic HTML and the use of CSS, so very well done and keep up the good work! :)
Marked as helpful
0 - Wasiqur Zaman• 80
@wasiqurzaman
Submitted
Jawad Mahmud• 150@JawadM2002
Posted
Good use of semantic HTML, it has a very good layout that is available in a range of screen sizes. The code is very well structured, and it is very readable. Furthermore, the design is a little bit different, but functions in the way that it is meant to. This is a very good effort within your HTML and CSS knowledge, keep it up! :)
0 - Jawad Mahmud• 150
@JawadM2002
Posted
Well-structured, readable and reusable, the design matches well with the solution and the layout looks good. For the most part, the design is very close to the actual design, as the structure where the fonts are placed is slightly increased. Overall, a very good demonstration of HTML and CSS.
0 - trayansh005• 50
@trayansh005
Submitted
Jawad Mahmud• 150@JawadM2002
Posted
It has a great layout, and whilst the solution does look a little different from the design, it does look very well designed. The code is also well structured, readable, and reusable. Moreover, there is also a great use of semantic HTML and is able to display the elements in the way that it is expected within the main structure. Overall, it demonstrates how well the webpage is structured with HTML and CSS. Very well done!
Marked as helpful
1
