Latest solutions
Latest comments
- @NGUYEN-XUAN-THUYP@JeremDevX
Code and site are unreachable
- P@kareemsakrWhat are you most proud of, and what would you do differently next time?
The speed of getting it done
What challenges did you encounter, and how did you overcome them?The hero section, having the document flow differently between the mobile and desktop view
P@JeremDevXGreat work, looks very good !
I've seen some minor mistakes :
- Your buttons doesn't have the good sizes, font-size/weight, the "v1.3" should be colored and you forgot the hover effect.
- Your CTA section doesn't have a width limit for ultra-wide screen (
max-width: 1440px"
in most of cases) - The paragraph in subhero-section is stuck to the screen borders on small devices ( 320px )
Keep it up ! :)
- @GuillermoBlancarteP@JeremDevX
Hey great work, however there are some points than you can improve.
- Use semantics tags (headings, section, article...), to improve you page structure.
- Avoid adding divs when they're not necessary. For example, adding a div for just one paragraph is not a good practice.
- You can adjust you classnames to correctly use BEM from the start to the end of your code.
class="card__head" //Good usage class="card white last" //Bad usage, could be "card--white"
- Use kebab-case instead of camelCase for your variables.
- Why did you set your font-size at 62.5% on html tag ? Just set the font-sizes where they are needed, but avoid changing the base size for all the document because it can lead you to unexpected behavior.
- Stick to consistent class naming with BEM to facilitate the readability of your CSS code. Right now, it’s a bit hard to read.
- When you reach 1200px breakpoint, everything is out of proportion or distorted,pay attention to this kind of detail.
Keep it up ! :)
Marked as helpful - @1of1bawP@JeremDevX
Great work !
Few points that you can improve :
- The title should be on 2 lines
- Cards are a bit wide on full screen
- With some screen sizes, all boxes doesn't have the same height
- Your header should be outside the main section
- Prefer giving classnames to your tags (h2, p, span...) instead of selecting them directly with in you stylesheet
Keep it up :)
- @amallal2004P@JeremDevX
Great job !
A few tips:
- Your BEM naming is incorrect because it’s too long and hard to read; keep it to one or two levels to make it simpler and easier to maintain.
- You can store your styles and media queries in the same stylesheet if it's about to the same things
- Add padding to your body, for smaller devices, to ensure minimal space between the edge of the screen and the component.
Keep it up :)
Marked as helpful - @JuanFelipe29P@JeremDevX
Great work !
Here are some points you can adjust :
- Different links, should be in one div and each one should be an <a> tag (one div who contains the five links), also the font-weight is not the same
- The border-radius should be higher for container and links
- Put the colors in ":root" with this format : "--green: hsl(75, 94%, 57%") and use them with "color: var(--green)". In bigger project if you want to change one color, you will just need to update in :root.
- In the mockup, the container width from tablet devices is bit wider, and in mobile size padding is a bit smaller.
Keep it up! :)
Marked as helpful