Introduction
I was looking for an episode from Changelog to listen to while exercising, and I found this episode, which was discussing Reflections on 10,000 Hours of Programming with its author, Matt Richard.
The title was appealing because I've listened to the statement "The key to achieving world-class expertise in any skill, is to a large extent, a matter of practicing the correct way, for a total of around 10,000 hours — Malcolm Gladwell in Outliers" before, and I was working towards that.
The article was cool, and I wanted to write something like it, but talking about the story itself more than the tips learned from it.
I've been keeping journals since 29th January 2021, so this article will be a summary of the journals I've taken.
The Journey
Prehistory
I called this section prehistory because I will talk about the things that I've done before starting to keep journals, probably my first 6 months.
I started to learn coding on 19th June 2020, by studying Learn HTML5 and CSS3 From Scratch - Full Course by freeCodeCamp.
After finishing that course I remember trying to copy J J Perm because I was obsessed with Rubix cubes.
Of course, I didn't know my limits, and didn't manage to write a single line of code!
I remember that I was disappointed about that.
To be honest, I didn't really understand CSS after finishing this course, because CSS is the hardest skill to learn in frontend, and It's a soft-skill, but I ignored that fact and assumed that I learned it.
After that, I wanted to learn javascript, because when I inspected J Perm, I saw some js code, so I blamed not being able to copy it for not knowing javascript 😀.
I bought The Complete JavaScript Course 2021: From Zero to Expert!, which is the best-selling javascript course in Udemy and started to study it.
I bought the old version of the course which was explaining es5.
In the 6th section of course which was a budge project, the design was cool so I decided to copy the app, I mean, It was much simpler than J Perm.
I tried doing so, but I couldn't 😀, After that I realized that I don't know anything abou CSS.
After finishing this section a new version of the course (which explains es6) was released, and I got it for free, but I was very sad about it because I had to rewatch the course again.
Of course, I didn't watch the first two sections which were talking about the fundamentals of es6 and jumped to section 8 which was talking about how javascript works behind the scense.
After finishing this section I remember comming across something called problem solving, and I thought how it would be amazing If I were good at solving problems 🤓.
I found a website called edabit and started to solve any problem I encounter.
When I was solving edabit problems, I noticed that people use a strange syntax and some functions that I don't know (which are array methods: map, filter, forEach, and reduce).
I found a section in the cousre talking about array methods, so I took it and started practicing them.
I've done that until I got 1,920 XP, but unfortunately, the website became paied, and It was very expensive (at least for me, because a live in a developing country).
Btw, You can have a look at my account in edabit at https://edabit.com/user/5mZ2QfmceSQktkXFi.
Although, I found codewars, I thought it was the time to stop problem solving, and focusing on finishing the fundamentals of javascript.
I continued the course until I reached a section talking about advanced DOM, but I skipped it because he was adding some cool effects with the DOM on a beautiful landing page.
I thought that this section wouldn't be helpful for me at the moment, so I decided to skip it.
At the moment, I was using todoist as my Todo list app and thought about how they did implement it, and found that It's (kindof) easy.
I mean, with the things I learned from the course this would be a piece of cake 😼.
But, I started thinking about a dilemma, this is a big app and there's a company behind it, and I started to code from some months, but I ignored that and went to work 🙄.
Recorded history
January
I started to code my own todoist (after thinking about an interesting domain name), and I couldn't do anything.
This is my second great disappointed after not being able to copy J Perm.
At the beginning you always overestimate your skills 😅.
I thought that the reason for not being able to program that app is that my CSS skills are bad.
So, I decided to buy Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas (the instructor of the javascript course).
I would say that this course changed everything for me!
I finished the first 35% of that course.
Also, I created tictactoe and snake games.
I made the snake game myself and I remember it was pretty hard it, it took me a while to make.
February
I started this month by going throw the CSS course until I finished the first 50% which focuses on creating a big project with float layouts, then I decided to start learning git and github (because I thought that my projects started to grow up 🙄).
I thought that float layouts is very hard and I didn't really understand it, so I decided to checkout flexboxes.
I was concerened with using third-party libraries, so I saw some code online which was using import and require.
I tried creating some demo projects and do the same, but It didn't work 🤨, because I didn't know the difference between modules and global code 😐.
I didn't code anything, I just focused on learning this month.
Also, I didn't understand git, I just learned git add and git commit 🙄.
March
I decided to continue the course after spending some time wondering about why neither import nor require works for me.
I learned the fetch API, promises, modules, and working with npm.
I also learned the grid layout.
After finishing I watched some youtube videos about React, and saw the way the code is written and was pumped about jsx and inserting variables in your markup.
I coded a calculator and copied Trillo (which is the project of the 7th section of the course) myself.
Although, I had my final secondary school tests, I managed to gain ground this month.
April
At the beginning of my javascript learning journey, I didn't feel comfortable using it (you probably experienced that before, you make tons of mistake and you can't code the logic that's in your mind), but due to solving a lot of problems I became comfortable.
If you still feel not comfortable, that's probably because you didn't use the language enough, Go solve some problems!
And here there's an important point to note, I didn't start learning React until I felt comfortable with the basics of javascript, because at the end of the day, all of these frameworks are just javascript.
If you learn React without really understanding javascript, you will be locked into React, and even you won't be able to really understand it.
But, If you learn javascript well, you will be able to learn any framework easily, and you will be able to understand it.
Learn javascript fundamentals well before learning any framework.
I started by reading the docs of React, but I wasn't really used to learning this way, so I decided to take Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks by freeCodeCamp.
I didn't like the course, because I wasn't really able to understnad useEffect and felt frustrated, so I decided to buy React - The Complete Guide (incl Hooks, React Router, Redux).
Btw, I don't mean that the freeCodeCamp course is bad, you may like it, It's just my personal experience.
Before starting the new course, I decided to get my hands direty by creating a todo list app.
After coding this app I took the first 7 sections of the course then created a password-generator app.
After that I continued the course until I reached Section 11.
At the time, I discovered Build App Clones with ReactJS playlist on youtube.
I watched 🔴 Let's Build a WhatsApp Clone with REACT JS for Beginners!, and discovered firebase.
After that, I started to learn firebase authentication and firebase real-time database to be able to do something similar.
I didn't like the Clone, that they made, I wanted something really similar to whatsapp (the app that they created was just public rooms).
I wanted you to sign up with your google account and enter the email of the person you want to chat with then he will appear in your chatting list.
So, I decided to create my own whatsapp clone.
I wasn't able to do it, because the state of the app was very nested and I got burnt out.
May
I continued to code it until I came up with a way to manage that complex state (which is simply gitting rid of it!).
I this project, I used some material-ui components, and discovered CSS frameworks.
I was pumped about material-ui, finally I can make my apps look pretty 😙.
To be honest, the app was absolutely unusable, every click could bring up a white screen 😀.
I started to remove these, bugs until I got frustrated with the codebase and left it.
I waited some days until I could touch the code again then fixed most of the bugs, fortunately, now you can try it.
After finishing this project, I felt so confident and started watching Build LinkedIn with React JS (Firebase + Styled Components + Redux).
As you expected, I tried to create my own social media, but I couldn't.
June
I started to learn typescript by buying Understanding TypeScript - 2021 Edition.
I also, felt that the reason that I can't scale my apps is bad organizing, so I started to read some articles about architectures.
I read tons of articles about that, and I can say that Bulletproof React and Thinking in React are enough.
To be honest, this is one of the weak points of React, which is that it's flexible.
As a beginner, I was confused with that flexiblity (trying to find the best choice).
If you're in this point where you feel frustrated about organizing and planning your apps, I recommend that you don't overthink it, this will just spare your time.
Probably, all of your apps aren't that big, so grab a pen and sketchbook and start writing down the functionalities of the app and draw a sketch for the design, and start coding.
If your app is bigger and you want to manage the tasks that you will do then you can use Trello or Notion.
If you want to know how do I use Trello to do that check How do I approach planning projects?.
After reading about architecting React apps, I wanted to put that into practice, so I create Plaject.
It's simply a project management app like Trello, and I had fun coding it.
After finishing that project, I made a huge mistake, which is starting to learn back-end development.
To be honest, It helped me later, but I don't recommend it that much, Instead I recommend learning node to able to write scripts.
If you're a frontend dev in your first year don't learn backend but learn node.
July
After learning backend development for 2 weeks I decided to quit.
I realized that frontend isn't that small, I didn't practice it enought, and my designing skills were terrible.
First of all, I wanted to learn the basics of UI designing, so I read tons of articles about it and watched The 2020 UI Design Fundamentals Crash Course (INTERACTIVE).
I looked at the current situation, and decided that the best thing to do is putting React and the UI designing concepts I learned into practice.
I also wanted to learn Next.js.
So I read some articles about project ideas, and chose 5 projects.
- A weather app.
- An emoji-picker component.
- A virtual keyboard.
- An ecommerce app with Commerce.js.
- A drawing app with undo/redo functionality.
I would learn Next.js after finishing these projects.
I finished the weather app, and started in the emoji-picker component.
Auguest
I finished the emoji-picker component, but couldn't bundle it.
Bundling the lib was a nightmare, I letteraly spared a week trying to learn webpack from its docs to bundle the library.
I also, tried create-react-library, but I encountered a linting issue, so I didn't use it.
I felt so frustrated, until I decided simply to not bundle it!.
I wrote a custom tsconfig.json file in 5 minutes and it worked!
Of course, what allowed me to write this custom config is my understanding of how a lib should be bundled.
I published the package to npm and forgot about it.
I created the virtual keyboard app in 4 hours.
In one day, I decided to open npm to check my package, I was astonished when I saw that the package got +600 downloads in 3 days.
The package had tons of bugs, the documentation was awful, and I felt embarrased that people used it, so I decided to unpublish it!
I really don't know why I decided to do this stupid thing, but I just did it, then fixed everything republish it again 🤦♂️.
After that nobody downloaded the lib so I decided to just remove it from npm 🤷♂️, and put it in Github packages, because nobody used it so I won't feel ashamed 🤓.
Don't ask me why I didn't just add a new version, I was stupid, and didn't know a lot about npm.
I learned Commerce.js and create the ecommerce app by following ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe.
I also created the drawing app after reading Implementing Undo History | Redux.
I heared about tailwindcss, And liked that It gives you a design system, but I didn't like the way it's written and decided to just use regular css.
But I really liked their color palette, so I decided to steal some colors from it 😈.
After finishing all of the projects that I intended to do, I decided to start learn Next.js by buying Next.js & React - The Complete Guide (incl. Two Paths!).
September
In the first week of this month, I was pumped about Next.js, and the school was out, so I finished a big portion of the course then created my blog in three days.
Well it's not the same as now, You can check that version from here.
I heared about spring-based animations while listening to a Syntax episode, So I had a look at react-spring.
I thought that the idea is cool, but I saw another one called Framer motion, and I decided to use it because their landing page was gorgeous.
After learning the basics of Framer motion, I added some cool animations to my blog and the typing app.
While also listening to a Syntax episode, I heared them talking about copying prototypes, So I searched for some free figma prototypes and choosed to copy FREEBIES-Landingpage-LaslesVPN and Corona Virus (Covid-19) Landing Page.
I finished copying these two in a week or so and deployed them (FREEBIES-Landingpage-LaslesVPN, Corona Virus (Covid-19) Landing Page).
October
I wanted to practice React in a harder project, so I decided to create a code editor like Codepen.
I started coding it, but in the middle of that process I had to use an editor component like CodeMirror.
I thought that If I used it this won't be a challenge anymore, so I decided to take an exteneral week and code my own!
The project was harder than expected and took the whole months.
I'm very pround with this app and I published it to npm.
I also had a look at testing and read the Jest introduction section in their docs.
I wanted to test my React apps, so I learned React testing library basics from React Testing Library Tutorial.
November
I started my first year of highschool one months ago, and this months I've just finished the physics and wanted to put it into practice.
I studied linear acceleration equations, and took some practical stuff on it like projectiles motion.
I created two sandboxes to practice these, the first one is simply a visualizer for projectiles motion and the second one uses canvas to draw the curve.
I also started to work on my component library.
Conclusion
I hope you find the resources that I mentioned here useful and the article entertaining 👋.