Skip to content
OverviewSolutions
30
Comments
130
Saad Hisham
@Saad-Hisham

All comments

  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there! 🙋‍♂️ Great job completing the challenge! 🎉 If you try to zoom out, you may notice that the design gets ruined, especially on larger screens like 4K and 2K. To solve this issue, you can wrap your page content in a container. This container should have a maximum width and be centered on the screen. You can achieve this by adding the following code to your existing code:

    main {
    max-width: 1110px
    margin: auto;
}

    Great job keep it up ✨

    Marked as helpful
    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there 🙋‍♂️ this media query breaks the site on screens over 1440px on my 1920 screen, I see the mobile design just remove the max (max-width: 1440px) to ensure it works well on all big sizes screen

    the rest is epic keep it up 💖

    2
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    to center the app on screen add this line to the body min-height: 100vh; and remove those

    body {
    /* margin: 1rem; */
    /* margin-top: 8rem; */
}
    Marked as helpful
    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there! 🙋‍♂️ It seems like you made a small mistake. You didn't deploy the site; instead, you attached the GitHub link in the deployment input. To resolve this, you need to deploy the site on a free hosting platform. One of the best options I've tried is Vercel. Here's what you can do:

    1. Create an account on Vercel.
    2. Link your Vercel account with GitHub.
    3. Deploy the site directly from Vercel.

    Alternatively, you can also consider using Netlify, which offers an easy drag-and-drop deployment process. Simply drag and drop the build version of your project into Netlify, and it will handle the deployment for you.

    Keep up the great work, and happy coding! 💖

    0
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Welcome back, bro 🎉😅

    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi there 🙋‍♂️ Congratulations on completing the challenge!🎉 Here are some tips to improve your solution:

    1.Wrap the entire content inside the <body> tag within a <main> tag. This will help structure your HTML code properly:

    <body>
  <main>
    <!-- Your content goes here -->
  </main>
</body>

    2.Add the following styles to the <body> tag to center it vertically and horizontally on the page:

    body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
}

    3.Apply the following style to the text within the section to better match the design:

    .section .text {
  max-width: 41rem;
}

    Keep up the great work✨

    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Hi Arianna! 🙋‍♂️ Congratulations on completing the challenge! To align the input and button on the same line just give the form flex property

    form {
    height: 50px;
    display: flex;
}

    Keep up the great work and happy coding✨

    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    To center the parent div on the screen, you can apply the following CSS edits:

    .contenedor__general {
  width: 100%;
  min-width: 315px;
  margin: 0 auto; 
  background: var(--Grayishblue);
  padding: 20px;
  min-height: 100vh;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

    In the updated CSS:

    The margin property is set to 0 auto to horizontally center the element by setting equal margins on the left and right sides.

    The justify-content property is set to center to vertically center the content.

    These adjustments will help center the parent div on the screen both horizontally and vertically. Great job keep it up happy coding ✨

    Marked as helpful
    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    I'm not sure that you deployed it correctly just run these commands in order in the folder where the src folder is located that's the most important 1-git init 2-git add . 3-git commit -m "first commit" 4-git remote add origin "link of GitHub repo" 5-git push -u origin master I use Vercel it's the best hosting free service I tried if you don't like to do all these steps you can simply run the build command and drag and drop the build folder in Neltify that's the most easy way I hope that helped you 😬 happy coding❤

    Marked as helpful
    0
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    This is very nice the animation when toggle too was amazing great job 🥰

    1
  • Saad Hisham•1,770
    @Saad-HishamPosted over 1 year ago

    Good job, If you use the font attached in the style guide file, it will be better

    0
  • Saad Hisham•1,770
    @Saad-HishamPosted almost 2 years ago

    Nice Animations 🥰

    2
  • Saad Hisham•1,770
    @Saad-HishamPosted almost 2 years ago

    Hey 😀 I wanted to share a tip that might come in handy for matching the screenshot with the design. What I usually do is make a copy of the project files after finishing it without animation, and then set them aside. Once the website takes the screenshots after deployment, I add animation code to the files on GitHub. The best part is that Vercel automatically detects the changes and applies them during deployment. Hope this helps! and your solution is amazing keep it up💖

    1
  • Saad Hisham•1,770
    @Saad-HishamPosted almost 2 years ago

    In order to view the deployed site on GitHub, you need to grant access to the index.html file. To do this, navigate to the HTML folder within the project and extract the index.html file. Then, place the extracted file directly in the newsletter folder. peace✌💖

    0
  • Saad Hisham•1,770
    @Saad-HishamPosted almost 2 years ago

    To ensure that GitHub can access your project, it's best to upload individual files rather than the folder containing them. To do this, navigate to the "qr-code-component-main" folder in the upload window and select all the files inside, including the HTML and CSS files. Then, upload these files to GitHub and make sure to remove the current version of the project.

    Marked as helpful
    0
  • Saad Hisham•1,770
    @Saad-HishamPosted almost 2 years ago

    To ensure that GitHub can access your project, it's best to upload individual files rather than the folder containing them. To do this, navigate to the "product-preview-card-component-main 3" folder in the upload window and select all the files inside, including the HTML and CSS files. Then, upload these files to GitHub and make sure to remove the current version of the project.

    0
  • Saad Hisham•1,770
    @Saad-HishamPosted almost 2 years ago

    👌 Nice pixel perfect work

    12
  • Saad Hisham•1,770
    @Saad-HishamPosted almost 2 years ago

    Great job❤ I have some tips that could help make your work even better. Firstly, for better accessibility, consider wrapping the card in a <main> tag instead of a <div>. This will make it easier for all users to navigate and understand your content.

    Secondly, the alt attribute of your image should be more descriptive. For example, you could describe the image as "a young girl wearing headphones, dancing and enjoying the music". This is important because some users may rely on screen readers to access your content, and providing a clear description will help them understand the image.

    Lastly, for the design, consider adding the following code to make the background match the design:

    body {
background-repeat: no-repeat;
background-size: contain;
}

    By replacing the cover value with contain, the background will better fit the design of your work.

    Overall, your solution is great Keep up the good work🔥

    1