DEV Community

loading...
Cover image for How to stay focused πŸ” as a self taught Frontend Web Developer πŸ’»

How to stay focused πŸ” as a self taught Frontend Web Developer πŸ’»

Chris Hansen
Hey there πŸ‘‹ I'm Chris. I Create fast, modern, client-side facing websites with technologies like React and Javascript. Also follow me on Twitter and IG ✌️
・Updated on ・7 min read

Staying focused is one of the hardest tasks when pursuing a new hobby, goal or project. Trying to break a bad habit? I'm sure you've been there. Trying to get healthy, maybe shed a few pounds, or even add some? That requires 100% focus. A momentary lapse can spell trouble for a solid weeks worth of good choices. How about I throw Web Development into the mix? πŸ˜… One of the fastest moving and dynamic fields in Tech.

Hopefully, with these few tips, I can help you either stay on track, or prevent you from listening to that doubtful little voice in the back of your head telling you to quit. Everyone has experienced these hurdles. You're not alone, so let's get into it D:


Don't Let "which framework is the best" Take Up Your Time πŸ•”

Image banner showcasing top web development frameworks battling eachother

It's unfortunate how often I see this question being asked on all platforms of social media. On Twitter, Instagram, Youtube... people love seeking this answer! I'm sure developers much more experience than myself, will agree, you should just focus on the basics ! I remember quite vividly, during my HTML and CSS learning journey, I told myself, "this process could be quicker." That's when I did my first Google search, "How to speed up web development," or something along those lines. It's when I first discovered and learned of Angular, and other frameworks. As I dived into tutorial after tutorial after tutorial, I wasn't making any traction. Because not only do frameworks expect you to have a solid grasp of the fundamentals, they essentially have their own language too. At the very least, a set of ground rules and specific syntax that you must adhere too. Specific file structures, design patterns, etc. All this does is SLOW down your process of getting really good at HTML, CSS, and Javascript, the only languages you need for a strong foundation.

So, what can you take away from this tip? If you're not asking yourself, "I need to speed up my projects development process," a framework is just not necessary. Don't worry about, React vs Vue vs Angular. They'll come to you when you need 'em.

PS + I have seen a trend of great developers dodging frameworks all together, and pride themselves at making beautiful websites with HTML, CSS, and Javascript. And trust me, they perform! πŸ‘


Escape Tutorial Hell ✌️

Banner showcasing a bunch of youtube tutorials in big letters

Developers getting stuck in tutorial hell is very real and very time consuming. I myself have found myself stuck in a loop of never ending tutorials. But just like you, I had good intentions going into it. I'm gonna learn this, then that, then I'm going to build something great! Right? If you got a big brain and the IQ of Stephen Hawking, then sure, you just might build the next great weather app. But for us normies, applying what we just learned or "watched" is next to impossible. As we code along with the tutorial, we're not learning and applying. We're mindlessly trying to jot down everything we see on the screen. It's no different than being in an auditorium in college amongst 200 students, just trying to catch every word on the projector before the professor changes pages, yet alone actually listening to what the professor is saying. But, if you can grasp key points in the notes, and immediately after class, skim over important concepts for just 15 minutes, you'll retain much more of what you learned, and can be that much more prepared for your next session. As opposed to not reading your notes immediately after class, majority people will lose about 70% of what they just listened to or wrote down just minutes ago.

The same applies for web dev tutorials on the web. If you find an interesting project, be sure to understand the code after you have completed the project. Refactor it. Change the UI, colors, the entire theme. Create a clone of the project you just did, but do it from scratch. This is how you can retain the information you were given and actually learn. If you are not already doing this, I promise you will gain some serious traction. And before you know it, you're not only going to build the same project from that tutorial, you're going to build it better.


Take Breaks 🧘

A banner showcasing an the word relax in big letters and a person walking their dog

"The moment you start to slide, you're shoveling against the tide," Marty Lobdell at Pierce College, Washington State.

Taking breaks while studying in crucial for effective learning and time management. You may not think hitting the pause button is efficient time management, but hear me out. For the average person, even trying to study for any amount of time over 1 hour, is not ideal. There are studies that prove the most retention in adults is within a sweet spot of 30 minutes. So, if you have 3 hours worth of studying, it's worth it for your to take 3 breaks in that time. Breaks can be short, and should be. Take 5 minutes doing anything that you enjoy. That can be yoga, reading a book, video games, walking the dog, anything that clears your mind and you have fun doing. After your 5 minutes, you'll be next to maximum efficiency during your next 30 minutes of studying. So rather than a non efficient 3 straight hours of studying, you can break the session down into 30 minute increments, which also sounds more approachable and doable, especially if you're continuing this study cycle for a long period of time. So to circle back to time management, I'd say 2 hours and 45 minutes of efficient learning is a better use of time than 3 straight hours of sluggish studying. And of course this can be directly applied to coding as well. Whether you're studying web development concepts, or coding a project, taking breaks is key to enjoying the process and making it a smoother one.

