Skip to content
OverviewSolutions
21
Comments
4
Phuong
@pengpongpong

All comments

  • Phuong•290
    @pengpongpongPosted almost 2 years ago

    Hey Manannan297!

    Nice animation you added for your cards!

    In SCSS you don't have to define variables the same way like CSS. You only need "$" dollar sign and you don't need to put it in :root selector like CSS.

    $color-orange: hsl(25, 97%, 53%);
background-color: $color-orange;

    You can also wrap sizes for media queries in variables like so:

    $desktop: 1000px;
@media (min-width: $desktop) {
}

    You wrapped your inputs in divs, but you should use fieldset tag like so:

    <form id="rating_form">
          <fieldset>            
            <input type="radio" name="rating_number" id="1" value="1">
            <label for="1">1</label>
  
            <input type="radio" name="rating_number" id="2" value="2">
            <label for="2">2</label>
        
            <input type="radio" name="rating_number" id="3" value="3">
            <label for="3">3</label>
          </fieldset>
</form>

    The fieldset tag ensures that you can only select one radio input at the same time and groups related elements in a form. It's also more semantic.

    I hope it helps and don't hesitate to ask!

    0
  • Ele•90
    @dev-ele206Submitted almost 2 years ago

    I had trouble experimenting with the different sizes with em and rem so I used pixels instead.

    I am unsure of how to center containers within divs but I managed to center them with padding and margin.

    What are the best ways to implement bootstrap links in HTML? Also what are the best ways to center divs within divs.

    Thank you.

    Responsive product preview card made with CSS Flexbox

    1
    Phuong•290
    @pengpongpongPosted almost 2 years ago

    Hey Ele!

    I noticed you used in your index.html a lot of link tags for google fonts, but an easier way to import them is to use the import link from google. Select "@import" instead "<link>" when you're on google fonts webpage. Copy the import link, which should look something like this (I selected Inter font, with 400, 700 and 800 weight):

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap')

    Add the import code snippet on top of your style.css file and now you can use the font in your font-family like so: font-family: 'Inter' with font-weight 400, 700 or 800 as you wish.

    Your p tag with "P E R F U M E" is one way to solve that, but better would be to use letter-spacing in your CSS to space letters like so: letter-spacing: 2px.

    Also try to use section and main tag for a more semantic approach.

    The way you added svg is one way, but you can also use img tag like so: <img src="SVG LINK"/>. It's just a shorter way to implement svg.

    When using rem and em you should know that rem is basically 16px, because rem is related to the root font-size. When you're using em it is taking its font-size based on its parent (and if parent has no font-size, it will take the font-size from the next parent until it reaches the root, which will be 16px again). So when you change font-size and you have em somewhere in it's children, that will affect the children's size also. That's why you should change font-size first and then the other elements.

    To center things you can use flexbox or grid.

    display: grid
place-content: center

    or

    display: flex
justify-content: center
align-items: center

    place-content is a shorthand property forjustify-content and align-content. justify is used for horizontal and align is used for vertical. justify-content and align-content moves the whole container and justify-items and align-items moves the items inside the container. Most of the time you will use justify-content with align-items when using flexbox or place-content when using grid. Flex-box, W3-schools grid, W3-schools [Justify-content, W3-schools]](https://www.w3schools.com/cssref/css3_pr_justify-content.php) [Align-items, W3-schools]](https://www.w3schools.com/cssref/css3_pr_align-items.php)

    To center with margin you can use: margin: 0 auto That will set margin-top + margin-bottom to 0 (you don't have to use 0) and margin-left +margin-right will be centered, because with auto it will use the remaining space equally on both side, which will center the element. Definitely use flex or grid to center.

    For bootstrap you can add link tag to your head tag in your index.html file. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> . You can also use script tag. Add the script tag to your body right before the closing </body> tag. That is to ensure that your html is fully loaded before your script tags will be executed.

    bootstrap links, documentation

    0
  • Phuong•290
    @pengpongpongPosted almost 2 years ago

    Hey Kierro!

    There is a input tag where you can set the type to type="radio" and wrap all your input tags in a fieldset tag, so that you can only select one radio input at a time like so:

    <form id="rating_form">
          <fieldset>            
            <input type="radio" name="rating_number" id="1" value="1">
            <label for="1">1</label>
  
            <input type="radio" name="rating_number" id="2" value="2">
            <label for="2">2</label>
        
            <input type="radio" name="rating_number" id="3" value="3">
            <label for="3">3</label>
          </fieldset>
        </form>

    Now you can use label tag to style your rating number, add hover effects and use :checked selector to style the selected rating. In that way you can move some parts of JS code out.

    You can capture the rating input with an Event like you already did and make use of event.target.value in a function like so:

    let rate;
 const select_rating = (e) => {
  rate = e.target.value;
 };

    You have to append the function with a for loop to all radio inputs. So now you can use rate to mutate the end result in your second page.

    One other possible way would be to use FormData(). There you can capture the whole form like so:

    const form = document.getElementById("rating_form");
 const formData = new FormData(form);

    To retrieve the value of your rating you have to use the given methods like entries() or values() and loop through it since its an iterator.

    More info to FormData() (MDN Web Docs)

    I hope this helps a little bit and don't hesitate to ask!

    Marked as helpful
    0
  • Ele•90
    @dev-ele206Submitted almost 2 years ago

    I found it difficult to create different break points for the mobile and desktop version. I still have trouble with which break points to use how to apply them.

    QR code component

    1
    Phuong•290
    @pengpongpongPosted almost 2 years ago

    If you open responsive design mode in your browser (dev tools) you can resize the window with your mouse or enter a specific resolution to see how your website behaves with different breakpoints. If you have for example a website for mobile devices and you want a desktop version for it, you could resize the window and make it bigger until your design begins to "break". That's where you could choose you approx. breakpoint and add some media queries so your website looks nice again. Also try to use more rem and em (in media queries) units instead of px, so that your website can scale up with resolution. It would minimize the amount of media queries needed.

    Also use section tag for your .card-container class and footer tag for your .attribution class for a more semantic approach and wrap your content in a main tag.

    I hope this helps and don't hesitate to ask.

    Marked as helpful
    1