CodeNewbie 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
Self-taught Web Dev focusing on all things Frontend & UI Design.
・7 min read

Hello CodeNewbies !!

This is a repost from my original post on Dev. I have just discovered CodeNewbies, and I can't think of a better place to share. #happycoding


Staying focused is one of the hardest tasks when perusing 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 that 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 (0)