Skip to content
OverviewSolutions
2
Comments
16
Hussein Samy
@HusseinSamy

All comments

  • Hussein Samyā€¢340
    @HusseinSamyPosted 11 months ago

    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ā€¢340
    @HusseinSamyPosted 11 months ago

    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ā€¢340
    @HusseinSamyPosted 11 months ago

    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
  • Hussein Samyā€¢340
    @HusseinSamyPosted 11 months ago

    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
  • Hussein Samyā€¢340
    @HusseinSamyPosted 11 months ago

    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ā€¢450
    @abhay0480-engSubmitted 11 months ago

    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

    1
    Hussein Samyā€¢340
    @HusseinSamyPosted 11 months ago

    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ā€¢340
    @HusseinSamyPosted 11 months ago

    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ā€¢340
    @HusseinSamyPosted 11 months ago

    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
    @archeanaSubmitted 11 months ago

    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ā€¢340
    @HusseinSamyPosted 11 months ago

    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
  • Kirsten āœØā€¢460
    @ofthewildfireSubmitted 11 months ago

    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ā€¢340
    @HusseinSamyPosted 11 months ago

    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-CODESubmitted 11 months ago

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

    html and css

    2
    Hussein Samyā€¢340
    @HusseinSamyPosted 11 months ago

    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
    @DeveloperChrisPSubmitted 11 months ago

    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ā€¢340
    @HusseinSamyPosted 11 months ago

    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