Skip to content
OverviewSolutions
3
Comments
4
Elias Lind
@EL132

All comments

  • Elias Lind•130
    @EL132Posted about 2 years ago

    Hey David!

    Awesome solution that is extremely well done even to the small details! A few small things that will be helpful in the long run:

    1. When naming classes in CSS, the typical naming conventions is with a hyphen in between the two words in place of a space. I know it may seem like a small thing, but staying uniform across all CSS code helps improve the readability of your code. Instead of your names using _ as the space, consider changing the _ to a - For example: "class="nav__link"" would become "class = "nav-link""
    2. For your JavaScript code, try to remove excess spacing in between lines of code within your if statements. Also, typical style guides typically have a space after a closing parentheses and an opening curly brace. For example: "if(window.innerWidth < 768){" would become "if (window.innerWidth < 768) {" Overall, this improves readability.

    I hope this helps! If it does, please let me know to help my commenting improve! Elias

    Marked as helpful
    0
  • Elias Lind•130
    @EL132Posted about 2 years ago

    Hello!

    Your solution looks great!

    I have two main pieces of advice:

    1. Try to avoid using an id for every element. Instead, try to use a class. Using an id for every element takes away the power that comes with having an id on an element. Since an id is an extremely specific classification, you should only use sparingly. A class selector will do the same thing while leaving you the ability to specify further on an element using id. This all relates to the specificity of selectors in CSS and HTML (see link here: https://www.w3schools.com/css/css_specificity.asp )

    2. Try to use semantic components in your html instead of using a div for every element. Using semantics allows for people reading your code to better understand what each element is relating to. For example, instead of using a <div> Title </div>, you can use <h1> Title </h1> to let your code reader know that this element is a title.

    I hope this helps! Elias

    Marked as helpful
    1
  • Gilberto•20
    @ribasgilSubmitted about 2 years ago

    Hi, this is my second project all by myself. I've been studying html/css/js alone for 2 weeks now. Today I realized that I still have a long way to go, even looking at code from other devs I was not able to make mobile responsiveness work at all. It's going to be a rough road, but I won't stop now. When I have enough knowledge, I'll come back to finish the project, thank you.

    Product preview card component just html and css

    2
    Elias Lind•130
    @EL132Posted about 2 years ago

    Hello!

    I'm happy to see you got this far on the project! I know you said you would come back to this project, but I figured I would leave a comment to help you get there sooner/easier (hopefully). I recently also learned responsive design and successfully implemented it using @media queries. A media query is a way that lets your webpage respond to certain conditions. When I am designing for my mobile designs, I use the following syntax:

    @media (max-width: 1380px) { .wrapper { width: 400px; } }

    This is an example of my page needing to do something different when the width of the page goes below 1380 pixels. You can think of it like "Once my page goes below 1380px in width, apply the properties inside the curly braces {}" Hopefully, this example is enough to get you started; this technique can be used for a lot of topics and is a great place to start.

    An alternative method is a CSS library called Bootstrap; personally, I do not like Bootstrap, but many do like if because it makes resizing websites very easy. Here is a link to the bootstrap documentation for its responsive grid design: https://getbootstrap.com/docs/4.0/layout/grid/

    I hope this helps! Elias

    Marked as helpful
    1
  • Mohamed Essam•100
    @Mohamed33362Submitted about 2 years ago

    it was difficult for me , i know i have a loot of wrong codes or tags but i want a helpful feedback to improve my skills in css and javascript spacific

    Flex-box

    1
    Elias Lind•130
    @EL132Posted about 2 years ago

    Hey Mohamed!

    Nice job completing the design for the project! I would love to help you with your JavaScript section of the code, but I don't see your code when I click on the view code link. Could you put a link in a response to this comment that would take me to your code? Thank you!

    Elias

    0