Skip to content
OverviewSolutions
7
Comments
17
Dongmo Shu
@dongmo-shu

All comments

  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @mvogokevin

    Check the link you provided to preview your site, it doesn't work.

    0
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @Muhammed61699

    Congratulations on completing the challenge. Your solution looks great.

    Here are some feedbacks I have to improve your code.

    First Always include your <div> inside an HTML landmark. for your solution, have all <div> inside of your <body>, enclosed in the landmark <main>. You can read about HTML landmarks, and their importance in this article

    Second

    When it comes to media queries, I recommend using the unit of measurement rem instead of px. You can read more in this article by FreeCodeCamp.

    Third

    To have your solution at the centre of the page, I recommend you add this.

    body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

    I hope this is useful.

    Marked as helpful
    1
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @djamkenny

    Congratulations on completing the challenge.

    Due to the nature of this challenge, I recommend you work on the mobile-first approach. That is, complete the mobile design, then move on to the desktop version.

    The layout information available in the file style-guide.md serves as a guide, to know the exact dimension needed for your media query.

    For responsive website design, the FEMentor community have an article on the topic which is beginner-friendly. I recommend you read it

    I hope this is helpful

    Marked as helpful
    1
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @DejMan2003

    Congrats on completing the challenge.

    As for your questions, I don't quite understand what you mean. Are you referring to how web hosting works? If yes, here is an article on the topic by a reputable hosting company.

    Now onto your code. Here are some suggestions I have to improve on the accessibility and validation report.

    First

    Always separate the page styling from the HTML file. Create a CSS file in the same folder as your HTML file, add the styling to it, and then connect the CSS to the HTML by adding the line <link rel="stylesheet" href="filename.css"> into the <head> section.

    Second

    Have all elements on your page enclosed in an HTML landmark? example of

    You can read more on the topic in this article

    Third

    Always include an Alt text inside of your <img>. You can read more in this article

    Fourth

    To have the page centered in the middle, I recommend you add this at the top of your page styling.

    body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

    I hope this is helpful

    Marked as helpful
    1
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @grace-snow

    Congratulations on completing the challenge.

    I noticed the colour of the hover effect is different from what I show in the design folder

    I suggest you change the background colour to background-image: linear-gradient(rgb(0 0 0/50%)0 0); This will change the colour to a different shade of green.

    I hope this is helpful.

    Marked as helpful
    0
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @deea585 I noticed you uploaded the solution to the wrong challenge

    This is the right challenge

    Have a look, and make the necessary modifications.

    Marked as helpful
    2
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @deea585

    It seems your solution is not complete. I reviewed your code, and I found a lot of issues. Let's dive into them.

    First

    Always review the style-guide.md`` file and the ``design folder before attempting any frontend Mentor challenges. They are there to guide the developer on what needs to be in the design.

    Second

    We need to link up the font which will be needed to complete this challenge. There exist many ways of doing this. This is what I find to be the most efficient.

    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    Add the above lines in the <head> section of your HTML.

    Third

    The body of your web page needs to be placed at the centre of the screen. You can do so by adding the following to the body element of your CSS file.

        height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    Fourth

    Enclose <img src="images/image-qr-code.png" alt="Cod QR" /> in a div and add a class to it. This will enable you to limit the six=ze of the image inside of the parent div

    I hope this was helpful.

    0
  • Hassan Moataz•1,860
    @hassanmoaaSubmitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    It was my first project back then i was proud i could do it correctly from the first time as the intended design.

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

    back then i encountered with aligning the body, i solved it later by learning flexbox and aligning items correctly.

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

    none

    QR-Code Component

    2
    Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @hassanmoaa

    Congratulations on completing the challenge! You did a good job.

    Here is my take on improving your code. Improve your front-end skills by building projects elements in your code are not styled in the right colour. hsl(218, 44%, 22%) is the right colour

    I hope this was helpful

    Marked as helpful
    1
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello @mordy99

    It seems your solution is not complete. I reviewed your code, and I found a lot of issues. Let's dive into them.

    First

    Always review the `style-guide.md`` file before attempting any frontend Mentor challenges. The entire purpose is to guide the developer on what needs to be in the design.

    Second

    We need to link up the 2 fonts which will be needed to complete this challenge. There exist many ways of doing this. This is what I find to be the most efficient.

    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100;0,9..144,200;0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,100;1,9..144,200;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700;1,9..144,800;1,9..144,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    Add the above lines in the <head> section of your HTML

    Third

    We need to add the information listed into the style-guide.md file I mentioned above. I recommend creating a Pseudo CSS class called :root at the very top of your CSS file.

    :root {
    --very_dark_blue: hsl(212, 21%, 14%);
    --dark_grayish_blue: hsl(228, 12%, 48%);
    --white: hsl(0, 0%, 100%);
    --dark_cyan: hsl(158, 36%, 37%);
    --cream: hsl(30, 38%, 92%);
    --primary_font: "Montserrat";
    --secondary_font: "Fraunces";
}

    You can add as many attributes as you need.

    Fourth

    Once you are done with those, it is time to make modifications to your CSS file. Changes such as the button colour, text colour, text size and text font are needed. This time, rather than having to link up the appropriate hsl value, you can just add the pre-assigned value of the colour into the CSS attribute.

    For example background-color: hsl(0, 0%, 100%); To background-color: var(--cream);

    Fifth

    The body of your web page needs to be placed at the centre of the screen. You can do so by adding the following to your CSS file.

    body{
    background-color: var(--cream);
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

    I prefer this method as it works for all screen dimensions.

    Sixth

    Two product images were provided in the challenge folder. One is for mobile screens, and another is for desktop screens. Of course, only one image needs to be displayed depending on the screen size of the device which is used to display the web page. There are many ways of doing this using HTML and CSS, here is what I recommend.

    HTML

        <div class="image-area">
      <!--Two images, one for mobile and another for desktop-->
      <img class="image-product-desktop" src="../images/image-product-desktop.jpg">
      <img class="image-product-mobile" src="../images/image-product-mobile.jpg">
    </div>

    CSS for the desktop view

        .image-product-desktop{
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        max-height: 100%;
    }

    .image-product-mobile{
        display: none;
    }

    CSS for the mobile view

        .image-product-desktop{
        display: none;
    }


    .image-product-mobile{
        border-radius: 10px 10px 0px 0px;
        max-width: 100%;
    }

    That's all for now. I hope this was helpful.

    0
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello. Congratulations on uploading your solution. The site is working and the code looks great!

    As for the GitHub repository, I don't recommend having the solutions to all challenges inside one massive repository. Looking at the long term, it will become more and more difficult to manage all of them.

    We can't also ignore the fact of how Github pages work. Once a repository becomes too big, or the web page takes too long to load, GitHub pages won't work on them.

    Here is the document on the limit of Github pages. https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#usage-limits

    I hope this was helpful.

    Marked as helpful
    0
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello. Well done with the challenge.

    It seems you have faced some issues when placing the body at the centre of the page. After I reviewed your code, here is my suggestion. Add the following to the body element.

        height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    I hope this is helpful.

    0
  • Dongmo Shu•280
    @dongmo-shuPosted 10 months ago

    Hello. The Preview site link is broken. You should have that checked out.

    The suggestions below are purely based on your code.

    To position the body to the centre of the page, add the following to you rbody element

        height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    The colour of Our Equilibrium collection promotes balance and calm., 3 days left and Creation of should be Soft blue: hsl(215, 51%, 70%).

    I hope this is helpful.

    0