Guidance
Hi everyone , I'm currently front end beginner who is trying to build front end mentor challenges to learn and practice front-end skills.
When doing some of the challenges i face a lot of things that i know nothing about. So basically seeing tutorials and reading a +10 different solutions or asking AI has drained my soul , the job is done but the learning value is 0.
Take opening and closing navigation bar for mobile devices as an example, I've done it 4 times and still can't build one on my own without repeating everything everytime.
The thing that I'm asking for is when i see something that i don't know about , how i should deal with it without watching tutorials and etc... , how to actually learn and have the ability of doing (building) without seeing and reading or copying solutions?
3 Replies
It's tough to say as it depends on the individual. I normally like to follow tutorials but then add on unique things. For example, I'll build a card component but then want to add a hover animation or change the responsive sizing of the image. Small things like that help you really understand the code you're writing and expanding upon. Or try adding functionality to existing projects. Make a login page using some sort of auth. Or integrate a blog into an existing website.
Taking the initiative to add on is where real learning takes place. Additionally, teaching. If someone comes here with a question, try to help them solve it. By solving their problem, you'll understand the inner working of things.
Lastly, don't beat yourself up by copying and pasting. Most people copy and paste a majority of things. I constantly use my old code in new projects to save time and will edit it rather than start from scratch. It's okay to copy and paste, just try to understand why what you're copying works
@Index To really learn and get better at front-end development, you need to focus on understanding what you're working on, not just completing tasks. Here’s how you can approach it:
1. Understand the Basics: When you come across something new, take time to figure out what it does and how it works. Ask yourself questions like: What is its main function? How is it manipulated? Break it down and make sure you fully get it before moving on.
2. Practice What You Learn: Once you understand the concept, try using it in small projects or features. Focus on that one thing until you feel comfortable with it. Don’t rush into learning new stuff right away.
3. Build Personal Projects: Use what you’ve learned to make something of your own. When you work on personal projects, you’ll run into challenges that force you to apply what you’ve learned in real ways, which is where the real learning happens.
4. Take Your Time: Don’t feel pressured to rush through things. Learning takes time, and it’s better to go slow and really understand than to move quickly and forget everything later.
5. Collaborate with Others: If possible, spend time with other developers or find a mentor. It’s super helpful to have someone who can explain things or answer your questions when you’re stuck.
Practice over and over . Figure it out with tutorial or resources. Then delete that and build it again from memory, scrub through the tutorial to a certain spot if you get stuck. Then delete and again. Then give it a break for a day or two , come back and do it again from memory. Try not to refer back to tutorial and debug , throw pasta at the wall until it sticks.
Repetition and muscle memory along with the more thoughtful answers above.
Frontend mentor is good but I had great success using iCodeThis and their provides references for daily practice. Started out trying to match the design as closely as I could then once I was comfortable and confident I could accomplish that, used the reference image as an inspiration and created my own project based on it in some way. Playing around in sandboxes with different properties or concepts. When you get really stuck, posting your question and code in forums like this.
iCodeThis
Projects to improve your coding skills!