Skip to content
Submitted almost 3 years ago

simple html and css

Hammad-Ahmad47•20
@Hammad-Ahmad47
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

give ur feedback on how to overlay the image with colours and also how can i modify it for mobile setup im a beginner in web development so plz give ur honest suggestions at how i can improve my skills

Community feedback

  • Connor Belding•20
    @connorbeldingPosted almost 3 years ago

    to overlay an image with color you can use the background shorthand property like this:

    .class {
  height: 500px;
  width: 500px;
  background: linear-gradient(rgba(141, 31, 224, 0.6), rgba(141, 31, 224, 0.6)),
    url("https://picsum.photos/500");
}

    you definitely need to learn about responsive design. using css grid,flexbox, and media queries, it allows you to create visual elements that grow and shrink to fit the user's screen size.

    what you have right here as a beginner is not bad! learn about the above topics (and css in general because it is quite expansive) and you'll be able to turn it into a professional page!

    Marked as helpful
    2
    Hammad-Ahmad47•20
    @Hammad-Ahmad47Posted almost 3 years ago

    @connorbelding Thanks for the feedback mate and yes as a beginner i will definitely learn about them.

    1
  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To get rid of the accessibility/HTML issues shown in your Report:

    • wrap everything in your body in <main> OR use semantic tags OR give role="" to the direct children of your <body> ... Click here to read more
    • start your headings with <h1>, and move up by one level each time

    Good job! :)

    Marked as helpful
    1
    Hammad-Ahmad47•20
    @Hammad-Ahmad47Posted almost 3 years ago

    @anoshaahmed Thank u so much :)

    1
  • Kenneth Brandon•260
    @kbrandon19Posted almost 3 years ago

    Hi @Hammad-Ahmad47 it's best practice to develop with mobile first in mind. One way I do this is to size my browser to 375px (iPhone 6/7/8) via Inspect that way I can see what it will look like on mobile when coding. To make things responsive when resizing from mobile to desktop I use flexbox but some use CSS grid.

    Here are some resources, if you need any help feel free to reach out!

    Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/

    Mobile First Design https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/ https://kinsta.com/blog/responsive-web-design/

    Marked as helpful
    1
    Hammad-Ahmad47•20
    @Hammad-Ahmad47Posted almost 3 years ago

    @kbrandon19 Thanks for the feedback bro i will also try to develop mobile first and also what do u prefer should i learn both flexbox and Css grid or just learn one and stick with it also in your opinion which one is better between these two?

    1
    Kenneth Brandon•260
    @kbrandon19Posted almost 3 years ago

    @Hammad-Ahmad47 I can't say which one is better as I don't understand the full capability of either just yet but I think they're good for different situations and web designs. Overall it's good to know how both Flexbox and CSS grid works but learn the basics and functionality of one first before moving to the next.

    Marked as helpful
    1
  • idukpaye alex•725
    @Esesosa-maxPosted almost 3 years ago

    You did not do your HTML properly that can affect your CSS your have four separate divs which is wrong what you will do is that you should divide them into 2 divs(.left,.right) then inside those 2 divs, you can have the differents section of the card because this way you will have full control over the two sections of the card. I think you should learn flexbox first then you can learn CSS grid because CSS grid is for more advanced layout even me I do not use it all the time

    1
    Hammad-Ahmad47•20
    @Hammad-Ahmad47Posted almost 3 years ago

    @Esesosa-max Thanks for the feedback bro and yes i am learning flexbox now so hopefully i can improve after learning that.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord