Skip to content
OverviewSolutions
5
Comments
6
P
Jacob Stone
@jacob-stone9554

All comments

  • P
    Arnaud Lahaut•200
    @Arnotts33
    What are you most proud of, and what would you do differently next time?

    Happy with this first JS challenge. Might not be the perfect JS way to do it, I will work on it again to try to shorten it when I get more knowledge. But it works :)

    I am happy I got the desktop and mobile versions right with the different "Share" layouts.

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

    Trying to get the image exactly as it is on the preview. Could not get it exactly as I wanted.

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

    Any feedback welcome and hints on how to play around with the image and my JS :)

    Article preview component CSS & JS

    1
    P
    Jacob Stone•130
    @jacob-stone9554

    Hi Arnaud, fantastic work on your solution! I think it looks great!

    One thing that you mentioned that could be improved is having the image lined up properly. One thing you could try to use is the object-fit property in your CSS where you style your image. While my solution is far from perfect, I used object-fit: cover and it seems to work pretty well for the given situation. If you would like to know more about the object-fit property, you can read about it here.

    Everything else looks great! Let me know if you have any questions, happy coding!

  • Pedro Vitor Bezerra Clemente•80
    @Pedro1p0
    What are you most proud of, and what would you do differently next time?

    I commit a mistake putting a margin like 'main > *' that putted a margin in every son of the main and it was very annoying code with that, but when i realize i was almost finishing the page so a moved on.

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

    It was quite difficult align the list of nutrition.

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

    I need to improve the use of flexbox and learn more how i can deal with the margins.

    Recipe page

    1
    P
    Jacob Stone•130
    @jacob-stone9554

    Hi Pedro! Great work on your solution, it looks fantastic! There are a few things I think could be improved to make it even better though.

    One thing that I think you would be good for you to try is using an external stylesheet. Right now your styles are embedded into your index.html file, and since there are a lot of styles it kind of breaks up the flow of your HTML and would makes the file itself longer than it needs to be (but great work on the styles, your solution looks fantastic). If you want to implement an external stylesheet, all you need to do is create a file like styles.css and cut/paste your current styles into that file. Then in your HTML, you would add the line <link rel="stylesheet" href="styles.css">. This would remove 211 lines of CSS from your main HTML file!

    You mentioned that it was difficult to align the nutrition list. Your implementation works great but in the future, if you wanted to try a different approach you could create a <table> element with two columns, one for the nutrient and one for the amount, applying a border to only the bottom of a table row to achieve a similar look. While my solution isn't perfect and still needs some work, you can look at the code for my solution here to get an idea of how to style a table like that.

    As far as flexbox and margins go, where and how you used them seems okay for this solution. It might help to declare some sort of flex container that will hold the other elements of your solution, like the instructions, prep time, and so on because it will make your page responsive. I think it helps to think of a flexbox as a "container" that will hold the elements inside of it a certain way. When you declare display: flex, a container becomes a flex container. You can then specify flex-direction like row or column. If you apply a margin to a parent, that margin is also applied to its children, and their children, and so on.

    I hope this helps, let me know if you would like anything explained further! Happy coding!

    Marked as helpful
  • P
    Jacob Stone•130
    @jacob-stone9554

    Hi! You have a pretty good start on your solution! I do think it could be improved in a few ways:

    One way you could improve the structure of your HTML is through the use of semantic HTML. Semantic HTML makes your code more organized and easier for other developers to read and understand. For example, you have <div class="main-background"> on line 16 of index.html. Instead of that div, you could have used <main> which would signify that it is where the main content of your page is going to reside. If you'd like to read more about semantic HTML, here is a brief article that breaks it down pretty well.

    Another way you could improve your design is by implementing the font provided. The easiest way you could do that is to get the embed link from Google Fonts, for this specific challenge they are using the Inter font, if you follow that link and click "get font" in the top right it will give you instructions on how to use it.

    Your implementation of the card looks good! It is a little larger than the design, but I think if you sized down the card a little bit and sized down your buttons a little bit your solution would be a lot closer to the given design. For example, instead of having your buttons height set to 14%, you could try something a little smaller. On the note of overall design, if you set the background-color of your main-background to hsl(0, 0%, 8%); it would help get you a little closer to the given design.

    Finally, I think that the inclusion of a profile picture would be a nice touch! You can specify an image with <img src="path/to/your/image" alt="a description of the image"> which will insert the image into your webpage. You can make it a circle by adding the border-radius: 100% attribute to your style rule.

    I really like the hover effect you did for your buttons, it was a nice touch! I hope this helps, feel free to reach out if you have any questions. Happy coding :)

  • Emmanuel Moolongawi•110
    @EMLzmile
    What are you most proud of, and what would you do differently next time?

    J'ai aimé ajouter le font-family et surtout les importer grâce à font-face

    Je lirai d'abord le style guid

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

    Import the font-face I read a documentation

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

    To adjust the size of the card with min and max width

    Blog preview card

    2
    P
    Jacob Stone•130
    @jacob-stone9554

    Hi Emmanuel, your solution looks great I really like what you've done with it!

    As far as the style of your solution goes, I don't have any feedback, you are almost spot on with your design. I really like the active states when you hover over the different aspects of your solution, it's a fun implementation :)

    One way I think you could improve is with the structure of your HTML. I see that you have semantic HTML in your solution which is good! But the order in which they are used could be a little confusing to follow. For example, in your <div class="card"> on line 30, you have a <figure> and <main>. These are both components of semantic HTML, which is good for you to be using. However, they aren't being used in the way they were necessarily intended. Generally, <main> should be used to container the main content of your page, like a <figure> and is generally found below a <header> and above a <footer>.

    If you'd like to read more about it, here is a link with some basic information about semantic HTML.

    I hope this helps, feel free to reach out if you have any questions. Happy coding!!

    Marked as helpful
  • JoyObaidu•300
    @JoyObaidu
    What are you most proud of, and what would you do differently next time?

    Accessibility

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

    None , I have an attempted projects like this before

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

    CSS MArgin

    Blog Preview Card using CSS Grid

    #accessibility
    1
    P
    Jacob Stone•130
    @jacob-stone9554

    Hi Joy, you have a great start on your solution, it looks fantastic!

    There are only a handful of small, fine-grained tweaks you could make in order to get your solution a little closer to what the design is asking for as some changes to your HTML for a better overall structure.

    As far as the structure of your HTML goes, you used a <section> to develop your blog card. Generally, this tag should be reserved for designating a section of your webpage. For example, if you were developing a webpage about global wars, you might have a <section> on WWI and a <section> on WWII. To get around this, you could create a .card rule in your CSS file and style that instead, using a <div class='card'> in place of <section>. With that being said, you still got your design really close to the solution, great work :)

    As far as the overall style goes, one very minor thing you could try is adding a border to your card. You can achieve this by adding border-width, border-color, and border-style properties to the rule where you style your card.

    Another very minor change you could try is setting the <p> text of your card to hsl(220, 15%, 55%) so that the color of the description matches that of the design.

    The final piece of feedback I have for your solution is regarding the active state (like hover). You have an error on line 36 of your CSS file. You need to remove the space from the rule such that it reads section h1:hover. Then the hover styles should be applied appropriately.

    Feel free to reach out if you have any questions, happy coding :)

    Marked as helpful
  • Onlyy-Ram•20
    @Onlyy-Ram
    What are you most proud of, and what would you do differently next time?

    i still got issues with strengthening my skills !!

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

    the hardest thing for me is design. and by doing this project i gained much deeper understanding of how to solve your solutions in the shortest-yet productive way.

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

    i still have this diziznes over making website responsive. even though i know how to set all the properties. can someone please help me how to make it should work ?

    QR code first solution using CSS Flexbox

    2
    P
    Jacob Stone•130
    @jacob-stone9554

    Hi Ram! Overall, this is a great start to the solution!

    I do believe that it could be improved upon in a few ways to get it closer to the original design.

    In your body styles, you could try background-color: hsl(212, 45%, 89%); instead of background-color: hsl(220, 15%, 55%); in order to achieve the background color designated in the design.

    Additionally, you could import a Google font to use in your solution. This one recommends "Outfit" which can be found here with instructions on how to embed it on that page as well.

    As far as making the design responsive, you have a great start by including a media query. One thing you could try is removing the body rule from inside that query as it should be applied globally, and really doesn't need to change depending on the size of the viewport. Inside the .container rule you could try setting the height and width attributes to a set percentage like 75% or 80% instead of the full size of the viewport.

    One final note, although this is a relatively small solution it would still be good to include semantic HTML. Tags like <main>, <nav>, <section> and so forth.

    I hope this helps! Let me know if you have any questions, happy coding :)

    Marked as helpful