jeyaprakash• 255
@log-bait
Submitted
somehow i manage to make it....any bugs or errors or mistakes please let me know
Folarin Akinloye
@folathecoder
All comments
- Folarin Akinloye• 1,240
@folathecoder
Posted
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
@folathecoder
Submitted
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! ❤❤
Folarin Akinloye• 1,240@folathecoder
Posted
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-Bou
Submitted
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.
Folarin Akinloye• 1,240@folathecoder
Posted
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 - PApplePieGiraffe• 30,545
@ApplePieGiraffe
Submitted
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! 😁
Folarin Akinloye• 1,240@folathecoder
Posted
Hi APG! I want to be like you when I grow up! 😀 This is awesome and very sleek. Keep it up!
2 - Raymond• 105
@raybags-web-dev
Submitted
I did not use the extact colors as the appear on the models instead i concentrated on the basic fucntionality and layout. I would love to hear from what you guys think. Feedback in important to me. Thanks.
Folarin Akinloye• 1,240@folathecoder
Posted
Hi Pal! I don't think the multiplication works. I tried it few times. Kindly check it out! Great work! 👍
2 - Kyle• 155
@kyle4real
Submitted
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?
Folarin Akinloye• 1,240@folathecoder
Posted
Hi @kyle4real!
I think you really nailed most part of the implementation. Although, there are some small, but noticeable features you can adjust:
- 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.
- You forgot to make the footer menu "clickable links". Try wrapping them with an a tag.
- 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.
- 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.
- 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
@albhatti
Submitted
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/
Folarin Akinloye• 1,240@folathecoder
Posted
Keep it up!
1 - albhatti• 10
@albhatti
Submitted
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/
Folarin Akinloye• 1,240@folathecoder
Posted
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• 345
@LesleyWesley
Submitted
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!
Folarin Akinloye• 1,240@folathecoder
Posted
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
@Mardiya07
Submitted
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.
Folarin Akinloye• 1,240@folathecoder
Posted
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:
- 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/
- 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!
- 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!
- 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!
-
Avoid using the break tag "br".... Except when necessary.
-
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!!😀
- 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.
-
You are good with flexbox 😀
-
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
@erickcerna
Submitted
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.
Folarin Akinloye• 1,240@folathecoder
Posted
Hi Erick!
Nice submission! Kudos! Your implementation looks nice and it responds well on all devices.
There are some tiny details you missed:
-
You used the wrong font family for your card headings. It ought to be "Big Shoulders Display".
-
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!)
-
You can work on accessibility by using rem instead of pixels.
-
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.
-
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 -
- Alain Moratalla• 135
@almoratalla
Submitted
Hello everyone, I am open to suggestions or any forms of feedbacks to improve my skills. Please feel free to share if there any points that I can improve or tips for best practices that I can follow. Any form of remarks will be highly appreciated. Thank you!
Folarin Akinloye• 1,240@folathecoder
Posted
Hi Alain!
Your page is giving an "Error 503 Service Unavailable" prompt. Kindly fix it!
2 - Folarin Akinloye• 1,240
@folathecoder
Submitted
I wanted to try out some new CSS tricks with this challenge.
Check the way I converted my pixels to rem using a function.
Check my accessibility also!
Thank you!
Folarin Akinloye• 1,240@folathecoder
Posted
Thank you Grace!
0 - imjackfrost1997• 145
@imjackfrost1997
Submitted
Any feedback will be a big help thanks :D
Folarin Akinloye• 1,240@folathecoder
Posted
Nice submission!
A quick tip: Always try to clear all accessibility and HTML issues as soon as you submit your work. This will make your implementation more presentable and show that you coded a problem-free page.
2 - Sebastian T• 120
@tssessy
Submitted
Any feedback is always welcomed!
Folarin Akinloye• 1,240@folathecoder
Posted
Hi Sebastian!
You really have an eye for design and great implementation. Keep on growing!
Your implementation looks great on all devices, but there some minor but obvious glitches in the footer. You can assess this by previewing the web page on tablet mode (try switching it to 754px width).
Your buttons can also be made responsive for smaller screens. Presently, all buttons have fixed width, hence they will get distorted when the screen gets smaller. (I don't think you need to define a width for your button, let padding do the job).
Kindly correct me if I am wrong!
Happy Coding!
1 - Antonio TS• 60
@antoniotullyspinozzi
Submitted
Am still struggling with determining the break points in my responsive design and how many scales I should be using. Any tips or further reading would be appreciated.
Folarin Akinloye• 1,240@folathecoder
Posted
Hi Antonio!
For responsive breakpoints, I normally use bootstrap's standard breakpoints. I basically use it as a reference (to at least know where to start from) and I go ahead to adjust it based on my design.
Note that, breakpoints don't have to be fixed, you need to adjust it based on what you are building. So it can fall within a range.
Here are Bootstrap breakpoints:
https://getbootstrap.com/docs/5.0/layout/breakpoints/
2 - Dakota• 20
@DakotaCoder
Submitted
Comments welcome
Folarin Akinloye• 1,240@folathecoder
Posted
Hey Dakota!
You have started well, keep it up!
There are some changes you might want to make:
Note: I only viewed this on my mobile phone, so I can't really tell how it looks on larger screens.
-
Adjust the mobile font size, it is too small for accessibility.
-
I noticed that you made use of variables to define your colors. That's awesome!
But you still went ahead to enter colors directly in some sections of your code. You can easily assign a variable to the color and that will make it easier if you wish to maintain your code.
- I suggest you look into BEM for naming classes. This will really help you when you start using SCSS/SASS.
Happy coding!👍
2 -
- ◤orres• 320
@devatorres
Submitted
Folarin Akinloye• 1,240@folathecoder
Posted
Hi Champ!
This is very cool on mobile. I did not have the opportunity to check on other devices. This is cool and I love it animation entrance.
Always try to fix all html and accessibility issues that pops up after submission.
Happy coding!
1 @dcolaneri
Submitted
Any feedback will be appreciated. Thanks!
Folarin Akinloye• 1,240@folathecoder
Posted
Your desktop solution is looking great. I think it is best to complete the project or challenge before submitting, so other developers can give you an overall feedback.
Happy coding!😇
1- Akshay Meshram• 390
@akshay63
Submitted
Hi, all. I have made a landing page which took a whole day to build it. For the first time, I have used BEM notation and SCSS and at first, I got confused about what is happening with my code, and as I practice it using this challenge I understood that it relieves so much pain from such a big layout and that's why it's so useful.
I've made the landing page as responsive as it can get. I know my SCSS is messy and confusing right now but have a look if you found some room for improvement and please let me know. 😎👍
Folarin Akinloye• 1,240@folathecoder
Posted
Hi, Akshay Meshram!
Your solution looks clean on most devices except very large screens (like 5000px width). It is important to make a webpage appear perfect on larger screens also, because monitors of those sizes are becoming very common.
You can assess this by using a browser inspector to check for responsiveness on huge screens.
Solution: You can wrap each section and give them an appropriate max-width, instead of setting the width to 100% (this will take the width of the whole screen)!
I hope this helps!
Happy coding!
1 - drallas• 375
@Drallas
Submitted
This was my final newbie challenge and I had fun again building it, more details about my process are in the readme.
Feedback is very much welcome I'd like to learn and improve my skills! I'm curious if my approach is correct and what i should consider refactoring or doing different next challenge..
Folarin Akinloye• 1,240@folathecoder
Posted
Hi Drallas!
Your implementation is clean and looks great. Congrats on your journey and keep it up!
The responsiveness of the page is great on only desktop and mobile. The tablet view should not take the form of a mobile screen. Try to make that tablet more responsive or look more like a tablet by making great use of the available space. You can make the tablet layout look like the desktop, with minor tweaks!
Also, your testimonial cards should have a min-height and not a fixed height. Declaring a fixed height will make the content inside the cards to pop out when the screen is smaller. You can test this by displaying the page on a 240px-width screen.
A min-height will allow the content inside the card to determine the height of the card.
.cards__item { text-align: left; height: 248px; (min-height: 248px) color:hsl(0, 0%, 100%); border-radius: 8px; background-color: var(--very-dark-magenta); margin-bottom: 1rem; }
Just a few suggestions, I hope it helps...... Feel free to correct me if I am wrong!
Happy Coding!
3 - Folarin Akinloye• 1,240
@folathecoder
Submitted
Hi Legends!
Please check my implementation and my code!
All feedbacks are welcome!
Folarin Akinloye• 1,240@folathecoder
Posted
Thank you very much!
I appreciate your feedback!
1 - Kristýna• 40
@KristynRiho
Submitted
Hello, this is the first time I tried to use CSS Grid, if you have any recommendations for my code, I'll appreciate it.
Folarin Akinloye• 1,240@folathecoder
Posted
Hi KRISTÝNA!
Nice implementation and clean CSS code. Kudos!
I only had the privilege to view your work on mobile device, so I don't have feedbacks on other screen sizes.
On mobile, the left and right margins on the cards should be smaller so it can look closely similar to the sketch!
Also the shadow in the cards should be reduced a little. You can do this by adjusting the spread of the shadow!
Overall you did a good job with CSS Grid and you made proper use of Grid Span.
I recommend you learn scss when you get comfortable with css, because it will help you write more maintainable and dry code.
I see your class naming style is almost similar to BEM naming convention , you can check out BEM.... it is quite good for nesting similar classes when writing SCSS.
Great work! 👍
3 - Folarin Akinloye• 1,240
@folathecoder
Submitted
Please check the responsiveness and my code base.
What am I doing wrong?
And does this look like a professional work? Kindly rate my implementation over 10.
Thanks!
Folarin Akinloye• 1,240@folathecoder
Posted
Thank you Grace! 🙂 I will make necessary adjustments!
0
