Skip to content
OverviewSolutions
17
Comments
10

moonji-spoonji

@moonji-spoonji280 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • moonji-spoonji•280
    @moonji-spoonjiPosted 6 months ago

    This looks fantastic! There are very few differences between your solution and the design and they're not very noticeable at all! I don't really have any comments for improving on your code, great job :)

    Marked as helpful
    0
  • moonji-spoonji•280
    @moonji-spoonjiPosted 7 months ago

    Hi there! I think you did a great job :)

    Here are some note I have to improve your solution for making it closer to the design:

    • the background color of the screen should be --clr-neutral-700
    • the container is smaller and the corners are not rounded as much which are both very simple fixes
    • and because the container is small, the image is cut off
    • the text color should be the same color as the button's background color
    • for the mobile design, the font sizes appear too small

    Overall, I think you did a wonderful job with the desktop and mobile designs as well as your JS code!

    Marked as helpful
    0
  • Sandaruwan•510
    @Sandaruwan7056Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I learned how to do DOM in js

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

    i need some help to make that triangle shape thing in the middle of the link section

    Article preview with HTML CSS and JS

    1
    moonji-spoonji•280
    @moonji-spoonjiPosted 7 months ago

    Oh wow, great job! Your solution looks almost identical to the design! The main differences I noticed are the background color (should be --Light--Grayish--Blue), the image is shown in full instead of mainly the left and center parts), and the padding of the content is not equal on all sides.

    I wasn't able to make the speech bubble type of thing either unfortunately, but here's a link to something I tried. Maybe you can make it work!

    0
  • moonji-spoonji•280
    @moonji-spoonjiPosted 7 months ago

    Hi there! I think you did a great job with this challenge!

    I have a few notes about your solution:

    • it appears quite large compared to the design (don't worry, mine did too lol) but it looks proportional to it!
    • the content is not positioned in the middle of the page, which can be solved by making your <main> a flex container and center justifying it and center aligning it.
    • Kira and Jeanette should have the same "profile-quote" color.

    Keep up the great work!

    Marked as helpful
    1
  • moonji-spoonji•280
    @moonji-spoonjiPosted 7 months ago

    HI there! I think your solution looks great!

    Here are some differences I've noticed between your solution and the design:

    • your background does not reach the bottom of the page completely, I'm not sure what causes that to happen so I don't know how to solve that, but here's an article for something that might help.
    • the distance between the title and the top of the screen is a bit small, you can easily improve this by increasing the padding to 4rem or more in your .main
    • titles for each card are a bit too big or too heavy of a weight, so maybe try out font-weight: 400 or a smaller font-size.
    • the line-height of the paragraphs within the cards are a bit small also, so maybe increasing it to 1.7rem might make it closer to the design.

    Those are all my notes. I think you did a wonderful job, especially with the responsiveness!

    0
  • moonji-spoonji•280
    @moonji-spoonjiPosted 7 months ago

    It appears that your solution is larger than the original but not by much so great job on that!

    Here are some differences I notice from the first look at it:

    1. The name of the perfume spans over 2 lines rather than two, which may be due to a smaller font size or bigger card size.
    2. The paragraph with the description is quite dense and would need a larger line-height.
    3. The button's corners are not rounded, so applying a border-radius of a few pixels will help fix that.
    4. The smaller, grayed out price is does not have a line through but that can be easily fixed by writing this: text-decoration: line-through;

    With your code, one thing I would add to your HTML is the <main> landmark to contain everything but the <footer> element. This makes it more accessible to users. With your CSS, I would suggest the following:

    • use rem for font-size
    • use percentage or a non-unit for line-height
    • and use em for letter-spacing

    Great job overall! Make sure to come back to these older challenges and improve them when you learn more!

    0
View more comments