Skip to content
OverviewSolutions
16
Comments
14
Basit Korai
@basitkorai

All comments

  • Abdul Khaliq 🚀•72,580
    @0xabdulkhaliqSubmitted about 1 year ago

    👾 Hello, Frontend Mentor Community,

    This is my solution for the Advice Generator.

    • Scored 99% on Google Pagespeed Insights! 🤩
    • Solution with 99.9% Percent Accuracy 🎯
    • API is Integrated using async / await, which helps me to write code more cleaner
    • Custom 3D Dice with realistic spinning animation 🔥
    • Dynamic browser-bar theme feature, exclusively for Mobile devices ✨
    • Minified every source files during build to improve site's performance 🚀
    • Used Eslint with Prettier code formatter to ensure unified code format ⚙️
    • Layout was built responsive via mobile first workflow approach 📲
    • Had a lots of enthusiasm 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 !

    ADVICE GENERATOR 🎯 [ ASYNC/AWAIT - ES6 MODULES - WEBPACK - 3D DICE ]

    3
    Basit Korai•350
    @basitkoraiPosted about 1 year ago

    Hey, bro. I really loved your solution. Did you create the animation yourself or used some library?

    2
  • Basit Korai•350
    @basitkoraiPosted about 1 year ago

    Hi, my friend how are you?

    Congratulations on completing the project.

    Your project is really awesome. I have just one tip that you may find helpful.

    I think you should return React's fragment element instead of just returning the generic <div/> element as the parent in those situations where you don't want to return a <div/>.

    Besides that, everything looks good to me.

    Hope it helps to be a better developer 😊

    Upvote the comment if it helps

    0
  • Adriano•38,040
    @AdrianoEscaraboteSubmitted about 1 year ago

    👨‍💻 Hello everyone!

    This was my first fullstack project, and I'm really proud of how it turned out. I faced some challenges during planning, development, and hosting, but I learned a lot. It's my best work so far and my biggest project yet. I'm super happy with the results.

    Looking ahead, I'm excited to work on even bigger projects and improve my backend skills. My goal is to keep learning and getting better.

    Technologies used:

    Front-end:

    • Next
    • Typescript
    • TailwindCSS
    • Redux
    • Storybook
    • Jest

    Back-end:

    • Node
    • Typescript
    • Express
    • MongoDB
    • Firebase

    Concepts that are shaping backend architecture:

    • SOLID
    • Dependency Injection
    • Repository Pattern

    If you found any bugs or have any suggestions to improve this project, feel free to comment. I'm committed to making this project better and more effective, and your help is critical to achieving that goal.

    Thanks! 😊

    Link sharing app w/ (Next + Node + Typescript) 👨‍💻

    2
    Basit Korai•350
    @basitkoraiPosted about 1 year ago

    Hi Adriano, 👋🏻 congratulations on the project completion. I'm not knowledgeable enough to judge or provide feedback as this is a full-stack project. But I really admire it.

    1
  • Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hi, my friend how are you?

    Congratulations on completing the project.

    Your layout is so responsive, and I approve of it.

    But I have suspected your layout is breaking on smaller screens, you shouldn't set explicit height on the card. My tip is to avoid setting an explicit height on any element unless you really have to.

    • Because of explicit height, your content will overflow and will cause unnecessary scrollbars to appear. Just remove it, and you'll be good to go.

    Besides that, everything looks good to me.

    Hope it helps to be a better developer 😊

    Upvote the comment if it helps

    1
  • Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hi, my friend. 👋 I'm so happy you have completed the challenge

    I have a few suggestions to make it better.

    • Remove the margin from your body element, to get rid of the overflow that is adding unnecessary scrollbars on your page.
    • Instead of height: 100vh go for min-height: 100vh; in the body element for centering elements.

    Answer to your question We don't use vh or vw units very often, however in this case you just have a single component in your webpage, so here it's for giving the container (body) a minimum height of 100% of the viewport height. So it will be as big as your screen's height and the elements will be centered relative to the height of your screen.

    Upvote the comment if it helps

    I hope these tips will help you improve your code.😊

    Peace out✌️

    Marked as helpful
    0
  • Christopher Grainger•30
    @BrompySubmitted over 1 year ago

    I would greatly appreciate any sort of feedback on how to make my code more readable, efficient, or closer to the initial design.

    I'm not sure exactly about making this partciular exercise more responsive, as it seemed to be responsive "automatically" in the browser, but maybe I'm wrong about this?

    Basic CSS - My First Submission 😅

    1
    Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hi, my friend. 👋 I'm so happy that you have completed the project

    I have some suggestions to make it better.

    • Instead of height: 100% go for min-height: 100vh; in the .container element for centering elements. Why don't you try this for centering everything instead flex.
    display: grid;
