Becoming a Full-Stack Web developer in 7 Months

Becoming a Full-Stack Web developer in 7 Months
0

Hello everybody,
I want to introduce myself and what this is all about: I am Markus, 31 years old and work in a media agengy in a very niche job. I develop Apps with the programming language R and the “Shiny” Web-Framework (which works without knowing HTML/CSS or JS). There are only a few persons who do this (despite I really love it, it´s an awesome framework, https://shiny.rstudio.com) .In Data Science most people work with Python and build more models insteads of Tools and Dashboards.

So I am less skilled than data scientists with data and less skilled than web developers with UI´s and backends. I can not really compare my skills to anybody, since my boss does something totally different and I don´t have a colleague who is a developer. Something I really think I suck at what I am doing and that I am just an impostor. This sometimes really frightens me and I am afraid not to be employable if they would not need me any more. Job openings for R shiny are very rare.

I ended up with a worthless degree and worked in a mind numbing market researcher job after 9 month of searching for a job for two years, which was a horrible experience. I swear to myself that this will never happen again and this is why I want to expand my skills and be a “real” developer who is capable or writing beautiful and functional apps with JS or Python too. My dream would be to be skilled enough to do some freelance work as a side-hustle :-).

I tried many different ressources and thought about taking the “Team-Treehouse Techdegree”, but for someone who is already familiar with the basics of web development, it´s much harder to get a curriculum which suits my needs. In the last 2 weeks on vacation I created a curriculum and plan for me, how I want to become a “real” Full-Stack Developer in 7 months.
Use Udemy courses and w3schools and FreecodeCamp. I have picked some courses.

1. Advanced CSS and Sass: Flexbox, Grid, Animations and More! - This course shall help me to create the first real websites.

2. The Modern JavaScript Bootcamp. Getting to know JS (I already know the basics of JS and since I´m familiar with R a second programming language should be easier to learn in depth)
3. The Complete React Developer Course

4. The Complete Node.js Developer Course.

2-4 will help me to learn JS, Frontend and Backend. R Shiny also allows to use Components from the React Ecosystem, so it might be very useful to learn this.
Mistakes I made in the past when learning to code and what I will do about this:

  1. Watching passively or just coding along - welcome to the tutorial hell. I will build my own stuff with the topics I learn and share it on Codepen.

  2. Rushing through lectures and forget everything: Not repeating and applying the stuff I learned. I read a lot about “Metalearning” (in the Book “Ultralearning”) and will try some of the techniques I leared. I will repeat the things I learned the next day and some days later (Spaced Repetion), apply then and use a technique called “Feynman-technique”. I will explain everything I learn to see if I really understood the topic - I gonna create a small YouTube Video to do this.

  3. No learning habit. The book “Atomic habit” was a gamechanger for me. I understand now how to create habits and this is why I code 7 days a week, besides business trips or vacations. I will learn Mo-Fr for 1 hour and on Weekend 5-10 hours overall, which sums up to 10-15 hours per weak.
    I already have some Full Stack ideas which I plan to build for my portfolio: A Stock Prediction App, An App with the Spotify App and an App which allows to type in stuff in your fridge and get suggestions for healthly meals. But to be able to do this, I have to make my homework :-).

If you have any tips, suggestions or just a friendly comment, I appeciate everything!

9 Likes

Congratulations) can you tell me where you gained practical development experience, on which projects?
How did you study Udemi courses? Did you rewrite the code after each lesson?

Nothing really done to say congratulation yet, this is just the introduction ;-). My first App was an app to automate a statistical analysis, which took a co-worker several hours to build.
Previously I just followed along the tutorials ONCE, never did some own creative work.

I think that’s a solid plan if you follow along with it. It will most likely help you to achieve your goals. Just read through the success stories of others here on FCC as well. I am in your shoes as well. Among the most useful resources you need in order to learn front-end development are:

The latter may be intimidating at first because it’s not beginner-friendly but once you’re used to it, it’s a very useful site. Your focus shouldn’t be reputation points but learning.

