Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions30Comments131

All comments

  • Alessandra Oliveira• 690

    @itsale-o

    Submitted

    Hello 👋

    This is my solution to the news homepage challenge. For me it was an easy one, I had some challenge with the CSS part, but nothing too hard.

    Feedbacks are welcome

    News Homepage Solution

    1

    Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    This comment was deleted

    1
  • nivrii• 220

    @nivrii

    Submitted

    I'd love to hear your input on this project.

    html css JS

    1

    Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    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
  • Abdul Khalid• 69,200

    @0xabdulkhalid

    Submitted

    👾 Hello, Frontend Mentor Community,

    This is my solution for the Loopstudios Landing Page.

    • Scored 98.6% on Google Pagespeed Insights! 🤩
    • Comes with Custom navbar w/ scroll-in & scroll-out animation 🔥
    • Accessible hamburger menu w/ ES6 🍔
    • Actually i delayed to post this solution, this was completed about 5 months ago ⏪
    • Minified the css files to improve site performance 🚀
    • Used Prettier code formatter to ensure unified code format ⚙️
    • Layout was built responsive via mobile first workflow approach 📲
    • Had a lots of fun while building this challenge ! 🤠
    • Feel free to leave any feedback and help me to improve my solution 💡

    .

    👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice !

    LOOPSTUDIOS LANDING PAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]

    #accessibility#lighthouse#bem

    4

    Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    Welcome back, bro 🎉😅

    1
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    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
  • Jesus• 190

    @Galindezpro

    Submitted

    Es el mas sencillo que he hecho hasta ahora

    Tarjeta QR

    1

    Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    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
  • Gustavo• 80

    @cantocaracruz

    Submitted

    Disclaimer: this is my very first Astro project so the code may look kind of messy.

    I have only one problem: I can't figure out why on mobile the layout is cut in the 4th card (the temperature one). It doesn't happen when I test it on desktop, even when using the responsive tool, at any width or height the layout seems normal, but when I open it in my phone it has that specific problem. Other than that it works

    Planet Facts - Only Astro SSG

    #accessibility#animation#astro#tailwind-css

    2

    Saad Hisham• 1,750

    @Saad-Hisham

    Posted

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

    1
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

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

    0
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    Nice Animations 🥰

    2
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    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,750

    @Saad-Hisham

    Posted

    👌 Nice pixel perfect work

    12
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    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
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    adding the following lines to your code will enhance its appearance and functionality:

    body {
background-repeat: no-repeat;
background-color: #e0e8ff;
}

    These lines of code will ensure that the background image is not repeated and will set the background color to a pleasing blue-gray shade.

    1
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    great work✨ I believe that the project is almost perfect I have a small tip that may help you make it better since the API provides the population as just a number you need to format it with a comma after every number field To format the population numbers returned by the API with commas, we can use regular expressions. Here's an example of how to use regex to add commas to the population number:

    // Convert the population number to a string and replace any non-numeric characters with the letter 's'

const value = country.population.toString().replace(/[^0-9]/g, 's');

// Add commas to the population number at every thousandth place
const formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

    In the first line of code, we convert the population number to a string using toString() and then replace any non-numeric characters with the letter 's' using replace() and a regular expression.

    In the second line of code, we use another regular expression with replace() to add commas to the population number at every thousandth place.

    I hope this explanation is helpful. Keep up the great work🔥

    Marked as helpful

    0
  • Ugwuanyi Gloria• 160

    @buberrie

    Submitted

    Trying out Less and typescript for the first time was really interesting, Typescript was fun to use but very demanding, which can be annoying. but I pulled off eventually and I'm happy I did.

    interactive card details form

    #accessibility#less#typescript

    1

    Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    👏🎉 Great job Your design is fantastic and everything looks clean and well-validated. 👍

    Just a small tip to improve accessibility - consider wrapping the app inside a <main> tag instead of the <div>. This can greatly improve accessibility and make your content more inclusive. ♿️

    Keep up the amazing work! 🤩🚀

    1
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    👋 Hey there, amazing job on your work! 🤩

    The animation in the arrow is very clean, and the open and close animation is just as great! 👌

    I just have a small tip that could make it even better - consider wrapping your app in a <main> tag instead of a <section> tag. This can greatly improve accessibility and make your content more inclusive. ♿️

    Keep up the fantastic work! 👍🚀

    1
  • Saad Hisham• 1,750

    @Saad-Hisham

    Posted

    👌🧼 A carbon copy clean work! Great job! 👍

    Just a small tip to make it even better - consider wrapping the card in a <main> tag instead of a <div>. This can greatly improve accessibility and make your content more inclusive. also it's better to add the image as HTML tag instead of making it background to the div

    Keep up the great work! 🚀

    Marked as helpful

    1