place-items: center;
min-height: 100vh;
    • Remove height from other elements instead use padding to scale them vertically. Try using this logical property, padding-block.
    • You should opt for the <article> tag for your component instead of cramming everything in the <main> tag. (for making it accessible for the screen readers)
    • Give your main image an alt="describe the image". (for better accessibility)
    • Decrease the padding around your image, to match the design further.
    • Instead of this <p>Improve your front...</p> go for <h1> tag. (every webpage must have at least one)
    • For the font-size, opt for the rem units instead of pixels. video resource

    Upvote the comment if it helps

    I hope these tips will help you improve your code.😊

    Happy Coding✌️

    Marked as helpful
    2
  • Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hi, my friend. 👋 I'm delighted that you have completed the project

    I have some suggestions to improve your project.

    • I would suggest wrapping this entire component in an <article> tag for better accessibility.
    • For the main hero image, I would suggest going for the <picture> tag instead of this <figure>, it'll also help with automatically choosing the right image at the right viewport.
    • Set min-height: 100vh; to the <main> element for centering everything.
    • Also Update your background-color.

    Upvote the comment if it helps

    I hope these tips will help you improve your code.😊

    Happy Coding✌️

    Marked as helpful
    0
  • Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hi, my friend. 👋 I'm delighted that you have completed the project

    I have some suggestions to improve your project.

    • Set min-height: 100vh; to the <main> element for centering everything.

    • For the container, you should opt for <article> tag instead of a simple <div> tag.

    • For the headings, go for the actual <heading> tags.

    • For the description, go for the actual <paragraph> tags.

    • Also fix the font for the <buttons>

    • Fix padding under the icons.

    Upvote the comment if it helps

    I hope these tips will help you improve your code.😊

    Happy Coding✌️

    Marked as helpful
    0
  • Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hi, my friend. 👋 I'm really glad you have completed the project

    I have some suggestions to improve your project.

    • Fix the path of your images from this <img src="/images/image-equilibrium.jpg" alt=""> to this <img src="./images/image-equilibrium.jpg" alt=""> just add a dot in front of the forward slash.

    • Provide alt=" "text for the hero or any significant image to improve the accessibility.

    • On your <div class="card-container"> fix the padding. (I'd recommend 1rem).

    • Remove the height from the card-container, because setting height explicitly destroys the responsiveness of your website.

    • Instead of creating your card with <div> go for <article> tags instead, as the <div> don't have any semantic meaning. It will also increase your site's accessibility.

    Upvote the comment if it helps

    I hope these tips will help you improve your code.😊

    Happy Coding✌️

    Marked as helpful
    1
  • Adriano•38,040
    @AdrianoEscaraboteSubmitted over 1 year ago

    👨‍💻 Hello everyone!

    I'm so glad I completed this amazing challenge! I've learned a lot along the way and I feel my development has benefited from this challenging project. While it took a little longer than expected due to my familiarity with some technology, I'm thrilled to finally have it done!

    I faced several challenges during the project, especially regarding organization, which was a challenging aspect to maintain. However, I believe I managed to do a good job in this regard. It was my first time working on such a large project with multiple technologies, which made it difficult to organize everything and keep the code clean. Even so, I'm confident I did a good job!

    In addition to all the functionality required by the front-end mentor I added:

    • Unit tests and integration tests done with jest & Testing Library!
    • Documentation of components using Storybook!
    • Pre-loading!
    • Keep track of any changes, even after refreshing the browser!
    • Users can drag and drop tasks to change their status and reorder them in a column!

    If you have any suggestions for code improvements, please feel free to share!

    Thanks! 😊

    Kanban task management w/ (Next + Typescript + Tailwind) 👨‍💻

    4
    Basit Korai•350
    @basitkoraiPosted over 1 year ago

    @AdrianoEscarabote Congratulations on the project bro, it's mind-blowing. 😊✌️

    1
  • Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hello, my friend.

    I'm really glad you completed the project.

    Here are some suggestions to improve it:

    HTML

    • Wrap your component in an <article>...</article> element.

    CSS

    • Try this to prevent the card from hitting the edges of the screen
    article {
width: 80%;
max-width:  23.4375rem;  // (375px) as given in the style-guide
// these values are not hard and fast rules, just an example, try to adjust the width and max-width and see what works best for your project.
}
    • Add these styles to the <main> instead after adding the <article>...</article> for centering the component
    main {
height: 100vh;
display: grid;
place-content: center;
}

    I hope these tips will help you improve your project

    Happy Coding✌️

    Marked as helpful
    0
  • Musyoka Sila•240
    @sila254Submitted over 1 year ago

    Had trouble with the addEventlistener on the mark all as read and kept getting the error ' Null is Not an Object eventlistener'.

    Notifications-page

    1
    Basit Korai•350
    @basitkoraiPosted over 1 year ago

    Hi, Brother How are you? You're nailing it, but I have some suggestions for you that I think will improve your project.

    HTML: Here are things you must have in your HTML

    1. You must use a <main>...</main> tag for better accessibility.
    2. Each Webpage must have an <h1></h1>. (Level one heading).
    3. You must use <article></article> tag for each item that can standalone. e.g. notifications, sidebars, etc.

    Just try to write more semantic HTML

    Add transitions as well

    And, as far as Javascript is concerned. I have fixed all the bugs.

    Here is the code

    const button = document.getElementById("mread");
const unseenNotifications = document.querySelectorAll(".unseen");
const numOfNotifications = document.querySelector(".num");

button.addEventListener("click", () => {
unseenNotifications.forEach((item) => {
let dot = item.querySelector(".dot");

numOfNotifications.remove();
item.classList.remove("unseen");
// removes unseen class from each notification
dot.remove(); // removes the dot
button.remove(); // removes the mark as read buttons as you have marked all as read why would you need it anymore
});
});

    It's all about Problem-Solving.

    Tip: Try to break down the functionality before coding.

    Happy Coding ✌️

    0