It’s also important to build stuff rather than mindlessly following through a tutorial. It’s the only way you can develop problem solving skills and showcase your skills to potential employers.

Cheers,
Nibble

4 Likes

Day 1 of my journey - digged into CSS Animations, Transitions, relative and absolute positioning.

What I build today:
https://codepen.io/Data-Mastery/pen/eYObJMd

Feedback welcome!

My Video: Done for me (Feynman technique) to learn and also overcome my cringeness with speaking on video/public.

Next week I will work on Flexbox and also try to make rotating cards with some other CSS stylings.

Day 2 of my journey - repetition of CSS properties to create a flip-card :slightly_smiling_face:

https://codepen.io/Data-Mastery/pen/LYPqRQL

Work + Study is hard, creating the learning + building habit is the key :slight_smile:

Day 3 of my journey - Setup of the trillo project and some own stuff:

https://codepen.io/Data-Mastery/pen/ZEzPzBp

Animated Bar with pseudo-element and transitions :-). Still lack the imagination of how to do it when I see it, but I see some improvement.

Maybe add some more information? Did you use a tutorial? Where do you get your source material if you get stuck? What was the inspiration for your design? How many hours did this cost you? What where your struggles and how did you sollute it? If this is a diary then try taking your readers into your story otherwise it be called a militarian log XD

1 Like

Yes, sorry! I do my YouTube Videos for this, because it helps to articulate my thoughts by words and is easier than writing tons of words when I´m anyway close to going to bed :-). Thanks for your comment! Unfortunately I can only do longer posts and videos on weekend, because I don´t have time for more than 1-1,5h every evening and setting up the environment and get into a focussed state takes it´s time after 8 hours+ work :frowning:

1 Like

Day4: https://youtu.be/E7n_cjUxLdw

So based on KittyKora´s suggestion: A topic for today: What´s your best plan to learn programming when you work full time? I was very tired and did not have my most productive session today. I got home at 6pm, ate with my girlfriend, spended some time together and at 7:10pm I turned to programming. Before that I took a COLD shower to wake me up. But it always helps for 10-15 minutes before fatigue sets in. Any tips and tricks?

1 Like


Yes stronger and more coffee also welcome to programming. :3

1 Like

Thank you for the funny image, but drinking coffee late is of course no option. Today I felt much better, maybe it´s easier to build something and focus instread of coding along a tutorial.

Today was day 5:
https://codepen.io/Data-Mastery/pen/qBWwjpL

My Project I worked on. The following question arised:

  1. Why does the <ul> not take the same height as the image element. I throught flex items would always stretch. I had to use padding, which worked, but might not be a good solution.
  2. When I load a website, items which have a transition start to fly around on the website when they are styled. I´ve seen this also in courses and nobody seems to care of have said anything about it. Is it me and my browser?

Hi @Data-Mastery,

I just want to say, you are making great progress. You’re already applying scss! And to answer your question, I see that you set a height: 50px; to your header__logo, which contains your image. As for the flex items, you’ll see that your ul (header__tabs) does not have a height specified, and, by default, its height is set to auto. If the height is set to auto, the browser will automatically calculate the height of your ul based on its contents. Try setting your header__tabs's height to 50px and change your li’s padding to padding: 0 2rem; and add line-height: 50px; to your li.

For your second question, do you have a website/course that you can link so we can see if it happens on our end?

1 Like

Thank you very much. But I hope you know that I did not start out as a total newbie :-).Thank you for your tip. I used that.

Day 6 of my challenge
https://codepen.io/Data-Mastery/pen/qBWwjpL

