Frontend Mentor | Alex G's profile

Michaela Kleer•60

@michaelakleerSubmitted over 3 years ago

Any feedback is 100% welcome!

Stats preview card component - HTML & CSS

2

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello

Nice work !

Really nice work. I'm learning from you right now. I'd just saw bootstrap 2 days ago and doesn't had time to practice. I'll keep your code in bookmarks.

Keep coding and have a nice day.

0

Nick Tesh•40

@nickteshSubmitted over 3 years ago

Hey everyone! This is my very first challenge here on Frontend Mentor. I utilized Flexbox and SCSS for this challenge. I typically use Bootstrap for most of my projects but would like to master Flexbox alone. Side note: This is my second week of using SCSS and I am loving it. Let me know what you think!

Stats Preview using SCSS and Flexbox

2

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Like Matt says before, it looks good.

But in HTML i think you made a semantic mistake. You should invert h3 and p, because the title is the categories' name of stats not its value.

Hope that will help you. Keep coding and have a nice day.

Marked as helpful

1

Jeongsu•50

@hosu9466Submitted over 3 years ago

I don't know how can I change the color of img only using CSS.

Stats preview card component

2

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Nice work !

You can add border-radius for corners. And check font, because it's not the same font for Stats.

You could try to do a mobil version like in picture in the challenge's folder.

For the overlay you've many way to obtain it. Like say Vanza you could use Background-blender-mode. You could add a div with a rgba() over the image. You can add an ::after on the img too with a rgba().

For the HTML, be careful you've got a lot of errors. Using div inline isn't possible, you better use span for inline content. Div is a block, span is inline. Same for using span instead of div it isn't good. You've put the img in html and out of boxes, but img default display is inline so you need to put it in a block content, even if you can modify display it's better to put it in a box.

For the font-weight, you have to use only one value, in letter like 'normal' or in number like '400', but only one.

Check the Stats font, it's not the same as the rest.

Hope that will help you. Keep coding and have a nice day

1

Chandra Shekhar Pawar•110

@Shekharpawar1Submitted over 3 years ago

feedback on how to improve more

HTML 5 css3

2

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Nice work !

But there's some things to say ;)

For the HTML, you don't need to use severals class name for similare content. Look the stats part, you've put 'first-element', 'second-element', etc. It's the same thing, so use the same class. It's better to work in CSS.

Using of title. Is it really a title in stats? Maybe you could use a title for the category of the stats but not for the value, you should use a 'p'.

If image wasn't here, you can understand the content, then it's background-image and a background-image shouldn't be paint in html but in css.

For the CSS i notice that you used a lot of poisition property. It's not needed here, you could look around Flex-box, it's more aproriate.

Hope that will help you. Keep coding and have a nice day.

Marked as helpful

0

Bruno•10

@bmikolajczakSubmitted over 3 years ago

Is there any way of locking the image when it's used as a background? When you scale the card the image gets cropped and on a certain resolution it looks awkwardly I suppose.

Stats preview using mostly CSS Flexbox

1

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Nice work !

You can increase your breakpoint because when that changes everything is crushed.

And we can see stats out of the box on the right. You could use 'overflow: hidden'.

Hope that will help you. Keep coding and have a nice day.

Marked as helpful

0

LC•200

@lcmagdaraogSubmitted over 3 years ago

Mobile First- stats preview

1

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Nice work !

Looks like the design. Nothing else to say.

Keep coding and have a nice day.

1

Anthony Máximo•40

@a-maximoSubmitted over 3 years ago

responsive card - sass

1

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Nice work !

Your solution match the design, except that you can adjust margin between element.

But it's nice enough from my beginner point of view.

Hope that will help you. Keep coding and have a nice day.

Marked as helpful

1

Daniel Ramos Rivera•30

@DanielRR10Submitted over 3 years ago

BEM, MOBILE FIRST

1

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Nice work !

First of all, it's better to use background image with css and not in html. In this challenge its a background image I think so you shouldn't put img mark but only load it in css.

And maybe you can adjust the size of the background-image or with the css property object-fit for a better image size.

Hope that will help you. Keep coding and have a nice day.

Marked as helpful

1

Lenfumé Julien•350

@julabinaSubmitted over 3 years ago

responsive html css - first challenge

1

Alex G•315

@AlexGDevProPosted over 3 years ago

Hello,

Nice work !

The first thing I notice is that you are using a level 3 title when you did not use a level 2 title. You must respect the order of the titles from level 1 to 6.

The second thing I noticed is that the statistics text is not in capital letters. You can use text-transform: uppercase.

Hope that help you.

Keep coding and have a nice day.

Ps : you need to have an alt atribute for img mark, it's a W3C error.

0