Skip to content
OverviewSolutions
9
Comments
9
turanarican
@turanarican2022

All comments

  • Moniruzzaman Monir•740
    @ad-monir2001Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I have solved this challenge and I have learned many things on this project.

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

    I have not faced any challenges on this project.

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

    No other.

    Blog preview card

    1
    turanarican•200
    @turanarican2022Posted 9 months ago

    Hello, I reviewed your code and here my opinions;

    • it looks good generally but you could have used semantic elements. You can change container div with <main> and the attribution div with <footer>

    • you used a button for the yellow "Learning" tag which in my opinion is not a good practice at all. I would prefer simply a <span> whose display is set to inline-block. Buttons should instead be used for "triggering actions" like form submit or opening a modal window.

    • spacing and sizes require some adjustments like avatar image and text are too large. The most important is "description text" would be much nicer with some line-height added.

    Nevertheless good job. Keep up! Happy coding!

    1
  • turanarican•200
    @turanarican2022Posted 9 months ago

    Hey, congrats for completing the challenge. I want to make some suggestions in a hope they might help:

    • you used <li> elements for tip percentages. form the UX point of view, we generally use the interface from top to bottom. I entered $100 and clicked for example %15, it only showed hover state but did not stay that way, after that I entered num of people but I had to come up again and click one of percentages again for calculation to happen.

    • instead you can wrap all elements in a form and this way user can use them in any order. To achieve this you can use radio buttons for percentages, you can style their wrapper box as you like and with css you can hide circles.

    • and for the reset button, you don't have to use JS if you follow the above suggestion. There is a "form" attribute you can use for any input. By using this, you can tie a button or input element to a form that it is not inside of that form. This concept is important and along your front end journey it will help you a lot. you can have a look at the following resources to understand this concept better:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form

    keep up the great work!

    Marked as helpful
    1
  • turanarican•200
    @turanarican2022Posted 9 months ago

    Congrats, I think your code is quite clean. Keep up the good work!

    0
  • turanarican•200
    @turanarican2022Posted 11 months ago

    I suggest you to wrap author info in <address> (as MDN also recommends it) instead of <footer>. Semantically author info is tied to the content but not appropriate to present in a <footer>

    Though using <article> is a good decision IMO.

    Font weights are overall to high.

    0
  • turanarican•200
    @turanarican2022Posted 11 months ago

    Congrats for making it to the end.

    My suggestion; it would be nicer if all the other options were collapsing when one of them was opened. I mean, more than one option shouldn't be open at the same time

    0
  • turanarican•200
    @turanarican2022Posted 11 months ago

    I suggest you to make it at most 90% wide on mobile. It looks too crumped

    Marked as helpful
    0
  • Isaiah Williams•40
    @Zayacode96Submitted 11 months ago

    I utilized some CSS variables for the main colors to make implementing the color design easier. Relatively easy project for my beginning skill level, although I drew a blank on some CSS properties like "font-style". I wrote "text-style" instead and was wondering why it didn't work. End up not using it after.

    ALL IN ALL, check out my version and code. Would appreciate it. Thank you guys.

    BLOG PREVIEW CARD

    5
    turanarican•200
    @turanarican2022Posted 11 months ago

    All the above comments make sense and I wanna add something. There is another value for min-height. It is 100svh instead of 100vh. It helps mobile devices to show all the content even while some of the screen is occupied with top bar of the browser. You can search YouTube for Kevin Powell's video on this.

    Happy coding!

    0
  • turanarican•200
    @turanarican2022Posted 11 months ago

    First congrats for making it to the end.

    Here my thoughts

    -- I would use for the "Learning" card a span instead of h3. -- I would use <address> for the author info (as MDN recomends) -- You should give some line-height to the <p> element as per the original design requires it -- You did give the "Learning" tag too much padding than the design -- Lastly, your card text is too bold

    Marked as helpful
    1
  • Noel Hoppe•350
    @noelhoppeSubmitted 11 months ago
    1. Is it clever to use flexbox?
    2. Do I need the .container div or can I only use the .wrapper div?
    3. Kind of use px, %, em, rem for layout?

    QR code component using flexbox

    2
    turanarican•200
    @turanarican2022Posted 11 months ago

    First, congrats for completing the challenge. As per your questions;

    1. FlexBox is a good solution here as it is very suitable to use for component based layout,
    2. I used a .container div with a background-color of that faint blue to center the card in the viewport with a height of 100vh and width of 100vw and I used a .card div like you used a .wrapper div
    3. if you want to use rem units, make sure to set font-size: 62.5% in your root html element so that when you size something for 1.2rem for example it becomes 12px

    Hope these help.

    2