Skip to content
OverviewSolutions
12
Comments
10
moonji-spoonji
@moonji-spoonji

All comments

  • moonji-spoonji•230
    @moonji-spoonjiPosted about 1 month 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•230
    @moonji-spoonjiPosted about 2 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•300
    @Sandaruwan7056Submitted about 2 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•230
    @moonji-spoonjiPosted about 2 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•230
    @moonji-spoonjiPosted about 2 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•230
    @moonji-spoonjiPosted about 2 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•230
    @moonji-spoonjiPosted about 2 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
  • moonji-spoonji•230
    @moonji-spoonjiPosted 2 months ago

    I see a few missing and misplaced pieces, but it looks great over all! Here are the changes and additions I think would make your project closer to the design:

    • the body doesn't seem to be reaching the bottom of the page in the side-by-side preview here, so maybe you could add height: 100vh or 100% to your body element block to make it
    • the background color of .recipe-wrapper should be --clr-White
    • the background color of .preparation-time should be --clr-Rose-White
    • the spacing between the headings of each section and their contents should be larger, so maybe you could use a margin instead of using line-height
    • the color of the horizontal rules (hr) doesn't show, a way you can style it is like this:
    hr {
  border: 1px solid var(--clr-Light-Grey);
}

    Those are all my notes, very simple fixes that I think would help improve your project!

    0
  • Fernando Octavio Viveros•20
    @agros55Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I enjoyed being able to practice design using FlexBox. For next time, I would use a CSS preprocessor like SASS or LESS.

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

    Using Flexbox was my challenge due to lack of practice, but I overcame it by using the CSS documentation.

    Social Links Profile - Responsive design

    1
    moonji-spoonji•230
    @moonji-spoonjiPosted 2 months ago

    Great job with this challenge! Your solution looks a bit smaller but proportional to the design. Your code is very neat and reusable!

    There are only two small things I noticed:

    1. The Twitter link is missing a reference, here's the change to your code <a href="https://x.com/" target="_blank" class="links__item">Twitter</a>
    2. The links seem to be a lighter font weight than the design, so maybe you could try font-weight: 600 or font-weight: 700 in the .links_item block

    I'd love to see your use of SASS or LESS in future challenges!

    0
  • Gustavo Dantas•20
    @IrineuRasteroSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Less difficulty centralizing and working partially with rem.

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

    I didn't start with mobile and had some difficulties trying to make the page responsive without media queries, changing the sizes to rem solved a big part of the issues

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

    I frequently have path problems that only appear after I upload to Github, Is there any extensions for VS Code that allow you to see how the Github deployment will look like?

    Responsive Blog Preview card

    1
    moonji-spoonji•230
    @moonji-spoonjiPosted 2 months ago

    Your solution looks a bit smaller but so close to the design, so great work! I also love your responsive design!

    One thing I noticed, even though it's a small detail, the line-height for your .content should be 150% according to the Figma file provided to us, but of course it's not a major difference.

    I think your code is well-structured and easy to read, but I think you would find it beneficial to use the README.md file for the pupose of reflection and future reference! It also serves as a guide for the user/person reading and executing your code.

    Marked as helpful
    0
  • Symbian581•110
    @Symbian581Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I completed this project in least time. This project took very less time for me to complete. I will learn javascript and make this site more interactive.

    Qr Code Component Main

    1
    moonji-spoonji•230
    @moonji-spoonjiPosted 2 months ago

    Great job with this challenge, you were so close to the solution! I like your specificity of css selectors and neat ordering of the properties. Maybe since the h2 and p elements in your code have some lines in common, you can write the font-family, font-optical-sizing, font-style, and text-align lines in the body selector or group the h2 and p together.

    0