DEV Community

Cover image for All I can learn in a month...
André Duarte
André Duarte

Posted on • Updated on

All I can learn in a month...

#webdev #codenewbie #help

Help me to plan a 30 days of intense learning experience in front end skills

I'll be on staycation next month, and I'm planning study as much as possible this month. I'm 40 years old, and I decided to move on my career to development.

I currently work in a bank, I have some knowledge of HTML, CSS and (superficial) Javascript. I just fished my Responsive Web Design Certification on freeCodeCamp.

I confess I'm a bit lost, just realized how much I have to learn. I can't waste this precious time. So I want to be well prepared to study the entire month focused on what is worthy.

So please give me some tips, in what should I focused, how can I concetrate on a quick improvement of my skills!!!

Tips

tomvalorsa profile image Tom Valorsa twitter github

OK, well first up I think you will get much more out of your month of study if you narrow the scope of what you look at. Things like Docker/PWA/YAML are all interesting but not essential for frontend, so I’d focus on the fundamentals (HTML/CSS/JS) and maybe look at one framework. Some ideas:

HTML/CSS

  • Pick some simple layouts from sites that you like and try to build them with plain HTML and CSS
    • Look for more complex examples as you get more confident and try to build those too
    • You could even design some layouts yourself and try to build them
    • This will help you get a feel for the building blocks you can use when building UI, which will apply to any framework you use in future
  • Get a good understanding of the position and display properties in CSS
  • Experiment with the different ways you can select elements (and others around them) with CSS selectors
  • Read up on semantic HTML so you can get a feel for the tags you can use and when they make sense

JS


  • Find a decent overall JS tutorial in one place and work through it from start to finish
    • I used codecademy years ago but not sure what else is available now
  • Maybe work through some puzzles/problems on sites like codewars, and look at other people’s solutions, to get a better feel for how you can solve problems in different ways

Framework

Pick a framework/library to experiment with to see how people build larger apps (i.e. React/Angular/Vue).
I’m biased but I’d suggest React, as it’s very easy to get going with and you only need to master a few concepts to be productive with it. This will help you to understand the benefits that a framework can provide you.
Angular is good too but in my experience the learning curve is a bit steeper and that might not fit with your timeframe. I’ve dabbled with Vue as well but can’t really speak to that, so will let someone else chime in.

MDN is your new best friend 🎉 If you want to understand more about a CSS property, or a JS function etc just Google "MDN blah" and you should be able to find detailed info.

Good luck!

Top comments (4)

Collapse
 
tomvalorsa profile image
Tom Valorsa •

What are your goals for this month? What kind of position do you want to be in at the end?

Collapse
 
duarch profile image
André Duarte •

Goals:

  1. Be confident using HTML, CSS and JavaScript
  2. Understand concepts I don't know well (Docker, PWA, Frameworks, webpack, yaml, etc)

Position : In condition of contribute in a real project

Collapse
 
tomvalorsa profile image
Tom Valorsa •

OK, well first up I think you will get much more out of your month of study if you narrow the scope of what you look at. Things like Docker/PWA/YAML are all interesting but not essential for frontend, so I’d focus on the fundamentals (HTML/CSS/JS) and maybe look at one framework. Some ideas:

HTML/CSS

  • Pick some simple layouts from sites that you like and try to build them with plain HTML and CSS
    • Look for more complex examples as you get more confident and try to build those too
    • You could even design some layouts yourself and try to build them
    • This will help you get a feel for the building blocks you can use when building UI, which will apply to any framework you use in future
  • Get a good understanding of the position and display properties in CSS
  • Experiment with the different ways you can select elements (and others around them) with CSS selectors
  • Read up on semantic HTML so you can get a feel for the tags you can use and when they make sense

JS


  • Find a decent overall JS tutorial in one place and work through it from start to finish
    • I used codecademy years ago but not sure what else is available now
  • Maybe work through some puzzles/problems on sites like codewars, and look at other people’s solutions, to get a better feel for how you can solve problems in different ways

Framework

Pick a framework/library to experiment with to see how people build larger apps (i.e. React/Angular/Vue).
I’m biased but I’d suggest React, as it’s very easy to get going with and you only need to master a few concepts to be productive with it. This will help you to understand the benefits that a framework can provide you.
Angular is good too but in my experience the learning curve is a bit steeper and that might not fit with your timeframe. I’ve dabbled with Vue as well but can’t really speak to that, so will let someone else chime in.

MDN is your new best friend 🎉 If you want to understand more about a CSS property, or a JS function etc just Google "MDN blah" and you should be able to find detailed info.

Good luck!

Thread Thread
 
duarch profile image
André Duarte • • Edited

Thank you very much!

I'm sure your tips will help not only me but a lot of folks!

I specially like what you said about

good understanding of the position and display

and

Pick a framework

Ps. Someday we can drink a tea, I drink PGtips everyday!

Read next

manomite profile image

Introducing GIM: Revolutionizing Identity Management with AI and PHP

Adeyeye George -

anmolbaranwal profile image

🚀 21 Tools to take your dev skills to the moon 🌝

Anmol Baranwal -

mjgs profile image

Latest Newsletter: Good Output (Issue #159)

Mark Smith -

fabrikapp profile image

The Evolution of Next.js: A Deep Dive into the Latest Updates Since Version 14.2

Fabrikapp -