To get a better understanding of this concept, heres a clip of Marty Lobdell explaining this study technique.


The Pomodoro Technique πŸ…

A banner showcasing the world pomodoro with a tomato and an alarm clock

The Pomodoro Technique is global phenomenon and theres a good reason for it. Every illustration of the Pomodoro technique uses Tomatoes πŸ… Just kidding.. but not really. The technique was invented by Francesco Cirillo during his time as a University student in Italy, and Pomodoro is basically tomato in Italian. Now ya know D:

This study method essentially further empowers our previous tip. It maximizes efficient studying or work, by **incorporating breaks, but takes it even further. So how does it work?**

  1. Set your goal or task at hand
  2. Set your timer for 20-25 minutes
  3. Study or work until your timer goes off
  4. Take a 5 minute break doing something you enjoy

Steps 1 - 4 is one Pomodoro. On your fifth Pomodoro, you increase your break to 15-30 minutes. You then repeat this cycle until you are done. The longer hours you work or study, the more efficient you can become.

This technique has been widely adopted by companies and organizations all across the world. Especially used by software companies for maximizing coding efficiency, especially popular for pair programming. If you haven't already, I say give it a shot. πŸ‘

https://pomofocus.io/


Build The Right Projects πŸ’»

A banner showcasing a person desk with thought bubbles on relevant project ideas

As you're starting out, there are a lot of projects tossed in your direction. Especially if you frequent Youtube as a learning resource. "The top projects for beginners," or "The best Projects to get a job." Some of these may have some truth to them. However, it's all about focus and efficiency. Build a project you are interested in. Do you have a hobby other than coding? Maybe it's music, photography, skateboarding..? If it's music, build a website that allows users to upload tracks or clips of their work. If you enjoy photography, go crazy and build a beautiful, big and bold photo gallery showcasing all your artwork. Take it a step further, and add a database. Or even authentication to allow others to use the site too. Building a project you are interested in, from scratch, is simply enjoyable. Every aspect of it is yours. Even if you are inspired by something done already. You'll learn so much along the way as well. Should I use Bootstrap, Foundation, or SCSS? Should I use this package, or this animation library. You'll dive into documentation, you'll learn about the software at a deeper level, and will learn to grow an appreciation for great documentation. You'll start to favor some technologies over others because you now understand them more. The whole process of building something from scratch that's your idea, sort of turns into self-discovery. You'll learn a ton about yourself. Before you know it, you'll have an entire tech stack in your go to toolbox, and your ability to focus on meaningful projects will catapult you into being a more confident developer and that's just the beginning of what's to come. πŸ”₯


Conclusion πŸ‘

That's it for my top tips on how to stay focused as a self taught Frontend Web Developer. Wherever you are in your web dev journey, I hope these tips can aide you to stay focused, and ignore the doubts and any hurdles you may face along the way. I'm also along for the ride, and as many hardships as a rich and dynamic field in tech can bring about, Web Development has such a great community, and it's the very reason why I'm attempting my first blog post. I have seen so many helping hands, and I want to be a part of it. I have all the confidence in the world, if you ask a fellow developer for assistance, you shall get it.

Stay focused, I hear the reward is worth it 🀘


Wanna say πŸ‘‹ Hi!?

Find me on twitter

Discussion (56)

Collapse
jonrandy profile image
Jon Randy • Edited

If you're having trouble staying focused or sticking at it, you probably shouldn't be doing it. It should be enjoyable, interesting, and something you want to do. If you don't feel this way, why bother?

Collapse
iamprogramming profile image
I-Am-Programming • Edited

This is a false fact. Even when you enjoy it, sometimes it can get frustrating. Some people have trouble focusing. And it has nothing to do with "what they enjoy". Sometimes when programming stresses you out, you should take a break.

Collapse
hyggedev profile image
Chris Hansen Author

Agreed @iamprogramming !! Sometimes taking a step back to recalibrate is healthy, and even efficient. You can absolutely still be motivated while doing so. Thanks for sharing πŸ‘

Collapse
brianbadway profile image
brianbadway(he/his)

I agree. It is frustrating at first but If you gave up on everything that was frustrating; you'd probably accomplish very little in life.

Collapse
hyggedev profile image
Chris Hansen Author