Not near perfect, but I get better at using flexbox as still remember stuff I always forgot like how to make transitions.
One thing in the codepen: When I scale, why do i see the borders of the image? I set the overflow to hidden :-(.

Video is more cringe than normal, but that´s part of the process. I´m pretty much done for today. I coded for 1,5 hours, but the week was quite long.

Day 8 of my challenge:

Topic today is Sacrefice: How much are you guys willing to sacrefice for your goals? Yesterday I only set up SASS and was away from the computer the whole day. Reason was I visited my 99 year old grandpa in the retirement home and went to the Oktoberfest afterwards (only had 1 beer in 6 hours so I was able to get up at 6:15am today without a hangover). To be honest, I enjoyed both acitvities and set the priority above coding. Can I be ever have success with such a mindset? Or does it prevent me from getting an isolated nerd who burns out some day? This is also true for sports… I prioritize my health above almost everything when I get up for the gym at 5am. I could also do some coding before work, but i don´t. So, what’s your approach? What do you sacrifice? Are only activities like watching 3 hours TV bad for success or other acitvities too?

This is my project I build today:

https://codepen.io/Data-Mastery/pen/oNvRdGv

I see some progress here, thinking in HTML/CSS gets more natural.

1 Like

Have to realize that sacrifice is giving up something valued for something else that is higher valued. Therefore it’s linked to your priorities, and it doesn’t really have to be a dirty word. Sacrificing a day or few hours of coding to see an aging relative or have some fun, just means you value those things higher than coding. I don’t think that’s a bad thing.

Most often around here, I think, people practice coding in order to reach some professional/financial or personal goals. For you, you have put a time limit on accomplishing that. As well, you bring up this idea of success. Can you be successful? Well, what does success mean to you? In the context of this thread, which is perused by largely strangers on the internet, it’s most obviously “becoming a full-stack web developer in 7 months”. But in terms of your life, I think “success” can be much broader a concept.

E.g. I’m happy I’m a developer, I feel I succeeded in that initial goal, I still have other goals that I hope to succeed on with regards to my professional life. But I evaluate my goals every month (at least) in the context of personal, professional, and financial goals.

From the sound of it, you also have professional goals (e.g. become a developer being one of them), as well as personal goals, then you can sacrifice one goal for another (Oktoberfest instead of coding), and still succeed.

Heck, my school always had posters saying “success is getting up one more time than you fell down,” so you could say success is even just trying to reach a goal. So if you’re trying to become a developer in 7 months, trying to spend time with family, and trying to have fun and enjoy life, then sounds like you’re succeeding.

1 Like

Thank you for your opinion. I like the idea of evaluating multiple goals you have on a monthly basis. To be honest, I don´t feel like falling and falling, just progressing slower than I might be possible. At the moment I listen to an audio book called “grit” which emphasizes that showing up each day and making work a habit is the most important step to succeed in a long term goal.

My video today:

I want to share this codepen with you. I have never seen something like this. This is absolutely insane :open_mouth:. This really motivates me to get better and better (I love escape room games).
https://codepen.io/KristopherVanSant/pen/dEZZEN

I started to work on CSS Grid a little bit, but to be honest, much of the stuff Jonas showed in his course did not really stick yet and I would not know when exactly to use it. I plan to build a simple dashboard till sunday with Flexbox and Grid where I use grid to align the visualisations.

https://learncssgrid.com

How well did you guys learn the grid? Maybe it takes some time to learn the correct reasons to do so.

My current job uses almost 100% premade components e.g. Bulma, Bootstap, etc.

But this is for an enterprise website, so cookie cutter design is ok. For more demanding frontends, grid and flexbox and more css mastery is probably important.

2 Likes

I was 600km in the north to visit my new born nephew. No programming during these days -
Thank you for sharing this, good to hear that from a professional that 100% pure CSS knowledge might not be required. Today I built another small website and I get to realize I don´t have to master everything in CSS, just because I don´t need anything to create the website. Typical 80/20 rule.

In the next weeks I will work on my JavaScript skills.

https://codepen.io/Data-Mastery/pen/yLLLRmq (Feedback is very welcome!)

Everything explained in my daily (yeah, there will be videos everyday from tommorow on again, since it´s easier to build a habit on programming) video :-).

1 Like