Skip to content
OverviewSolutions
16
Comments
7
J Z
@half-cto

All comments

  • Leela•30
    @vlpreddySubmitted almost 2 years ago

    1. When writing Saas, I felt difficult when using media queries, usually media queries being written inside class in SaaS, but my confusion was whether i should write media queries for children inside parent?

    2. I try to do some experiment with transitions, instead of simply using burger icon and javascript, i tried to use css trick for menu which is working but the rotation of the burger lines was not happening where they convert into cross, but i implemented this another website. so figuring out.

    3. I have questions related to performance, Do i have to use less classes for better performance? Do i use grid or flex which one is faster? Is position:absolute slower, do we have alternatives? I used position fixed to display menu items, is there any better way?

    Responsive landing page using css grid, flex and sass

    3
    J Z•290
    @half-ctoPosted almost 2 years ago

    Hi Leela, great work on completing challenge.

    Regarding media queries, I like to set up a mixin like this one

    @mixin desktop {
    @media screen and (min-width: $desktop-size) {
        @content;
    }
}

    and use it inside element I'm changing, I find it keeps clean structure and is easy to troubleshoot.

    0
  • DRUEVISUAL•100
    @DRUEVISUALSubmitted almost 2 years ago

    I found the solution to disable the default validation message, but i do not understand it at all. (I learned about functions and know about event listeners but i cannot read and understand this one) I'm not sure either that this is the best solution.

    Any other feedback is welcomed!

    Pod request access landing page

    1
    J Z•290
    @half-ctoPosted almost 2 years ago

    Hi DRUEVISUAL! Good job on solving layout for this challenge!

    regarding JS validation - you could solve this with 2 if statements, one that checks for empty input and other that compares input string with regex here is my take

    const email = document.getElementById('email-input');
const submit = document.body.getElementsByClassName('button')[0];
const errorMsg = document.body.getElementsByClassName('error-msg')[0];
const emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

let validateEmail = () => {
    let inputEmail = email.value;

     // clear previous error message
    errorMsg.innerHTML = '';
    errorMsg.style.color = '#FB3E3E'

    //validation
    if (inputEmail === '') {                        
        errorMsg.innerHTML = 'Oops! Please add your email';
    }else if (!emailRegEx.test(inputEmail)){
        errorMsg.innerHTML = 'Oops! Please check your email';
    } else {
        errorMsg.style.color = '#54E6AF'
        errorMsg.innerHTML = 'Thank You!';
    } 
}

submit.onclick = validateEmail;
    1
  • J Z•290
    @half-ctoPosted almost 2 years ago

    Great solution. I'm stealing transition trick for breakpoints! 🔥 Also good attention to details!

    Marked as helpful
    1
  • Aman Harsh•10
    @AmanHarsh02Submitted about 2 years ago

    Q1. What could be the best practices to build this type of UI..?

    Q2. Currently I have set the "display: flex; align-items: center; justify-content: center;" on the body in CSS. Is there any other way to make the div vertically aligned in centre?

    Q3. Would that be better to use CSS Grids for this type of UI..?

    QR Code Component

    1
    J Z•290
    @half-ctoPosted almost 2 years ago

    Hi, AMAN, congratulations on solving this challenge.

    Q1 & Q2 Flex is a good solution for this type of layout since it will adjust to different screens.

    Q3 In this case you could use many solutions, but again I think flex is great way to do this.

    Some other things to consider:

    1. <img> should have alternate text <img src="./assets/illustration-app.png" alt="ilustration of app opened on smartphone"> for improved accessibility more here
    2. Use semantic tags i.e. <main> instead of <div> for main part of page - more here
    3. Try to avoid skipping heading levels - for this layout You could use just one <h1> instead of <h3> - more here
    Marked as helpful
    0
  • J Z•290
    @half-ctoPosted about 2 years ago

    Hi Ijeoma, congrats on finishing this project!

    I'm not sure what is best practice (and Your take works as well), but I can share mine.

    main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #19A1AE;
    background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
    background-position: left 50vw top 45vh, right 50vw bottom 45vh;
    background-repeat: no-repeat;
}

    I added both pictures to background and set positions. I like this solution since bg pictures are not interfering with flow of page. Hope this helps!!

    Marked as helpful
    0
  • Paul Jin•290
    @paulhjinSubmitted about 2 years ago

    Hi Everyone! 👋🏻 This was a fun challenge but I had some difficulties with the hero image in this challenge. If you have any suggestions on how make the image responsive while limiting the number of media queries, I would love to hear your thoughts.

    Thank you and happy coding! 👾

    Skilled E-Learning Landing Page

    1
    J Z•290
    @half-ctoPosted about 2 years ago

    Hi Paul, congrats on finishing this project! 🥳 I also found positioning of hero image to be toughest challenge for this project!

    You are almost correct with current implementation of image:

    <picture>
          <source media="(min-width: 1096px)" srcset="./images/image-hero-desktop.png">
          <source media="(min-width: 768px)"  srcset="./images/image-hero-tablet.png">   
          <source media="(max-width: 768px)"  srcset="./images/image-hero-mobile.png">
          <img src="./images/image-hero-mobile.png" alt="">
</picture>

    however you could lose line: <source media="(max-width: 768px)" srcset="./images/image-hero-mobile.png"> since image in <img> tag will be displayed by default. Alternatives are displayed only if matching media queries. Hope this helps!

    Marked as helpful
    1
  • Michał Sujkowski•70
    @MichalSujkowskiSubmitted about 2 years ago

    I need help centering the crossed out price against the promotional price

    Product cart

    2
    J Z•290
    @half-ctoPosted about 2 years ago

    Hi @MichalSujkowski.

    I solved this by putting both prices in one <div>

    <div class="price">
          <h2>$149.99</h2>
          <h4>$169.99</h4>
</div>

    and adding following css properties to .price <div>

    .price {
    display: flex;
    align-items: center;
}

    with both price display: inline-block;

    I hope this helps!

    1