My aim is to help boost a beginners confidence, while also providing some insightful tips πŸ‘Œ

As much as I appreciate your thought on this, I can think of some worldly renown people, who at some point faced road blocks.

You can love what you do, and have a passion for it, but taking on a new career or hobby can have it's obstacles.

I'm sure passionate entrepreneurs, artists, athletes, software engineers, web developers, etc, have all faced similar problems, or at least eventually. How about an author suffering from writers block?

Learning web development, especially on the self teaching path, is daunting. There's no one to watch over your shoulder, grading your work, or gauging your progress. The tech moves fast, and sometimes it can feel like your chasing. I love it, I aim to learn every day, and to apply what I learn. However self doubt can sometimes hijack your headspace. If these tips can help even one beginner developer stop debating on what framework to learn, or escape tutorial hell, I'm stoked 🀘

Collapse
jonrandy profile image
Jon Randy

I don't think it's daunting at all - and not having someone looking over your shoulder is a plus! You're free to make mistakes, learn the way you want to, and follow the paths that interest you instead of the ones you're told you should be following. The whole thing should be an adventure - a voyage of discovery driven by curiosity, interest and excitement.

I'm a 100% self taught programmer and have no formal qualifications. I started programming at the age of 7 back in 1983 and have always found it interesting and sought to teach myself in my own way and at my own pace. Any 'roadblocks' are never roadblocks at all if you have the right mindset - just more challenges that will help you improve

Thread Thread
kilcodes profile image
KILowrey

We can't all be neurotypical, Jon.
It's great that you found a path and strategy that works for you. But you aren't a blueprint. Some people have anxiety, ADHD, etc. that makes it hard to start or stay focused. I don't really see how you're initial comment or this one is helpful to anyone. Remember, THINK before you speak :)

Collapse
dev8877 profile image
Dev8877 • Edited

That's an extremely narrow mindset. I'm currently self teaching. I love it but I get distracted. I like riding and working on my bike, I like watching interesting shows, I work 12+ hours a day and have kids and a million other hobbies. Yes I'm trying to build my career but I also keep making mistakes that sidetrack me and I lose interest because I'm not actually LEARNING anything.. just kinda watching or reading. So I take myself back to where I started and I find that almost boring because I already know it but I know it's not concrete yet.

I don't wanna miss anything and I'm not immature enough to believe I will remember it all but like this article says, I WILL master the basics, problem is sometimes the basics can become repetitive and feel boring while learning them. It's when I put them into practice is when I feel my passion burn again.

I'm not trying to jump down your throat, but to someone coming to this article looking for some sort of validation to pursue their career in development that sees this it could detour them away from wanting to do it because they saw an experienced developer say "if you don't love it all the time then it's not for you"...

Collapse
tsimpson profile image
Travis Simpson

If I were to take your advice and said "why bother" any time I struggle to stay focused and stick to it, I would have never pushed my own comfort levels and pushed for better careers, or maintained any sort of job, or finished any school, or learned any new hobby, or wrote any blog post, or travelled, or met great people, or have done anything outside of wake up, have coffee, play a video game and go to sleep.

I would venture to say this is quite in line with the toxic mentality of the need to be obsessed with what you do. I struggle to focus in various areas of my life. I'm not self-diagnosing any particular reason why, and have not gone to a doctor to understand why yet, but even things I truly enjoy and love doing come with their distractions. Motivation and interest are fleeting for many. Most aren't at a place to live off doing what they want to do. Software development, for some, is just another tool to get a job done, and is a solid skill to keep in your belt. I'm happy for you never having had to face the struggle of staying focused or staying on track, but as in the developer world of "It works on my machine so IDK why prod is broken. Must be your machine" mental fallacy, "I enjoy it and have no trouble focusing, so it should be the same for you" doesn't fly. Congratulations on being an outlier that I truly wish I could be a part of.

Collapse
kartikeyrai profile image
Kartikey Rai

You still wanna make sure if you're unfocused by laziness or because you hate it

Collapse
hyggedev profile image
Chris Hansen Author

Absolutely. A lot of us self taught developers have jobs or other side gigs going on while trying to learn web development. So I wouldn't say have difficulty focusing means a lack of motivation. Being able to focus and stay on track, is what will make you a better web developer πŸ‘Œ

Collapse
jonrandy profile image
Jon Randy

Laziness would imply that doing it is something you feel you have to do, and you would rather be doing something else

Collapse
tubrogoth profile image
Turbo Goth

Why bother? Because it pays my bills. I wouldn't be making websites just for fun, but it pays well so I want to be good at it.
I think our industry puts too much emphasis on 'passion'.

Collapse
emekaorji profile image
EmekaOrji

