Latest comments
- @kevin344k@st0272
Your HTML/CSS and JavaScript code is generally well-written, but there are a few areas for improvement:
- The design appears smaller than specified in the design file.
- The background color of the rating buttons in their hover and selected states, as well as the text color of the submit button, differ from the design file.
- The submit button is clickable before the user selects a rating. This can negatively impact accessibility.
With a little more attention to detail, your work could be even better. Keep up the great work!
- P@toshirokubotaWhat challenges did you encounter, and how did you overcome them?
I applied BEM methodology on my style. This was my first time to use BEM and I am not certain if I did it correctly.
What specific areas of your project would you like help with?I appreciate any feedbacks on the design and style. In particular, I would like to know if I used BEM properly.
@st0272Your HTML and CSS are well-structured and follow good practices. However, I have a few suggestions to improve efficiency.
-
Use
<img>
Instead of CSSbackground-image
The.hero
image is an important piece of content, so it's better to use an<img>
tag rather than the CSSbackground-image
property. -
Use
<p>
Instead of<h2>
The.content__caption
element represents a description of the item. A<p>
tag is more appropriate than an<h2>
tag in this case. -
Enhance Accessibility for Clickable Elements
This card element has ahover
effect, so it should contain an<a>
tag within a<main>
tag for better accessibility. -
Unnecessary Part
The sentence "Challenge by..." is unnecessary. Remove it or place it outside the card element.
I hope my advice will be helpful for your coding. Keep up the good work!
Marked as helpful -
- @synnestormWhat specific areas of your project would you like help with?
Feedback is very appreciated!
@st0272Your code is generally good. However, using the root-relative size unit (rem) is more desirable.
- @jose-beltran@st0272
Your code is generally well-structured, but several issues and areas for improvement in terms of semantics, accessibility, and organization. Below is my opinion for improvement.
Use of
<p>
for titlesThe
<p>
tag is used for headings like "Reliable, efficient delivery" and "Powered by Technology", which should be in<h1>
and<h2>
respectively for better semantics.Missing
alt
attributes in imagesThe <img> tags have an empty
alt=""
, which is not good for accessibility.Improper nesting of divs
The
content-cards-two
div is nested inside the.content-cards
but is structured inconsistently. It appears that all.card
elements should be direct children of.content-cards
for better alignment and flexibility. Using grid to style this four-card layout is efficient.I hope my advice will be helpful for your coding. Keep up the good work!
- @erntTt94What specific areas of your project would you like help with?
Any feedback appricated...
@st0272Your JavaScript(React) code is well-written, but there are several areas for improvement in the HTML and CSS:
- The design is larger than specified in the design file.
- It's preferable to use
class
instead ofid
for styling and structure. - The desktop design is incomplete. Wrap the image and content items in
<div class="card">
and usedisplay: flex
ordisplay: grid
to align the items properly.
I hope my advice will be helpful for your coding. Keep up the good work!
- @andreshinostroza@st0272
Your code is well-structured, but there are several points for improvement:
1. Accuracy of Sizes
- Font sizes: Each font size is 1 or 2 pixels larger than the design file.
- Margin: The margin size for the text "London, United Kingdom" is slightly wider than expected.
2. Unnecessary CSS Styles
h1
andh2
classbg-c
: Theprincipal
class already applies the samebackground-color: var(--Gray-800)
, making this redundant.enlace
class: Thecursor: pointer
style is unnecessary since it is the default behavior for anchor (<a>
) tags.
I think it could be even better with a little more attention to detail. Keep up the good work!