Skip to content
OverviewSolutions
11
Comments
13
P
SMHN
@smhnfreelancer

All comments

  • Omar•190
    @808NVSubmitted 10 months ago

    help with the border-radius and the images, how to make them like the design?

    Time tracking dashboard

    1
    SMHN•200
    @smhnfreelancerPosted 7 months ago

    Congrats! The screenshot shows that there are some minor CSS changes needed. But both the code and the live website links are broken, you can fix it.

    0
  • Jordan Davenport•970
    @jjdavenportSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Discovering object fit to use with the page images.

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

    When the validation fails and the error state is displayed, my moves up about one pixel and i still have not found how to fix this.

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

    Feedback regarding the validation aspect and my JS in general.

    Newsletter sign up with JS and flexbox

    1
    SMHN•200
    @smhnfreelancerPosted 7 months ago

    Nice work!

    1. The JS Working Perfectly.
    2. You can do the mobile view as well.
    3. When the email is invalid the input border also changes to the tomato color.
    4. Also I saw that you assign colors and other values in Javascript, a better approach is to add or remove a specific CSS class. Regards
    Marked as helpful
    1
  • SMHN•200
    @smhnfreelancerPosted 7 months ago

    Hi Congragulations on completing the task. On the mobile screen, you need to apply the gray bluish background color. regards

    1
  • SMHN•200
    @smhnfreelancerPosted 7 months ago

    Congrats! it's amazing, but I want to mention some points:

    1. set the body's background color to background: #FAFAFA;.
    2. "Experience more together" and "Stay connected with..." in desktop mode are left aligned.
    3. "Built for modern use" font-size is 16px and it's all caps.
    4. Hero images need to be slightly about 20px out of the browser's viewport, you can simply use object-position for that matter

    Again, your design is amazing. Regards

    0
  • SMHN•200
    @smhnfreelancerPosted 8 months ago

    Hi, I don't see any results, but a few points for making the project.

    1. take everything easy, there is no need to be pixel-perfect, and the code is more important.
    2. Use online resources like cheatsheets to understand the CSS grid.
    3. Use the style-guide.md file to find the fonts and also colors.
    4. Use KISS principle and make the project as easy as you can.
    0
  • SMHN•200
    @smhnfreelancerPosted 8 months ago

    Congrats! it's amazing, but a few points to mention:

    1. The line-through text font is Montserrat not Fraunces with about 0.8rem as a font-size.
    2. For the main text line-height:23px is more closer to the original design.
    3. The size of the Add to Cart button is not changing on the hover, this is flat, minimalist design.
    4. Also the mobile view design is not applied. Regards
    1
  • Letícia Fernanda•120
    @LeticiafbmSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud for knowing most of what i was supposed to use in this challenge

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

    I had a few challenges on this one, the first challenge was trying to style the markers on the lists, then how to style vertical lines and then how to make and style a table. As I was doing this challenge I was searching what I didnt know and trying to understand what i was confused about.

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

    I feel like there's a lot of things i could've avoided or made differently but i honestly can't tell what is it. I searched a little about how I would do the spacing between the makers and the text on the list but I couldnt figure it out and i still haven't, also I wish I knew how to properly merge cells on the table or if i even was supposed to use a table on this challenge.

    Recipe page

    1
    SMHN•200
    @smhnfreelancerPosted 8 months ago

    Congrats!

    1. for styling, list-style markers, you must use li::marker, to change the font and color.
    2. Your layout is not responsive, you can make it responsive using @media screen and (min-width: 375px), always use mobile ready first approach.
    Marked as helpful
    0
  • Divalady87•50
    @Divalady87Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of being able to do this project. I keep learning more and more and these challenges are really helping me understand how to code different things.

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

    My biggest challenge was the buttons. I know the buttons don't look like the preview, but I was having a hard time getting to look right. So to help with the buttons, I used a site: uiverse.io. It has a bunch of buttons that you can get code for. So that really helped me out.

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

    I need to work on buttons, while I believe in using what you have at your disposal, I would like to be able to make buttons without the help of external websites.

    Social Links

    1
    SMHN•200
    @smhnfreelancerPosted 8 months ago

    Congrats on doing this project, but it does not comply completely with the original design.

    1. There is a file named style-guide.md in the starter folder, you can find colors, fonts, and screen sizes to make the result like the original design.
    2. Pay attention to the KISS principle in your projects, keep them as simple as you can.
    3. The design is flat and minimalistic, you are not supposed to use complicated features like 3d gradients, transitions, and so on.
    4. Keep Up The Good Work.
    0
  • SMHN•200
    @smhnfreelancerPosted 8 months ago

    Congrats, your solution is good on the mobile screen size, but in desktop size, it's way bigger than it's supposed to be. you used percentages instead of rem or pixels. and it's made it different from the original design.

    0
  • SMHN•200
    @smhnfreelancerPosted 8 months ago

    font-weight:900 is used for the title, it must be *800.

    Marked as helpful
    0
  • vv•140
    @dblvvSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    • making body's height equals to that of the view port was time-consuming.
    • reminded of the need to change the defaults of html and body margin and padding.
    What challenges did you encounter, and how did you overcome them?
    • view port height
    • aligning main to the middle of the view port
    What specific areas of your project would you like help with?

    syntax remembering technique

    QR code component

    3
    SMHN•200
    @smhnfreelancerPosted 8 months ago

    font-size: 80%; I didn't expect that for the sub-text. it's mentioned in the style guide to put the font-size to 15px.

    0
  • SMHN•200
    @smhnfreelancerPosted almost 2 years ago

    Congrats! I don't know why, But I think you should generate a new screenshot I suppose. I tested the layout, but for some reason, your screenshot is wrong. Regards

    0