Thanks @hyggedev This is needed. And yes @jonrandy you could love something so much and yet have trouble staying focused. There are upcoming Devs out there who have this problem because of how busy today's world is, and because you didn't not face this problem while coming up doesn't actually mean it doesn't exist.

I love webdev, but the workload of Schooling and my current job almost give me little to no time to code, develop my skills,

So this article is mainly a time management resource and it is highly needed!

Collapse
hyggedev profile image
Chris Hansen Author

Hey there @emekaorji ! I totally agree πŸ‘ Time managing our lives to learn web development on the self-teaching path is no easy task. We need to determine what to learn with the time we have set aside. And your'e still in school while working!? Mad respect D: Thanks your positive feedback! It means a ton ✌️

Collapse
mitaosi profile image
Qing(Jim) Lin

" Create a clone of the project you just did, but do it from scratch. " Is it ok to keep glencing at the previous project while build my first new project? For instance, to check out the architecture of components, re-use and re-build some components, functions from the previous project.

Collapse
hyggedev profile image
Chris Hansen Author

Hey thanks for dropping by! πŸ‘ In my opinion, yes! I have on numerous occasions brought up a previous project on Vim and to get familiar with the file structure and design patterns. I have even brought up projects from a long time ago wether mine or from another resource, because it had a great helper function that can easily be reused. So I definitely I don't see any harm in that. At the very least, you are no longer concentrating on the tutorial while simultaneously trying to keep up. Now you have the time to break down the code in chunks, write the code and try your best to understand what is happening and why. You shouldn't force yourself to be "stuck." If you can't figure something out, I say take a look. If you are not in school attempting a computer science degree, the web and it's free and paid resources is your learning material after all. Just be careful with the never ending tutorials. But it seems like you are already on the right track D: #happycoding ✌️

Collapse
mitaosi profile image
Qing(Jim) Lin

Thanks for your reply,Chris! I am not new to programming, previously i just finished my CS degree and i am the type of student who family with theory、Algorithm and Data-Structure but lacking of project experience, In another words: I used to build some functions, single component/class/file,but have little to zero idea about how to put them together when start a new project from scratch. This is why i need to keep looking on the project i "built" along with these tutorials or some open source projects. By looking at them,i could figure out what kind of components and functions consist of a system.
My concern was: Should i build everything on my own from scratch, without "mocking" or "borrowing" these existing code. you answered my question well, thanks a lot! :-)

Collapse
juniorlukusa profile image
Junior Lukusa

Thank you so much for sharing all this. I'm pretty sure that, I'll gain efficiency by following the promodoro technique.

I used to stay watching videos and taking note for about 3h every night. And sometime, I wanted to give up because I felt like I was not really understanding, as if I was just keeping a written version of what I was watching.

Now I know what to do. Thank a lot for all.

Collapse
hyggedev profile image
Chris Hansen Author

I really appreciate you sharing that with me! Everyone is in a unique situation in their web dev learning journey. I'm glad platforms like this exist for us developers to share our experiences! ✌️

Collapse
mightytechno profile image
Mighty

Another thing keep the phone away while working πŸ˜„

Collapse
hyggedev profile image
Chris Hansen Author

Bonus tip! No doubt πŸ’―πŸ”₯

Collapse
latenightsnacc profile image
latenightsnacc

Thank you for this. Google recommended this at the right time because I really thought it was just me experiencing all these while everyone else was just focused and growing quickly. I've never interacted with any post in my life as much as I did with this one πŸ˜† it's just so relatable. Thank you author

Collapse
hyggedev profile image
Chris Hansen Author

Thank you for sharing this with me! Honestly, my goal was to help anyone one even in the slightest. So I'm very appreciative that I have gotten so much feedback. This post has single handedly motivated me to keep writing. I just hope I can continue to write, share my experiences and motivate devs entering the space! Thanks again, happy coding! ✌️

Collapse
nazarsecrets profile image
SVR

You got me at "get away from the tutorial hell". It is real. It's a spiral staircase and I can't help but fall in that loop. This was helpful and relatable! Thank you.

Collapse
hyggedev profile image
Chris Hansen Author

πŸ‘‹ We've all been there! It's when we learn to avoid that trap does the real learning begin! πŸ’―πŸ”₯✌️

Collapse
sakshitannir profile image
Sakshi Tannirwar

I am fresher and also started learning web development .
For interview what I have to do as frontend developer .
Can I prepare it by myself or can I go through with any coaching institute of latest technology

Collapse
hyggedev profile image
Chris Hansen Author

