Skip to content
OverviewSolutions
3
Comments
6
Pedro Celeste
@Pedro-Celeste

All comments

  • Pedro Celeste•130
    @Pedro-CelestePosted almost 2 years ago

    Hey @@tjg1093! 😎👍🏻

    Congratulations on finishing your first frontend mentor challenge!

    Here are some things you could change to make your code even better:

    HTML:

    • Every page should be contained in at least one semantic element. This is really important stuff when it comes to accessiblity. Instead of using <div class="card">as your main parent element you should use <main>. See more about semantic HTML here.

    • When writing ant alternative text for the alt attribute of an <img> element, don't include words like image, photo or picture, since screen readers already announce it like one. Instead of alt="qr-code image" you could write something like alt="QR Code that goes to the Frontend Mentor website.".

    CSS:

    • It's generally a good idea to use border-box as the box model of your web page. This can save a lot of time in more complex projects since it simplify the way you calculate padding, borders and margins. You could achieve it like this:

      *, *::before, *::after { box-sizing: border-box; }

      You can learn more about the box model and border box here.

    • In the rules for the <body> element, instead of using margin: 60px 10px 100px 10px;which is not useful when you think that users with completely different screen sizes are going to access your website, use min-height: 100vh;. This makes the webpage have a minimum size equal to the viewport, completely centering the card with the flex properties you set.

    • When defining sizes in your web page, relative units can make it much more responsive and accessible, if you are interested in learning more about it, here's an awesome article that explains why an how.

    I know that's a lot of things, but this stuff can really makes the difference you know. 😅

    Hope to see more of your code here soon! Have a nice one :)

    0
  • Pedro Celeste•130
    @Pedro-CelestePosted almost 2 years ago

    Hey @@tjg1093! 😎👍🏻

    Congratulations on finishing your first frontend mentor challenge!

    Here are some things you could change to make your code even better:

    HTML:

    • Every page should be contained in at least one semantic element. This is really important stuff when it comes to accessiblity. Instead of using <div class="container">as your main parent element you should use <main>. See more about semantic HTML here.

    CSS:

    • It's generally a good idea to use border-box as the box model of your web page. This can save a lot of time in more complex projects since it simplify the way you calculate padding, borders and margins. You could achieve it like this:

    *, *::before, *::after { box-sizing: border-box; }

    You can learn more about the box model and border box here.

    Hope to see more of your code here soon! Have a nice day :)

    Marked as helpful
    0
  • Pedro Celeste•130
    @Pedro-CelestePosted almost 2 years ago

    Hey @fatimamammadova! 😎👍🏻

    Congratulations on finishing this challenge, you did well!

    Here's some things you could improve in your code:

    HTML:

    • Every webpage should be contained in at least one semantic landmark, this helps a ton with accessibility. Instead of using <div class="container"> as the central element you can use <main> instead.

    • HTML headings work based on a structure, it's not a good idea to start with <h3> since there's no previous <h2> or <h1> in the document.
      You can improve the structure of you markdown by changing <div class="card-title"> to something like <h1>Discover the benefits of...</h1>.

    • Lastly, you can simplify your code for the three last items using a unorderd list, like this:

    <ul>
  <li><strong>10k+</strong>
     <br>COMPANIES</li>
   <li><strong>314</strong>
      <br>TEMPLATES</li>
    <li><strong>12M+</strong>
       <br>QUERIES</li>
