
idukpaye alex
@Esesosa-maxAll comments
- @dpiskov@Esesosa-max
Great Attempt, Approach Could be better (70 /100)
- Great Design, pretty much pixel-perfect
- Do not use a
<main>
tag to make a card because it is not semantically correct - Read HTML Semantics, it is okay to use multiple divs
- So next time, use a
<div>
and give a class of container or use another tag but do not a<main>
- Try using CSS variables it is nice!
- Do you know Flexbox? or CSS Grid?
- if not learn it, it will make centering much much easier
- Not Quite impressed, with the way you centered the
<main>
- Not Quite Responsive but the way you did it was smart
- Good Usage of Relative units like em or rem
Marked as helpful - @viniciussis@Esesosa-max
Good Attempt( 65/100), but not quite right.
- Regarding the CSS, Great Job there.
- Not quite impressed with the validation there is no custom validation
- Do not use HTML built-in validators use your own
- Yeah, the custom validation is the only thing preventing you from getting a 90/100
Marked as helpful - @Norwyx@Esesosa-max
- Flawless, Could not find any flaws (100/100)
- Good HTML Structure
- Nicely Responsive
- @francis835@Esesosa-max
- Not quite flawless but pretty great 90/100.
- The heading should not be bold.
- The HTML Structure is ok.
- @hiofadlikaakbar@Esesosa-max
Completely nothing like the original design but it is pretty cool. I just hoped you put a better anime. It is even cooler than the original design but i wouldn't employ you with that anime.
- @Nasifuad@Esesosa-max
Good Attempt, but not quite pixel-perfect because you didn't quite it right (45/100)
- Firstly, the paragraph text in the cards is just too much
- Heading text is still too much
- Padding in the card is just too much (reduce it from 30px to like 15px)
- Wrong font usage, to get the design right it is very crucial
- Please use
<p>
instead of a<h3>
in the header - Why is the paragraph text 20px? use the right font and reduce it to 17px
- Why is it NOT responsive? this made you lose points
- Try to collapse everything by giving the
.card-holder
in a media queryflex-direction:column
- Props to getting the card layout with
.middle-cards
- Try using CSS variables it is nice!
- The reason the font is not working is because you did not import the URL from google fonts, google how to do this.
Marked as helpful - @gio-cmd@Esesosa-max
Not impressed with the HTML structure, why use a
<main>
tag like that? what you should do is put a<div>
with a class ofcard-container
, and then apply those styles to themain
. Amain
tag is used to contain a lot of elements and using it for one component like a card is not ideal, say you want to have multiple cards, by your code you would have to duplicate the main tag right? but if put inside adiv
class ofcard-container
to contain it duplicating is a piece of cake.Good Solution 80/100 (do not coky it is an easy challenge)
- @dan9h@Esesosa-max
Great solution, love the animation, pretty much pixel-perfect but the validation isn't quite there yet because I put it on a date that didn't exist and it gave me -1 year and something. You made it responsive, pretty impressive by the way.
Marked as helpful - P@lumiuko@Esesosa-max
Okay, Completely Flawless, Perfectly Responsive. You are a Boss but a Boss like you should add animations it is required so 100/100 but -10 for not adding level animation so 90/100.
- @abelkm99@Esesosa-max
- ✅ Responsive 4/5
- 🆗Good HTML Structure 3/5
- ✅Correct font and font-sizing 5/5
- ✅ More Accurate than the design 5/5
- ❌ Failed to give the button
cursor:pointer
on hover (yes I know it is a small detail) - ❌ Wasn't impressed by the way you centered the whole thing
- @Tiyana19@Esesosa-max
- ✅ Responsive 3/5 (Look Good on Desktop)
- It does look on mobile because the padding of the
testimonial container
is too much try dropping to2:rem
for mobile
- It does look on mobile because the padding of the
- ✅ Good Usage of Flexbox and CSS Grid 5/5
- 🆗 Pixel Perfect on Desktop but fix the Mobile 3/5
- ✅ Animations 4/5
- 🆗 HTML Structure Could be better 3/5
Marked as helpful - ✅ Responsive 3/5 (Look Good on Desktop)
- @MatiasCardoso4@Esesosa-max
-
❌ Responsive 2/5.
-The Layout is not responsive for mobile devices.
-
🆗 Functionality 3/5
The year is not 100% accurate but the month and day are accurate
The Validation error does not clear out even after I enter another date
. ✅Last but not least Good HTML Structure 4/5
Marked as helpful -
- @Cozyamy@Esesosa-max
Great Solution, super responsive (impressive) but I noticed a few things
- You Struggled with the profile images on the card
- The whole
<main>
is not perfectly centered. - I wasn't satisfied with the font sizing and coloring If I were to score you I'd give you a 75/100
- @KruzadeR-VictoR@Esesosa-max
it is more accurate than the design
- @CrypticMango@Esesosa-max
- Good Looking Design (desktop 3/3,mobile 2/3) 5/6
- HTML is somewhat structured 2.5/5
- deadly responsive (impressive !!) 5/5
- Good Application of CSS Variables and mobile first (impressive !!) 5/5
- Fixes and personal suggestions
- i do not think you should put everything into the main
- instead of using
<header>
use<nav>
or just put the nav inside the header <header><nav></nav></header>
- your header is a bit mess up
- input is not properly styled
- Great Job : 18/21
Marked as helpful - @abdraoufx@Esesosa-max
- ✅ Good looking Design (both mobile, and desktop) 5/5
- ✅ Application of Mobile 1st Design and scss 5/5
- ✅ Perfectly Responsive (No overflows, No problems ) 5/5
- ✅ Readable, well structured, reusable (could have been better) 4.2/5
- ✅ Good Animation (Nice Creativity) 4/5
- ✅ Pixel Perfectness
- ❌ 2 Accessibility issues, 1 HTML Issue -2
Marked as helpful - @pa-aggarwal@Esesosa-max
- ✅ Good Looking Design 5/5
- ✅ Very Responsive 4.65/5
- ✅ well-structured, readable, and reusable 4.5/5
- ✅ Readable HTML 4/5
- ✅ Good Application of The CSS Background property (Required for this Project) 5/5
- 🥇 Pixel Perfect 4.9 /5
Marked as helpful - @victorsonet@Esesosa-max
- ✅ Good Looking Design 5/5
- ✅ Perfectly Responsive 5/5
- ✅ OK HTML Structure 3.94/5
. I Think You should put the
.hero-section
andtext-section
in one div, this will make it easier to give displaygrid
- ❌ Background disaster
i.
@media only screen and (max-width: 500px) and (min-width: 300px){ ii. body::after{ background-repeat: no-repeat; /* This will remove the disaster*/ } }
- ✅ Readable HTML 4/5
- 🥇 Pixel Perfect 4.9 /5
Marked as helpful