You could definitely practice. One recourse is safely recommend is freecodecamp.com. They have a section mean to prepare you for I interviews! Also, if you have a portfolio, and applied to a job with said portfolio, never list any technical skills you are not willing to discuss in detail. πŸ‘‹βœŒοΈ

Collapse
keeran_raaj profile image
Raj Kiran Chaudhary

Great suggestions. I have found myself applying Pomodoro technique a lot and found my productivity has transcended. Thanks a lot

Collapse
hyggedev profile image
Chris Hansen Author

Oh for sure! Same here. It helps me learn difficult topics more effectively as well. I tried using a Pomodoro clock while learning Redux, and it helped me a ton! Thanks for sharing your thoughts βœŒοΈπŸ™Œ

Collapse
kylegichez profile image
Gichure Maina

Thankyou so much for the awakening information for maximum productivity.

Collapse
hyggedev profile image
Chris Hansen Author

Thank you! πŸ‘ The Pomodoro technique alone has made me so much more efficient!

Collapse
kenethsimon profile image
kennyLFC

Earn the basics , build couple self projects then engage to real world projects find even a junior role to start with

Collapse
hyggedev profile image
Chris Hansen Author

Absolutely πŸ’― That is the ideal approach. I am just now begining to share my projects with the world, not just a link to my portfolio!

Collapse
devdgehog profile image
devdgehog • Edited

I'll try the Pomodoro Technique. With remote work I developed the wrong habit of not taking breaks at all. Thanks for sharing the idea.

Collapse
hyggedev profile image
Chris Hansen Author

Oh yeah, you're definitely in a prime situation to test it out! I really hope it benefits your new work-from-home lifestyle. ✌️

Collapse
vono1412 profile image
VoNo1412

I can do it! tks

Collapse
hyggedev profile image
Chris Hansen Author

You definitely can πŸ”₯πŸ’―βœŒοΈ

Collapse
brianbadway profile image
brianbadway(he/his)

Very true! I wish I read this a year ago. Thanks for this piece!

Collapse
hyggedev profile image
Chris Hansen Author

Thanks for dropping by and sharing!! Hope it offered somethin` πŸ’―

Collapse
opeolluwa profile image
ADEOYE ADEFEMI OPEOLUWA

thank uou

Collapse
hyggedev profile image
Chris Hansen Author

Thank you! And thanks for dropping by ✌️

Collapse
meo3w profile image
Phil Hasenkamp

Great advice! Thank you for sharing!

Collapse
hyggedev profile image
Chris Hansen Author

Glad to πŸ’― I'm so stoked! Thanks for reading ✌️

Collapse
franklyndotcom profile image
Franklyn-dotcom

I love this! thanks for sharing this and you also gave me an idea of building a new project :).

Collapse
hyggedev profile image
Chris Hansen Author

Thank you for sharing! πŸ™Œ I'm stoked I was able to spark some inspiration! πŸ’‘πŸ’―

Collapse
wizzydesign profile image
wizzy-design

Thanks alot.... Really great points

Collapse
hyggedev profile image
Chris Hansen Author

🀘 Thank you for stopping by! ✌️

Collapse
rohitgour03 profile image
Rohit gour

Thanks, these tips are quite useful. πŸ˜ƒπŸš€

Collapse
hyggedev profile image
Chris Hansen Author

Glad I can help even in the slightest! ✌️

Collapse
chrmc7 profile image
Chris β˜•οΈ

These are some very useful tips. Thank you for sharing! I definitely agree that building projects you are interested in is much more rewarding. πŸ˜ƒ

Collapse
hyggedev profile image
Chris Hansen Author

πŸ‘‹ For sure, glad to hear it! For example, I sometimes like to get inspired by great design on sites like Dribble, then I'll completely change the theme of it and gear it more towards some that interests me. I'll challenge myself to use my preferred framework, React in this case, to code it from scratch. You dig deep and learn even more D: Those are usually the projects I am the most thorough on too! πŸ‘

Collapse
tarynmcmillan profile image
Taryn McMillan

This is a great article! I'm an overthinker and sometimes that can impede my focus. So these tips are very helpful. :)

Collapse
hyggedev profile image
Chris Hansen Author

Thank you 🀘 I can absolutely relate! We gotta kick that to the curb ✌️

Collapse
riddvanjs profile image
riddvanjs

Great article! I'm a self taught developer and I was in tutorial hell and I managed to get out it. Many things you say I can relate too!

Collapse
hyggedev profile image
Chris Hansen Author

Thanks for sharing! πŸ‘ I'm glad I can relate to so many people! I've gotten such a positive response and I'm stoked to keep sharing my thoughts and my learning journey as well. #happycoding ✌️