</ul>

    This is a matter of preference, but I would argue that this is a lot simpler than creating tons of divs haha. 😅

    CSS:

    • There are a lot of time in your CSS that you use flexbox to center your elements, You could save time and space creating the following rule:
    .flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

    And apply it on your html elements like this: <div class="container flex">.

    • When defining values for font-size it's usually a better idea to use relative units. They allow you to make more accesible and responsive webpages. There's an awesome article explaining why and how here.

    Hope to see more of your code on the platform soon. Have a nice one!

    Marked as helpful
    0
  • Pedro Celeste•130
    @Pedro-CelestePosted almost 2 years ago

    Hey there! 😎👍🏻

    Good job on finishing this Frontend Mentor challenge :)

    Here are some things that you could do to improve your code:

    HTML:

    • All webpages should be contained in at least one semantic landmark. So instead of using <div class="container"> you can use <main>. This makes webpages more accesible for those using screen readers.
    • The first heading you used in your document was a <h2> element. Headings work based on a structure, so it's generally a good idea to always start off your text with a <h1> instead.
    • 🖼️ Alternative text provided to images don't need to include words like "image", "photo" or "picture", since screen readers already announce that it's an image that we're talking about. Instead of using alt="image-qr-code" you could use something like alt="QR Code that leads to the Frontend Mentor Website".

    CSS:

    These are some small tweaks you could do to make the webpage look a little bit more like the original design.

    • Add a little bit of margin-bottomto the last <p> element to create a little bit of space.
    • Notice that the main container in the original design has a slight box-shadow bellow it. Tip: You coud use rgba or hsla to add opacity to the color of the shadow and make it weaker.

    Additional things:

    • Get in the habit of writing README.md files for your github repository, it can help understand your process and allow other users to give more insightful feedback to your code.

    Thanks for being part of this community, and hope to see more of you code soon!

    Marked as helpful
    1
  • Florent•30
    @floHalletSubmitted almost 2 years ago
    What are you most proud of, and what would you do differently next time?

    Won't use px next time

    What challenges did you encounter, and how did you overcome them?

    Not very challenging

    What specific areas of your project would you like help with?

    No help required

    first challenge

    2
    Pedro Celeste•130
    @Pedro-CelestePosted almost 2 years ago

    Hey @floHallet! Congratulations on completing your first frontend mentor challenge! 😎👍🏻

    You did great, here is some things you could change to improve your code:

    HTML:

    • All pages with text should have a <h1> tag, this makes the main text more accesible to those using screen readers. Instead of using <p class="strong">, you could use a <h1>element.

    • You should add an alternative text in the alt attribute in the <img>element. This provides a text in case there is a problem loading the image that will also help those using screen readers. You can learn more about the alt attribute here.

    CSS:

    • I would recommend for the next challenges (and personal projects as well) to write your css code on a separate file. This makes your code much more organized and readable. You can learn more about linking to external CSS files here.

    • Notice that you only used absolute units in your css rules, and that might work fine in screens with certain sizes but might break completely in smaller screens. It is usually a better idea to use relative units. Here's an awesome article that explains why and how.

    • Last thing, the main card has a slight box-shadow when you look at the original design. Tip: You can convert the hsl color to an rgb equivalent and use rgba to define an opacitiy level and make the shadow more transparent.

    Welcome to the community! Hope to see more of your solutions to challenges soon!

    Marked as helpful
    0
  • Pedro Celeste•130
    @Pedro-CelestePosted almost 2 years ago

    Hey dude! Congratulations on finishing this code challenge!! 😎👍🏻

    Here's some feedback on how you cand improve you code:

    HTML:

    • Instead of using <div class="card">, you should use a <main>tag instead. This improves accessibility fo people who uses screen readers. I use it myself some times and it really makes a difference.

    • Add an alternative text to your image using the alt attribute in the <img>element. This provides a piece of text describing an image to those using an screen reader. For example alt="A QR code that leads to the Frontend Mentor website". You can learn more about the alt attribute here.

    • Every page with headings should start with an <h1>element. You can change the <h2> in the source code to fix this.

    CSS:

    • Your CSS is great, you only forgot to add the --dark-blue: hsl(218, 44%, 22%); color to the <h1>element. It might be subtle but it's not complete black.

    • If you notice in the original design, there is a slight box-shadow below the main container. Tip: convert the light gray color to rgb and use rgba to define an opacity value to make the shadow weaker.

    That's it!! Keep up with the good work and have a nice day!!

    Marked as helpful
    0