Skip to content
OverviewSolutions
20
Comments
28
Folarin Akinloye
@folathecoder

All comments

  • Folarin Akinloye•1,240
    @folathecoderPosted about 3 years ago

    Hi Pal! 😎

    Congrats on attempting another cool challenge. Kudos!!

    There are some important features you forgot to implement:

    1.) Drag and Drop functionality => A user should be able to re-arrange the list. 2.) localStorage => You did not store the current state of the app locally, this is why the inputs and theme settings clears when the app is refreshed. 3.) Theme Switch Implementation => You can easily make use of CSS to perform the theme switch by defining all the color variables under a class name and simply toggling the class on and off, instead of writing your code in JavaScript. 4.) The "TODO" logo can be implemented using letter-spacing in css. You don't need to literally space the text like you did on line 22 of your index.html => "T O D O"

    Overall, good job! 👌 Keep it up!

    Marked as helpful
    1
  • Folarin Akinloye•1,240
    @folathecoderSubmitted about 3 years ago

    Hi Devs! 👊

    This is my first ever react application. I just started learning React 2 weeks ago and I must say, it has been fun 👌😎,kind! Thanks to my ES6 knowledge, the learning process was kinda fast.

    In this Todo App challenge, I focused more on hooks for maintaining the state of the application and conditional rendering. It was not easy!

    Note: The library I used to implement the drag and drop functionality really messed with the accessibility and markup performance. (React Beautiful DND Library)!!!

    Kindly vet the way I use hooks and create components!

    Thanks for your feedbacks! ❤❤

    React | SCSS | DND Library | Todo App with Theme Switch & Drag-Drop

    2
    Folarin Akinloye•1,240
    @folathecoderPosted about 3 years ago

    Note: The library I used to implement the drag and drop functionality really messed with the accessibility and markup performance. (React Beautiful DND Library)!!!

    0
  • Zineb Boutaa•750
    @zineb-BouSubmitted about 3 years ago

    Hi everyone 😊 thank you for checking out my solution. It's been like a month and half since I took this challenge, my first solution was using vanilla JS and Css, I learned more things since then so I decided to retake the challenge using different technologies. Any feedback is welcomed.

    Social-media-dashboard-with-theme-switcher.

    1
    Folarin Akinloye•1,240
    @folathecoderPosted about 3 years ago

    Hey Great job!

    Learn more about localStorage. With localStorage a user will be able to set a default theme instead of the theme switching back on reload.

    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted over 3 years ago

    Hello, everybody! 👋

    I finally completed another challenge! 🎉 I know it's been a while, but I'm happy to submit another solution after taking a little break. 😆

    This was a short, simple challenge that I created with Svelte. Svelte is such a joy to use and it worked out really well with GSAP (which I used to add the animations to the site). I also used ScrollTrigger and smooth-scrollbar to enhance the animation and scrolling experience just a bit! 😀

    And for a tiny surprise—scroll past the hero section and back again to toggle the avatars of some of your favorite Frontend Mentors! 😆

    Of course, feedback is welcome and appreciated! 😊 Do let me know of any issues you find (since I'm afraid I'm bound to have missed something somewhere)! 😅

    Oh, yes, and click on the giraffe for the attribution. 😉

    Happy coding! 😁

    Meet Landing Page | Svelte + GSAP | Surprise!

    18
    Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi APG!
    I want to be like you when I grow up! 😀 This is awesome and very sleek. Keep it up!

    2
  • Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi Pal! I don't think the multiplication works. I tried it few times. Kindly check it out! Great work! 👍

    2
  • Kyle•155
    @kyle4realSubmitted over 3 years ago

    How does it look? Question: I added the dropdown event listeners to the nav link divs, and even though the chevron elements are children of the nav link divs, when you click directly on them, the event doesn't trigger.. how do I fix this?

    Responsive Website Using HTML, CSS, and Vanilla JavaScript

    2
    Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi @kyle4real!

    I think you really nailed most part of the implementation. Although, there are some small, but noticeable features you can adjust:

    1. The image assets you used for the mobile view are the desktop versions. In the images folder two different image designs were provided for each screen size. You can switch them using media queries.
    2. You forgot to make the footer menu "clickable links". Try wrapping them with an a tag.
    3. The SVG background in the "State of the Art Infrastructure" is not aligned properly on mobile. You might want to adjust this using media queries. Although, your implementations don't have to be pixel perfect, but features like that seem aesthetically important.
    4. If you try viewing the page on very large screen sizes like 5000px, you will notice that the page is not responsive. You can solve this by wrapping and centering the main content of the page.
    5. Also, whenever you submit your work, try clearing all the HTML and Accessibility errors on the page by clicking on "View Report".

    Overall, you did a really cool job. I love the mobile menu drop-down and sleek finish.

    Keep coding! 😎

    1
  • albhatti•10
    @albhattiSubmitted over 3 years ago

    This is my first challenge submission on front end mentor.

    I tried my best however, I would love to recieve feedback and review on my solution and also on how to make my code more simpler and shorter.

    The only issue i faced was I cound not manage to apply the purple shade on the image. I tried googling but no success.

    If the live site url does not work, please try https://frontendmentor01-nine.vercel.app/

    Mobile first site using HTML and CSS only

    2
    Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Keep it up!

    1
  • albhatti•10
    @albhattiSubmitted over 3 years ago

    This is my first challenge submission on front end mentor.

    I tried my best however, I would love to recieve feedback and review on my solution and also on how to make my code more simpler and shorter.

    The only issue i faced was I cound not manage to apply the purple shade on the image. I tried googling but no success.

    If the live site url does not work, please try https://frontendmentor01-nine.vercel.app/

    Mobile first site using HTML and CSS only

    2
    Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi Albhatti!

    It is nice to see you tried out a challenge. Kudos! Your solution can be improved by making the card responsive across devices. Also, I found the image overlay tricky at first, but I eventually solved it.

    You can checkout my solution on how I executed the overlay https://www.frontendmentor.io/solutions/responsive-card-component-using-scss-dPHJNYSk5

    1
  • Lesley Wesley•365
    @LesleyWesleySubmitted over 3 years ago

    Hey guys! The only question I really have is about the "Learn More" link. I just have it as an anchor tag in my code, and I was wondering if that was okay, or if it would be better to give it a button tag? Thanks in advance for any feedback!

    Responsive 2-Column Card Preview using Flexbox

    3
    Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi Lesley!

    Based on this project, the use of "a" tag is appropriate since its only function is to link to an external or internal source.

    There are other use cases where the button tag is appropriate. You can check out this article to learn more about buttons: https://css-tricks.com/use-button-element/

    Have a great day!
    Happy Coding! 😎

    1
  • Mardiya•55
    @Mardiya07Submitted over 3 years ago

    Hey guys🖐😊. I tried my first frontend mentor challenge with the 3 column card. Please take a look at it and give me feedback on what you think. What you think i could do to improve, omit or even better practices you think i should take up. I am open to all of them. Thanks in advance.

    A 3-column preview card component

    2
    Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi Mardiya! 😃

    Nice attempt to create the sketch. Kudos! Your documentation and commit messages are lit. There are some changes you might wanna make.

    I will start listing them under this thread:

    1. Meta description is important: Try to get in the habit of optimizing a page for SEO. SEO is one of the core skills of a frontend developer.

    I recommend you checkout "SEO for developers" on YouTube (like a 20 minute video) and then learn about about open graphs. https://ahrefs.com/blog/open-graph-meta-tags/

    1. Remove the style tags in your html and it is considered a bad practice to write in-line css.

    Writing styles inside your html will take precedence over external CSS, so overriding it will be very difficult.

    And you will not be able to maintain your CSS code.

    Always use external stylesheets!

    1. For button design, people usually use the "a" tag instead, because it gives you the flexibility of creating your preferred button from scratch. The "button" tag is a lot of work because you will need to override the existing style before creating yours!

    Always use "a" tags for buttons!

    1. The way you name your CSS classes can be improved. I recommend you learn the BEM naming convention. You can check this on YouTube.

    It will help you write nestable CSS. When you start using a preprocessor like scss or sass, you will appreciate it more!

    1. Avoid using the break tag "br".... Except when necessary.

    2. The 3 cards ought to be placed in the same container and not individually.

    This is causing it to distort on smaller screen sizes..

    For example, view your work on 1044px screen width!
    You will notice that the cards are not properly aligned.

    LET'S MOVE INTO YOUR STYLESHEET!!😀

    1. To avoid repetition, always add general settings to the body of your website and not the "main"

    Stuffs like font family, background color, etc should be added to the body.

    1. You are good with flexbox 😀

    2. You can learn more about using variables to write more maintainable css. With this method, you will just need to assign variables to resuseable properties and then insert them when needed.

    You won't need to keep repeating yourself.

    Below is a good code along video by KEVIN POWELL, it helped me get comfortable with css.

    https://youtu.be/bn-DQCifeQQ

    Overall, it is a good start! Keep coding! 😎

    3
  • Erick Cerna•60
    @erickcernaSubmitted over 3 years ago

    Hi everyone, I did this project to practice my CSS Grid and FlexBox knowledge. I would appreciate if you leave me any comments or suggestions about this project.

    3-column

    1
    Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi Erick!

    Nice submission! Kudos! Your implementation looks nice and it responds well on all devices.

    There are some tiny details you missed:

    1. You used the wrong font family for your card headings. It ought to be "Big Shoulders Display".

    2. The buttons are a bit bigger than the sketch, you can solve this by reducing the left-right padding to 30px or so, instead of 50px. As a Frontend Developer, you should always try to recreate a sketch design as it is. (Attention to details!)

    3. You can work on accessibility by using rem instead of pixels.

    4. You can also assign variables to your font family, just like you did for colors. This will make your work more maintainable and avoid repetition.

    5. You can take full advantage of SCSS functionalities by using mixins for your media queries (if you want to!).

    Overall, you have done well. Keep it up, Pal!

    3
  • Folarin Akinloye•1,240
    @folathecoderPosted over 3 years ago

    Hi Alain!

    Your page is giving an "Error 503 Service Unavailable" prompt. Kindly fix it!

    2