Skip to content
OverviewSolutions
7
Comments
11
David Miller
@Humerous

All comments

  • David Miller•180
    @HumerousPosted about 2 years ago

    Hi Joshua,

    Just some feedback for your design.

    Firstly well done on completing the assignment.

    Secondly, you must always make sure to run your code through HTML/CSS validators, to show you errors, etc. There are quite a few errors, so maybe slow down and focus on lean and cleaner code

    Your overall design is not correct as your padding , margins and borders are not to the brief. I see that your mobile view is not the right size. Try using Flex-box.

    display : Flex - https://codepip.com/games/flexbox-froggy/

    Also, when looking at the brief, it seems that your typography and line spacing are incorrect and you forgot to add the active state function , Eg below

    button:hover{ background-clor: #f45d79 }

    Happy coding :) and please mark if this was helpful.

    0
  • Andrew Hsu•10
    @a-hsuSubmitted over 2 years ago

    Questions:

    • What is the best way to center this card?
    • How can I change the background color of the page?

    QR Code Component

    3
    David Miller•180
    @HumerousPosted over 2 years ago

    Hi Andrew,

    Just some feedback for your design.

    Firstly well done on completing the assignment.

    Secondly, you must always make sure to run your code through HTML/CSS validators, to show you errors, etc. There are quite a few errors, so maybe slow down and focus on lean and cleaner code

    Also, when looking at the brief, it seems that your typography and line spacing are incorrect.

    as well as your padding, and margins are not fluent.

    I quick and easy way to centre your container is by setting the body element:

    body { margin: 100px auto; backgroud-color: hex color; }

    Please take a look at my solution for an example:

    https://www.frontendmentor.io/solutions/qrcodecomponentmain-1sMNGUbgPi

    Happy coding :) and please mark if this was helpful.

    Marked as helpful
    0
  • arash•280
    @deadazixSubmitted over 2 years ago

    that was a bit hard and took me few hours to write this,

    do i qualified to start learning react? or when should I start react

    room

    1
    David Miller•180
    @HumerousPosted over 2 years ago

    Hi Arash,

    Just some feedback for your design.

    Firstly well done on completing the assignment.

    Secondly, you must always make sure to run your code through HTML/CSS validators, to show you errors, etc. There are quite a few errors, so maybe slow down and focus on lean and cleaner code

    Your navigation section seems to crush and not spread out eventually.

    I would not move onto 'REACT' yet until you have the Basics on frontend development done to fine art, but that being said it's my opinion

    Also, when looking at the brief, it seems that your typography and line spacing are incorrect.

    as well as your padding, and margins are not fluent.

    Happy coding :) and please mark if this was helpful.

    Marked as helpful
    1
  • David Miller•180
    @HumerousPosted over 2 years ago

    Hi Samuel,

    Just some feedback for your design.

    Firstly well done on completing the assignment.

    Secondly, you must always make sure to run your code through HTML/CSS validators, to show you errors, etc.

    Also, when you get the brief, ensure that your typography and line spacing are correct.

    Check your paddings, margins are fluent.

    Happy coding :) and mark if this was helpful.

    0
  • Terry•10
    @tbabyukSubmitted over 2 years ago

    I ended up using "display: grid" for the desktop version and "display: flex" for the mobile. Would be curious if you used a different technique, perhaps the same display for both versions? Let me know!

    Product Review Card Solution - using Grid and Flex

    4
    David Miller•180
    @HumerousPosted over 2 years ago

    Hi Terry,

    Overall great effort.

    I good way to send out your overall different font sizes as well on all screens sizes is to set the

    html { This is the maths: /* font-size: 10px; / / 10px / 16px = 0.625 = 62.5% / / Percentage of user's browser font-size setting */ font-size: 62.5%; }

    by doing this you are converting the 16px standard font size, to 10 rem or em and this in my opinion is the right approach.

    Also, always run your code through HTML/CSS validators.

    Please like the comment if you found it helpful, Happy coding :)

    0
  • David Miller•180
    @HumerousPosted over 2 years ago

    Very nice :)

    My only advice would be to concentrate more on padding, margins and overall spacing.

    Also what I do is run my code threw HTML / CSS validators.

    But your code is clean. I Hope 🙏🏻 this helps you out and like it if you find it helpful.

    Happy coding :)

    0
  • David Miller•180
    @HumerousPosted over 2 years ago

    Hi Arey,

    Very nice design.

    Try focusing more on your margins, padding and image placing. On the button, you needed to add some box-shadow property.

    Also, I always use an HTML/CSS validator to check the code before submitting my code because then I know that my code is 100% before submitting.

    Hope that helps you out.

    Happy coding :)

    Marked as helpful
    1
  • David Miller•180
    @HumerousPosted over 2 years ago

    Hi Rutuja,

    A reasonable overall effort, but try to stick to the 'readme' file next time, as these challenges are like real-world projects, so not sticking to the brief will show you can't follow guides,

    Also, use a colour picker to get colours right, HTML/CSS validator to check the code

    Hope that helps you out.

    Happy coding :)

    Marked as helpful
    1
  • David Miller•180
    @HumerousPosted over 2 years ago

    Hi Tiffa J,

    Nice effort.

    Just went over you submitted project.

    Just a few piece of feedback.

    01._Always use a HTML/CSS validator to go over your code before submitting it. 02._Use the screenshot as a starting point to get your padding, margins , line-height etc 03._Don't rush either and focus on getting the parameter's correct.

    Other than that. Keep Coding !

    Marked as helpful
    0
  • David Miller•180
    @HumerousPosted over 2 years ago

    Hi Friend,

    Just some feedback is that you need to focus more on your padding, margin, and line height.

    When starting with a project always start with the following folder structure -

    index.html style.css (not index.css)

    Take your time and focus on the screenshot and image as a starting point.

    Hope this will help you out!

    Happy coding :)

    0
  • David Miller•180
    @HumerousPosted over 2 years ago

    Hi Rohit,

    Just some feedback for your solution submitted.

    Your overall design is not the correct size. It needs to be resized for both platforms.

    Focus on the size of the image and screenshot and use that as a starting point.

    Also too much code, less is more.

    Instead, take your time to get the cover design right.

    Hope this will help you.

    1