Summary of my first year of learning web development. Roadmap, projects and tips for newbies

Read this article, if you plan to become a front-end web developer in 2022. You can use my advice based on 1-year of non-commercial experience and follow my roadmap, which contains links to free sources.

My very first mistake and failure at the beginning. Do not choose a programming language, choose a path!

I started learning programming one year ago (you can read about my motivation and reasons to start learning in previous article). But, actually, I made one extra try earlier, 1,5 year ago, when I spent few weeks trying to learn Python. Why did I choose Python? Because I read that it's a best programming language and especially the best for newbies...

And maybe that is the true, but I was bored building small console apps... It means that the result of the app ran was some text or calculations printed in console - no visual elements, no interface. Now I know, that you can do all of these things with Python, but not at the beginner level.

So I gave up with Python and console apps and went back to my other creative activities (blog, social media accounts, music composing). After a few months I tried to figure out, how to plan my programming development and how to choose a langauge.

Then I read, that I need to choose a path, not a language. A programming language is only a tool. So among the available paths I chose a front-end development, because it allows you to create simple web pages and user interfaces practically immediately after learning a few things!

Besides I understood, that I want to create web pages and web applications, so this path was the best option to manage this goal. So then, when I knew exactly what I want to do and achieve, I could find out, what languages and technologies I need to master.

HTML & CSS

All front-end developers start from HTML & CSS. These markup languages are the foundation, the sceleton and skin of web pages. HTML & CSS are not stricly speaking programming languages, so it's a nice thing to start coding in them. No variables, no functions, no loops.

After a few hours of learning you can create simple web page in your browser which contains headers, lists, sections with content, images etc. thank to HTML tags. You would be able to add background & font colors, different fonts, text and items allign, text decoration etc. with a few CSS lines.

Sounds great!

Personally, I did these first steps with Khan Academy free online course Intro to HTML/CSS: Making webpages. In addition, I did also this free polish online course.

I'm very grateful to Khan Academy for my programming initiation. I finished all their computer programming courses and I'm sure that I wouldn't be in the place I am now without them.

Javascript (ES5 + processing.js)

JavaScript is a main programming langauge of the web. JS brings interactivity to web pages and applications and plays a role of "muscles" and "brain" in the web page/ app body. Thanks to that you can render different views, collect data from the user, allow him to push buttons, work with database or browser's local storage, run logic & algorithms and do a lot of magical things, like animations, games etc.

I learned basics of JS along with another Khan Academy course - Intro to JS: Drawing & Animation with processing.js & more advanced & complex topics with Advanced JS: Games & Visualizations with processing.js.

That was really fun, because in mentioned courses I learned JavaScript by drawing different things with the code and help of processing.js library. It was very visual, so I loved it (I am a big fan of visula notes and mind maps)! After compliting those courses I built a few simple games (like Old School 2D Racing Game) & animations (like Let It Snow).

HTML + CSS + JS (+ jQuery)

Finally, when I knew basics of these languages, I could combine them & started creating web pages and simple web applications along these courses:

Apps were ugly, but... worked!

Upgrading from JavaScript ES5 to ES6 & from processing.js to p5.js

When I completed all of Khan Academy courses, I found out, that JavaScript (ES5) version they were using is outdated... so I switched to ES6 standard with The Modern JavaScript Tutorial.

The same thing happend with processing.js library, because I found out, that this library will not be updating, so I needed to switch to it's modern version - p5.js with help of official p5.js references:

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners. Using the metaphor of a sketch, p5.js has a full set of drawing functionality.

However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

Then I started using p5 online code editor and it would be impossible without knowledge of modern JS standard (ES6) & p5.js library. i made a lot creative projects and apps in that editor with p5.js: racing game, quiz app, falling snow animation, snake game, simulation of my office's queuing system, math app for children and more.

React

When I felt comfortable in working with Web Holy Trynity (HTML, CSS, JS) and my applications started become more and more complex, I learned the JavaScript framework (library stricly speaking) React.js.

I felt in love in its possibilities. It wasn't easy at the beginning to figure it out and I had a few tries, but I've managed basics of React along these courses:

When I switched to React instead of developing in pure JavaScript/ HTML/ CSS, my apps became larger, more complex, better structured and shiped faster. Now I'm developing my apps thanks to create-react-app in React, so that's how I became a React Developer.

Bootstrap

I became familiar with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, to speed up and simplify my apps styling and responsive web design.

With Bootstrap my pages and apps became standardized, beautiful and looked really fine both on computers and smartphones. I had no need to play or struggle with CSS anymore (of course I used CSS, but rather inline in my components JSX).

When I got Bootstrap 4.6 version, I needed to switch to the newest upcoming version - 5.0...

React Router

I needed a routing for my apps and web pages, but if you are working with front-end and have no back-end background, you need to figure out it somehow. And the tool I needed was React Router!

You can find all necessary information about it here: React Training / React Router

From that moment my apps had dynamically generated links and it was not only convenient (and a standard) for users, but also routes helped me to better organize my apps, its rendering & passing data between components.

Firebase

My apps were really complex at the moment, but I was struggling because of lack of database, so potential users of my apps (including me) could put their data (text content, images etc.) only to browser's local storage.

Thanks to this my previous blog application allowed user to create a new article, save it and it was visible only in that particular users browser. It was nice for excercise purpose, but it wasn't enough for real-world apllications.

So, finally, after experimenting with local storage and fetching I was prepared for real database experience! And Firebase was the savior. I learned how to work with Firebase from official Firebase docs.

And of course, when I figure out, how Firebase 8 works and felt comfortable with that edition, Firebase 9 came out...

Continuous learning

This is common thing in programming world, especially in web development. You need to be prepeared and aware of that new frameworks, updates or new languages can show up any day. It means, that you need to upgrade your apps and your skills constantly or you'll be outdated very soon.

Summary - What You Can Achieve In A Year Thanks To Dedication to the One Thing Only

This year of total dedication to the one thing - learning programming - has resulted in the fact that:

  • starting from a total scratch a year ago, I am able to create and publish full-stack responsive interactive web application or web page with users authentication and database integration & done a lot of open source projects, such as among others:
    • Blogging Platform App, where you can run your blog/s for free & edit articles with Markdown Editor,
    • Linky Notes, the app that allows you to create tagged notes & easilly filter them by tags,
    • Mind Maps App, the app that allows you to create mind maps online,
  • I proved myself intellectually, creatively and managed to implement myself in a completely new field through self-learning along available free online sources,
  • I gained an additional profession - JavaScript / React developer - and broadened my horizons tremendously,
  • I am proud of myself and the man that I have became during this year.

I hope that my story will inspire you and encourage you to start learn programming or... start learning anything else this year. Now you can see, how much can be done and learned in one year if you are devoted to the one thing / topic only, especially if it's a wide complex field.

I were coding at least for 1000 hours during this year in my speare time after a day full-time job and that was a key:

  • focus on the one thing - learning & apply new knowledge to your projects step by step (in my case)
  • reject all unnecessary unsustainable things and activities, such as:
    • pointless surfing on the Internet or social media,
    • watching news, movies or series,
    • hanging out with people with whom there is nothing to talk about,
    • but also engaging in projects that do not get anywhere or do not produce the results we expect...

If you'll decide to dive into web development in 2022, you can follow my roadmap!

Happy Coding (or whatever else you will be doing) in 2022!