Skip to content
OverviewSolutions
25
Comments
75
Marzuk Sanni
@Zukizuk

All comments

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted 9 months ago

    🎁 Features:

    • Next.js Server Actions to fetch data with:
      • Filtering 📂
      • Pagination ♻️
      • Sorting 🔍
    • Achieved +95% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
    • Resemblance with the original design. 🎨
    • Small animations with Framer motion. 🎬
    • No errors or warnings using ESLint (Airbnb style guide). ✔️
    • Custom hooks. 🎣
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. 💻

    🛠️ Built With:

    • Next.js 14. ⚡
    • TypeScript 🚀
    • TailwindCSS. 🎨
    • ESLint (Airbnb style guide). 📦
    • Framer-motion. 🎬
    • npm - prettier - prettier-plugin-tailwindcss. 💻

    🔍 Clarifications:

    • While the Rest Countries API was an option, it had limitations like lack of pagination and limited filtering capabilities. I opted to utilize Server Actions in Next.js and the data.json provided with the challenge. This allowed seamless integration with MongoDB for efficient data handling.
    • I acknowledge that continuous polling for change requests might consume more data, but it was implemented for experimental purposes.

    Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

    Thank you. 😊✌️

    REST Countries API (Next.js & Server Actions + TypeScript + Tailwind)

    6
    Marzuk Sanni•1,360
    @ZukizukPosted 7 months ago

    Hello 👋. Your solution looks amazing, as always.

    I am done with this project but I was wondering how to sort the initial fetch result to match that of the design. Can you please tell me the criteria you are using for the sort ?

    1
  • SantiMora06•30
    @SantiMora06Submitted 9 months ago

    Firstly it was my first project ever, so I was a bit nervous and overwhelmed by this challenge. I founded some of the CSS elements hard to set because of my lack of knowledge and practice, I got a bit confused and became crazy at some point.

    Right now I'm unsure about mostly CSS features, such as position, display and make correct padding or margin, although I'm getting daily more confident with HTLM.

    I'd love to ask which would be the best practices in CSS and HTLM that need to be continuously follow.

    Thank you so much in advance!

    Creating a omelette recipe web page with HTML and CSS

    2
    Marzuk Sanni•1,360
    @ZukizukPosted 9 months ago

    FEEDBACK TEMPLATES

    On semantic HTML

    Hello there, Congratulations on completing your first challenge here!

    Your solution looks nice

    I have a few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. The main tag should hold all the main content of you page so note that.

    The semantic HTML tags help search engines and other user devices determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div holds no semantic value.

    The html styling is not styled like this

    html{
    background-color: hsl(35, 94%, 93%);
    border-radius: 2%;
    max-width: 95%;
    padding: 2.5%;
    margin-left: auto;
    text-justify: auto;
    word-spacing: auto;
}

    You gave the body a fixed with which shouldn't be so body{width: 1440px}. These stylings also need to be placed at the topmost of your styles not the bottom.

    @font-face {
    font-family: YoungSerif-Regular;
    src: url(./assets/fonts/young-serif/YoungSerif-Regular.ttf);
}
@font-face {
font-family: Outfit-VariableFont;
    src: url(./assets/fonts/outfit/Outfit-VariableFont_wght.ttf)
    }

    You html also need more work on it concerning semantic html, naming of html file, and more and I would like to correct you on all that but the feedback would be too long to do, so suggest you check my solution for this challenge here /my-solution. And if you don't get anything, you can write under it and I would explain to you.

    I hope this feedback is helpful.

    Other than that great job

    Marked as helpful
    1
  • Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, and congratulations on completing this challenge.

    Your solution looks nice.

    I have a few suggestions that I think might interest you.

    Your use of semantic HTML was done well, but there's something that you should know about the use of section. Whenever you use a section, you are required to provide a heading for that section. Your <section class="content" has a heading, but the other one doesn't. In this situation, I think you should have used div, since all the content on this challenge is related and on the same page too. Use sections when the content is not related; otherwise, provide a heading for each section.

    I hope this feedback is helpful.

    Other than that, good job!

    Marked as helpful
    1
  • Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project!

    Your solution looks nice

    I have a few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace <div class="container"> with <main class="container">. The main tag should hold the main content of the page so consider correcting that.

    The semantic HTML tags help search engines and other user devices determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div holds no semantic value.

    CSS: Also, you need to reset your style sheet at the start of your webpage before you start actually styling your webpage. Like this

    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

    Consider using the above code at the start of your CSS file to reset the stylings for you before you begin.

    I hope this feedback is helpful.

    Other than that great job

    0
  • Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project

    Your solution looks nice

    I have few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="main"> with <main class="main">. the main tag should hold the main content of the page so consider correcting that.

    The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.

    - CSS: use the following stylings to help center your card

    body {
min-height: 100vh;
display: grid;
place-items: center;
}

    I hope this feedback is helpful

    Other than that great job

    0
  • Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project

    Your solution looks nice

    I have few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="container"> with <main class="container">. the main tag should hold the main content of the page so consider correcting that.

    The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.

    The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. In your code I didn't see any h1 tag but h2 which is wrong so consider fixing that.

    I hope this feedback is helpful

    Other than that great job

    0
  • Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project

    Your solution looks nice

    I have few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="container"> with <main class="container">. the main tag should hold the main content of the page so consider correcting that.

    The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.

    The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. In your code I didn't see any h1 tag but h3 which is wrong so consider fixing that. Please note that if there's no h1. there shouldn't be an h2 or h3. But again every page need an h1.

    Also if you want to center your card. You could have used align-items: center; since you used display: flex; to center the card vertically

    I hope this feedback is helpful

    Other than that great job

    0
  • FAIZAN AHMED•10
    @Prog-FaizSubmitted 10 months ago

    Hey everyone, I'll be a great help if you provide feedback for the following questions:

    1. Are the CSS starting rules the correct way of doing or whether they are the best practices?
    2. My HTML be good or is there a better way to achieve these?

    And any other feedback will be a great help.

    Responsive design using flexbox.

    1
    Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project

    Your solution looks nice

    I have few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="main"> with <main class="main">. the main tag should hold the main content of the page so consider correcting that.

    The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.

    Also you didn't include an H1 tag in your page. Note that every page need an H1 tag and you don't have to skip them. I mean if you should have an h1 before h2 and so on. So please fix that.

    I hope this feedback is helpful

    Other than that great job

    Marked as helpful
    0
  • Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project

    Your solution looks nice

    I have few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="card"> with <main class="card">. the main tag should hold the main content of the page so consider correcting that.

    The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.

    The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. In your code I didn't see any h1 tag but h2 which is wrong so consider fixing that.

    I hope this feedback is helpful

    Other than that great job

    0
  • aurobyte•40
    @taranjeetsingh9Submitted 10 months ago

    Difficult part is align position to center as well as adjusting attribute class position. I am sure it is good solution but i am not sure whether it is the best approach and it can be better i think.

    QR code Responsive

    2
    Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project

    Your solution looks nice

    I have few suggestions that I think might be of interest to you.

    - HTML: Consider using semantic HTML tags like <main></main>,<section></section> and others that you can find in this link. And in this case, replace the <div class="main"> with <main class="main">. the main tag should hold the main content of the page so consider correcting that.

    The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience. Using div when there's a better alternative is not a good practice as div hold no semantic value.

    The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on. In your code, I didn't see any heading element. and as I said. every page need at least h1 tag so consider fixing.

    I hope this feedback is helpful

    Other than that great job

    Marked as helpful
    0
  • kaynantDEV•100
    @kaynantDEVSubmitted 10 months ago

    I've just completed a front-end coding challenge from @frontendmentor! 🎉

    You can see my solution here: https://www.frontendmentor.io/solutions/pgina-de-links-responsiva-h79u9B1hZz

    Any suggestions on how I can improve are welcome!

    página de links responsiva

    1
    Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there congratulation on completing this challenge.

    Your solution looks nice.

    I have few suggestion that I think might interest you.

    You shouldn't use section just to divide things, in such situations use a div element instead like. The <section> tag in HTML is used to define sections in a document. It's typically used to group related content together, such as chapters, headings, or any thematic grouping of content. Also every section tag needs at least one heading tag like h1 or h2 or h3 so think about it before using it.

    In this particular challenge you use section tag to group the element which I think wasn't best. You should have used a div element because then you won't have to provide any heading tag and hide it.

    I hope this feedback is helpful

    Other than that great job

    Marked as helpful
    0
  • Marzuk Sanni•1,360
    @ZukizukPosted 10 months ago

    Hello there, Congratulations on completing this project

    Your solution looks nice

    I have few suggestions that I think might be of interest to you.

    I think you shouldn't have used a section here <section class="image"> instead use div. Using a section requires you to provide a heading tag in the section. you can read more about that here heading element.

    I hope this feedback is helpful

    Other than that great job

    Marked as helpful
    1