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
OverviewSolutions2Comments17

All comments

  • Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @harpreet-singh-147, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. I like your design accuracy, but just one thing you may have overlooked, you used the bold font instead of the light weighted one. overall - everything looks perfect.

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    1
  • Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @rodjoker, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. I like your code organization. Though, I have some additions to make more clean:

    1.Heading tags should increment accordingly for better web accessibility:

    ======= here should be the <h2> 
   <h3 class="product">PERFUME</h3>


=======  and here the <h3>      
     <h2 class="gabrielle">Gabrielle Essence Eau De Parfum</h2>

    *note: the main <h1> tag font-size could be smaller than the <h2> tag in some cases, but the order is crucial.

    2.Use Bem for naming your styles.

    3.Add meta tags:

    <meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    0
  • Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @KevinPadi, 👋🏻

    Awesome job on taking the first steps towards your dream!

    ** Actually, I like your solution more than the design 😆. I have some slight recommendations for you:**

    1.Show an error message if the client failed to fetch the data:

     const getCountries = () => {
    useEffect(() => {
      fetch('https://restcountries.com/v3.1/all?fields=name,flags,tld,currencies,capital,region,subregion,languages,borders,population')
        .then(response => response.json())
        .then(data => {
          setData(data)
        })
        .catch(error => {

==== In the next line, you can use alert() instead of console.error() to let the user know what happened.
          console.error('Hubo un error al obtener los datos:', error)
        })
    }, [])
  }

    2.I don't know what the user will see in case the countries didn't come back, but if you handled, great job! ✨

    3.Add meta tags:

    <meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    1
  • Ahlam• 350

    @AhlamAb22

    Submitted

    I finished this challenge using HTML and CSS. I tried to pay attention to details and work in an organized way. I would love to receive your feedback!

    Product preview card component | HTML & CSS

    #accessibility

    1

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @AhlamAb22, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. good job on giving web accessibility a priority in your styles. Though, I have some additions to make more clean:

    1.Add meta tags to your project:

    <meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

    2.Use the clamp() method to resize the text based on the viewport width.

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    0
  • João Vitor• 500

    @jvssvj

    Submitted

    Hello everyone, my name is João Vitor and I completed another frontend mentor challenge.🔗

    How can i improve and reduce unnecessary code? Leave your comment. 🙂

    Crowdfunding Product Page Main

    1

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @jvssvj, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. I like your code organization. Though, I have some additions to make more clean:

    1. Wrap all of your code inside function and call it when needed:

    ====> Instead of writing it like this
openMenuBtn.addEventListener('click', openCloseMenu)
closeMenuBtn.addEventListener('click', openCloseMenu)


====> Write it like this 
function addEventListnersForMenuButtons(){
   openMenuBtn.addEventListener('click', openCloseMenu)
   closeMenuBtn.addEventListener('click', openCloseMenu)
}

====> Call it in the right place
addEventListnersForMenuButtons()

    2. Use Bem for naming your styles.

    3. Add meta tags to your project:

    <meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    1
  • Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @savvystrider, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. I have a quick suggestion that would level up your submission:

    • Don't forget to add a README file for your project to let people know what you have did.

    • Use Bem for naming your styles.

    • Add meta tags and a favicon to your project:

    <link rel="icon" type="image/x-icon" href="favicon.ico"> =====> Favicon path

<meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    1
  • Abhay Kumar• 470

    @abhay0480-eng

    Submitted

    Hi there 👋, I’m Abhay, and this is my solution for this challenge. 🚀 🛠️ Built With:

    •   Reactjs  ⚛️

    •   TailwindCSS. 🎨

    ❓ Question: Any suggestions on how I can improve and reduce unnecessary code are welcome! Thank you. 😊✌️

    A Responsive Bill Splitter App

    #accessibility#react#tailwind-css

    1

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @abhay0480-eng, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I really like your submission, great work! Though, I have some recommendations for you:

    • Use this syntax to link your screenshot in the README file:
    ![](/your-screenshot-path)
    • Don't write your tailwind code inline with the HTML code – instead use BEM to name your classes and use the @apply directive in tailwind inside your css file, for example:
    .main-container {
   @apply flex flex-col lg:justify-center h-screen;
}

    check the docs

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    1
  • Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @jordanheve, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I really like your submission and how you handled state of the strength meter through CSS (I didn't think in it that way when I was developing it). Though, I have some recommendations for you:

    1.You can replace this code:

    window.onload = () => {

    range.value = '10';

    checkBoxes.forEach(checkbox => checkbox.checked = false);
}

    by setting the attributes directly in the html, they should look like this:

    <input type="checkbox" name="uppercase" id="uppercase" checked />

    2.Regarding some Typescript recommendations, you can do these:

    • Define types for your variables:
     let password: HTMLSpanElement = document.querySelector('.password-txt') as HTMLSpanElement
    • Wrap this code inside it's own function and just call it when needed (clean code)
    form?.addEventListener('submit', generatePassword)
range?.addEventListener('input', updateTxt)
copyButton?.addEventListener('click', copyEvent)
    • Add type to the checkboxChars constant
    type CheckboxChars = {
  uppercase: string;
  lowercase: string;
  numbers: string;
  symbols: string;
};

const checkboxChars: CheckboxChars = {
  uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  lowercase: 'abcdefghijklmnopqrstuvwxyz',
  numbers: '0123456789',
  symbols: '!@#$%^&*()',
};

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    1
  • Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @Shyfter, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. Though, I have some suggestions for you:

    1.Adding meta tags to enhance the SEO, such as:

    <meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

    2.Using some CSS naming convention to properly name your CSS classes, BEM would be a great choice.

    3.It's a better practice to put all your assets (images, icons, etc..) under a subdirectory called "assets".

    4.Leaving some space and writing comments in your HTML can save you sometime when navigating your code, something like this:

    
< ========== >
< Left Section >
< ========== >
<section>
...
</section>


< =========== >
< Right Section >
< =========== >
<section>
...
</section>

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    0
  • archeana• 10

    @archeana

    Submitted

    I saw some tutorials and I did not know a lot of things. Such as the CSS variables make everything so easy. I only now know how to make them.

    I have problems with the responsiveness and the idea of mobile first is very interesting. I hope to have some time to work on other projects.

    I'm learning by myself and always wonder what the best practices are.

    Responsive social section using CSS variables, media queries & flexbox

    2

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @archeana, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. However, I have some quick suggestions for you:

    1.Regarding commit messages, you can use some conventions, it will help you a lot in your future career when working in teams.

    2.You can put all your project assets (icons, images, etc..) in a folder and call it "assets" for better code structure.

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    0
  • Kay• 460

    @ofthewildfire

    Submitted

    Hi-yo, this is my solution for the Huddle landing page

    I used Grid and Flexbox and I did my best to make it function as it is supposed to. I had issues with the background image for a bit as well as the hover states.

    Any advice appreciated

    Huddle Landing Page || HTML CSS Grid

    1

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @ofthewildfire, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. However, I have some suggestions for you:

    • Adding meta tags to enhance the SEO, such as:
    <meta name="title" content="My Website">
<meta name="description" content="My Website Description">
<meta name="keywords" content="Some, Keywords, Here">

    • Correct me if I am wrong, but I think that you are using the modifiers (in BEM naming convention) at the wrong place – they should be used to changes the appearance of the block. Here is their docs

    • Leaving some space and writing comments in your HTML can save you sometime when navigating your code, something like this:

    
< ========== >
< Left Section >
< ========== >
<section>

<-- Left Image -->
<img>

<-- Attribution --> 
<div>
</div>

</section>


< =========== >
< Right Section >
< =========== >
<section>
...
</section>

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    0
  • M'I'E• 10

    @MIE-CODE

    Submitted

    The project was built base on basic html and css code , with that alone you can build it.

    html and css

    2

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Greetings @M'I'E, 👋🏻

    Fantastic progress on embarking on the journey toward your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. However, I have a brief recommendation regarding your commit messages. Consider adopting some conventions such as this; it will prove beneficial in your future career, especially when collaborating with teams.

    Hope you find this valuable! 😇

    Keep up the outstanding work, and enjoy your coding journey! 🚀

    Marked as helpful

    0
  • Chris• 100

    @PedroTheBrave

    Submitted

    I struggled centering my eye icon. I eventually remembered that the container needs to have position: relative, to house the absolute icon.

    NFT preview using grid & flexbox

    1

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @Chris, 👋🏻

    Awesome job on taking the first steps towards your dream!

    I'm thrilled to see your engagement with this platform to enhance your design skills. I have a quick suggestion for a small improvement in your README file to showcase your screenshot more effectively. You can directly import it into the file for immediate visibility using the following syntax:

    ![](/your-screenshot-path)

    It should look like this

    Hope you find it useful!😇

    Keep up the fantastic work, and happy coding! 🚀

    Marked as helpful

    0
  • Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @OsatohanmwenT, 👋🏻

    Fantastic work on embarking on the journey toward your dream!

    I'm excited to witness your exploration of this platform to boost your design skills. I noticed you're seeking tips on using CSS grid, and I've got an excellent free interactive Scrimba course that I believe you'll find invaluable – check it out here.

    Hope you find it useful!😇

    Keep up the fantastic work, and feel free to reach out if you have any questions! 🚀

    Marked as helpful

    1
  • samson360-code• 450

    @samson360-code

    Submitted

    I am absolute beginner any comment would be helpful please don't hesitate to give any idea and I got some doubt here how can I style input type range I can't figure it out

    Responsive Fylo data storage display

    1

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hello @samson360-code,

    Great job on taking the first steps toward your dream!

    I'm thrilled to see you diving into this platform to enhance your design skills. I've got some friendly suggestions that might help you along the way:

    1.Consider separating your styles file from the HTML and linking to them in your HTML. You can find more information on this here.

    2.Boost your website's SEO by adding meta tags:

    <meta name="title" content="Shortly URL shortening service">
<meta name="description" content="Shortly is a website meant to provide a URL shortening service using the shortco API">
<meta name="keywords" content="URL Shortening, Shortening Website, API">

    3.Instead of using a container to wrap your <main> tag, consider using <main> as your container.

    4.Explore using the BEM naming convention for your CSS classes. You can find more about it by searching for the term on Google or YouTube.

    5.Import any needed fonts for your project. This guide can walk you through the process.

    6.Ensure you're using the correct font color and size for the text labeled "185."

    Hope you find it useful!😇

    Keep up the fantastic work, and don't hesitate to reach out if you have any questions! 🚀

    0
  • KlvnWr• 30

    @KlvnWr

    Submitted

    Thanks for checking out this front-end coding challenge.

    Frontend Mentor challenges help you improve your coding skills by building realistic projects.

    To do this challenge, you need a good understanding of HTML and CSS, and basic JavaScript.

    Your challenge is to build out this news website homepage and get it looking as close to the design as possible.

    You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

    Your users should be able to:

    • View the optimal layout for the interface depending on their device's screen size
    • See hover and focus states for all interactive elements on the page

    Want some support on the challenge? Join our Slack community and ask questions in the #help channel.

    Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design.

    The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

    If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can subscribe as a PRO member.

    All the required assets for this project are in the /assets folder. The images are already exported for the correct screen size and optimized.

    We also include variable and static font files for the required fonts for this project. You can choose to either link to Google Fonts or use the local font files to host the fonts yourself. Note that we've removed the static font files for the font weights that aren't needed for this project.

    There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

    Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:

    1. Initialize your project as a public repository on GitHub. Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, have a read-through of this Try Git resource.
    2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below.
    3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles.
    4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
    5. Write out the base styles for your project, including general content styles, such as font-family and font-size.
    6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.

    As mentioned above, there are many ways to host your project for free. Our recommend hosts are:

    You can host your site using one of these solutions or any of our other trusted providers. Read more about our recommended and trusted hosts.

    We strongly recommend overwriting this README.md with a custom one. We've provided a template inside the README-template.md file in this starter code.

    The template provides a guide for what to add. A custom README will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like.

    Once you've added your information to the template, delete this file and rename the README-template.md file to README.md. That will make it show up as your repository's README file.

    Submit your solution on the platform for the rest of the community to see. Follow our "Complete guide to submitting solutions" for tips on how to do this.

    Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community.

    There are multiple places you can share your solution:

    1. Share your solution page in the #finished-projects channel of the Slack community.
    2. Tweet @frontendmentor and mention @frontendmentor, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
    3. Share your solution on other social channels like LinkedIn.
    4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are dev.to, Hashnode, and CodeNewbie.

    We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback.

    The more specific you are with your questions the more likely it is that another member of the community will give you feedback.

    We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io.

    This challenge is completely free. Please share it with anyone who will find it useful for practice.

    Have fun building! 🚀

    I used all manual no library

    #accessibility#animation#remix

    1

    Hussein Samy• 360

    @HusseinSamy

    Posted

    Hey Klvn, fantastic job! Give yourself a well-deserved pat on the back! 👏

    I appreciate the effort you put into adding the extra section. However, there are a few areas where you could make some improvements:

    1. Color Palette: Ensure to use the exact color palette (consider using extensions to assist you).

    2. Element Measurements: Strive to obtain precise measurements for each element.

    3. Consistent Typography: Ensure consistency by using the same font and correct line spacing throughout.

    On a positive note, I really liked that:

    1. Code Formatting: You used a code formatter to make your code visually appealing.

    2. HTML Tags Usage: You employed the right HTML tags, such as <figure>.

    3. Structure with <main> Tag: You wisely wrapped the entire page in a <main> tag.

    Here are a few recommendations:

    1. Style Splitting: Consider splitting your media queries into different files for better management.

    2. HTML Comments: Add comments in the HTML to clearly separate each section.

    3. Use of <section> Tags: Use <section> tags to delineate different sections of your code.

    Keep up the great work 🚀 If you have any questions or need further assistance, feel free to reach out!

    Marked as helpful

    0
  • Hussein Samy• 360

    @HusseinSamy

    Posted

    It's better to use an extension to help you create a PIXEL-PERFECT design to look identical to the design. You can try this one on any chromium-based browser: https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?pli=1

    I hope this helps you in your upcoming challenges, you have done a great job so far!

    Marked as helpful

    0