Skip to content
OverviewSolutions
3
Comments
15
Dreamleaf
@Dreamleaf

All comments

  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Generally very good, but you have some problems with the card width changing on different viewport sizes.

    For example, the image could be placed without a wrapper element to fix that section - or you could add display: contents; to the .header__bg class.

    The html could also be simplified by reducing the number of wrapper divs you are using, I approach these types of layouts with the following structure:

    main.card

    img (no wrapper needed) aside (the tag and post date) div.content (title and teaser text) user info (could wrap in a semantic aside or footer if desired) close main

    You can center everything using flex or grid on the body, and add a standard padding to the .card. This way you may just need to tinker with specific sizings in a media query if needed.

    Hope this is helpful! And have a great christmas!

    Marked as helpful
    0
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Looks great, the only thing I think could improve is to add some padding or margin on mobile view to stop the card hitting the sides.

    0
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    I really like the additional pulse animation from the user image, however while adding that you have missed the card hover transition.

    The box-shadow should grow on hover. I'm assuming that if you can create the cool additions that this was just an oversight.

    Marked as helpful
    1
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Generally looks good.

    I note that you missed the interactive elements though.

    It should have a hover to the yellow on the title link and the box shadow should grow on hover.

    Both are pretty simple to add in, but overall you did a great job.

    Marked as helpful
    1
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    A couple of points about the text elements in the card.

    1. You have both the title and text within p tags, ideally there should be a heading within the element. So you could have made the "improve your...." text a h1 element. In a real world situation, there would likely be other things on the page and the title may be better suited as a h2.

    2. You have both text sections set with a single font size, the design has them differently - and while there is a bit of trial and error needed, you could have styled them accordingly.

    3. When you declare the font - always include a fall back font if the main choice is being pulled in from an external source. This way if there is an issue with the fonts loading, you still control how it looks. For this you just need to write: font-family: outfit, sans-serif;

    4. Look at using REMs for the font sizing instead of PX values, definitely have a read up on the difference and why it is better.

    Keep going though, every time you write code it will improve.

    1
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Neatly done, good job!

    One practice that is good to get into the habit of doing, even on smaller projects, is to separate the CSS into it's own file. While it doesn't impact challenges like this, in the real world the separation of html and css is standard, so it's just good to do :)

    0
  • S02K•50
    @S02KSubmitted 11 months ago

    This was my first ever (small) coding project, my question is simple and i hope you all can tell me what i could have done better so i can become a better web developer.

    • Are there any best practices i should have used?
    • Did i do it the easiest way or are there better / faster ways to tackle this project?

    QR code component HTML & CSS beginner

    2
    Dreamleaf•230
    @DreamleafPosted 11 months ago

    Pretty clean code for a beginner, well done!

    Two things I can spot in your code that would improve things that may not be obvious.

    For the QR image, be specific about what the image is doing... eg. "QR Code to frontendmentor.io" instead of just "QR Code". This will be more informative for users of screen readers and tell them exactly what will happen.

    Secondly, you have used 100vh on the body class. This isn't wrong, but you may sometimes get unintended results on mobile viewports. Do a search and read about the alternative values of SVH and DVH - basically, just using VH includes UI elements such as the address bar - the alternative can ignore these and just focus on the DOM part of the view.

    Great work though, I look forward to seeing you tackle more challenges.

    Marked as helpful
    1
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Good job!

    Just a couple of notes on using css grid.

    In your css you have included width:100%, this isn't needed as a grid element is 100% by default.

    Also, you are using height:100vh, while not wrong, there are better units to use. Check out SVH and DVH - the problem with using just VH is that on smaller views (mobile etc) it takes unwanted elements into account - like the address bar.

    Hope this is helpful.

    Marked as helpful
    2
  • kush452•20
    @kush452Submitted 11 months ago

    As a beginner it took me much time to build this simple cards website even when using bootstrap

    So I would like to hear your recommendations on how can i improve myself on it

    A simple card layout by the help of bootstrap

    1
    Dreamleaf•230
    @DreamleafPosted 11 months ago

    Good job, there is so much to learn as a beginner.

    I would suggest that you skip using a framework like Bootstrap for your early learning and instead learn to write the CSS by hand. Doing this will help you understand what Bootstrap is doing and how best to use it.

    This is a relatively simple design to achieve, and for the most part your html structure has identified the key sections to target. I personally prefer to use GRID for layouts, you can see a primer for that at this link. There is a lot of information there, and once you get familiar with it, you should be able to feel confident in jumping straight in writing your own CSS.

    You should also be (gently) critical when comparing to designs, take care to try and match as much as possible. Obvious differences between your version and the original design are size of padding around the QR code and text alignment. Both are really easy to change, and will give you a sense that you are learning more. Search for text-align and also CSS box model - they should give you some good information.

    Hope these pointers help.

    Marked as helpful
    2
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Great job, just a small note about using css shorthand when declaring things.

    A good example is on your cards where you specify values for padding and use: padding-top:30px; padding-bottom:30px; padding-left:30px; padding-right:30px;

    If they are all the same you can simply use: padding:30px;

    If you wanted the same top and bottom and a different value (but the same) for left and right you could: padding: 30px 10px; The first value refers to top and bottom, second value is left and right.

    If all sides wanted different padding, you can: padding: 30px 20px 10px 5px The order here is important and good practice to understand it. The first is TOP The second is RIGHT The third is BOTTOM The fourth is LEFT
    So, padding: top right bottom left;

    There is also a way to specify different top and bottom, and have the same left and right. padding: top leftANDright bottom; which is padding: 30px 10px 60px.

    Hope that helps, it can be used for other attributes such as margin as well, much quicker to write and keeps it all easy to read.

    0
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Looking good, I like the way you did the top border color with the ::after, very smart.

    You have an alignment issue though on larger screens with the top section no being centred along with the cards. You could use CSS Grid to easily center these sections by adding the following to your .container class:

    display: grid; justify-content: center;

    Hope this helps!

    Marked as helpful
    1
  • Dreamleaf•230
    @DreamleafPosted 11 months ago

    Just a small thing, but in the QR code alt text, you could be more descriptive and say where the user would be taken. So like, alt="QR code to frontendmentor.io".

    When a screen reader uses the alt text it's helpful for the user to know the function of the image. If an image is purely decorative, then leave alt text blank, this will be skipped, but be as helpful las possible for 'functional' images.

    Hope this helps!

    Marked as helpful
    1