Learn Front-end Development as an Absolute Beginner
Introduction
Hello, world! I’m Ayumi. I’ve been learning front-end development since 2020. It is almost a year, so I’d like to review what I learned in the last year as an absolute beginner.
When did I start?
I came to Canada to study at the vocational school that specialized in web development in March 2020. A week before I was supposed to enter the school, I got news about the closing school because of bankruptcy! I was so shocked but the only thing I could do was learning by myself. So I started self-learning anyway.
How did I learn?
I don’t have a computer science degree, neither work experience as a developer. I didn’t know how should I start, but Frontend Developer Roadmap 2020 helped me a lot. I decided to follow this road map.
What did I do?
I’ve learned a lot of things in 2020! Here are what I’ve done.
Contents
- Terminal, Git, and Internet
- HTML and CSS
- JavaScript
- React
- Again! HTML, CSS, and JavaScript
1. Terminal, Git, and Internet
I learned about the terminal (command line) and git. Firstly, I didn’t think I would use this black window. I’ve seen this only in the tv show called “Mr. Robot” which is about hackers. To me, it was much easier to create files from Finder, but now I feel using the terminal is also convenient.
Understanding Git and GitHub took me a long time. Sometimes, I still struggle with using them, so it would be very helpful to learn them for absolute beginners in the beginning. It looks complicated, but the sooner the better! At the time, I wasn’t sure the difference between local and remote but now use them almost every day.
Also, I learned basic knowledge about the internet — such as DNS, and HTTP. To be honest, it was not fun for me, but I would say I understood slightly how the internet works.
2. HTML and CSS
I learned my most favorite part of front-end development, HTML, and CSS! In the beginning, I watched some videos on YouTube to learn the basic syntax of HTML and CSS. Brad Traversy especially helped me a lot. Since I was working as a graphic designer, learning CSS was a lot of fun for me.
The most challenging part was the responsive design and flexbox. I was struggling with creating responsive design with flexbox at the time but gradually got to know it.
After I learned the basics of HTML and CSS, I tried to create a website as my portfolio site. Firstly, I used vanilla CSS, but it was too difficult to create a responsive design so I use the CSS framework, Bootstrap. It definitely made my life easier. I wouldn't use vanilla CSS anymore.
Speaking of the CSS framework, I also like Tailwind. I found I could create websites more detailed with it than Bootstrap.
I wanted to upload my website, so I bought my domain on Google domain and used Firebase as a hosting. Deploying was kind of easier than I thought. Except for the domain, it was totally free! (Firebase has limitations, though.)
This is my portfolio website with HTML and Bootstrap CSS, deployed with Firebase.
3. JavaScript
I didn’t even know what the role of JavaScript is, the only thing I knew was it makes animation for websites, so I started to learn it for my portfolio site. Firstly, I learned about syntax, but it was so difficult to understand for me. JavaScript is completely different from HTML and CSS. It took a ton of time.
Learning DOM( Document Object Model) is also essential, firstly it looks complicated but I’ve gotten used to it. Understanding the relationship between HTML and JavaScript is necessary for front end developers.
To understand syntax, I learned with “The Complete JavaScript Course 2021: From Zero to Expert!” on Udemy. It was almost 67 hours of lecture! It made me tired and realized how important learning JavaScript. It covers the basics part pretty well, but I would say some parts are a bit old. This course has a lecture on Node.js, too.
Solving algorithm questions was also helpful to know JavaScript methods. There are gazillions of answers on the internet, but I think that the documentation such as MDN will be an absolute beginner’s best friend. I found that some answers might be wrong on the internet. I’d recommend that trying to solve quizzes by myself with the documentation, after that searching for other solutions.
To challenge algorithm quizzes, this website is helpful. You can train in any language.
4. React
There are tons of posts that recommend learning React for front end developers. So does the road map, so I started to learn React. However, it was a mistake. I should have learned it later such as after I learned JavaScript more. That was too early for me. I don’t know how is that possible, but I finished this course “The Complete React Developer Course (w/ Hooks and Redux)” anyway. I don’t have any confidence in my understanding of React, but it was a good opportunity to create a web application and deploy it. I learned Firebase authentication in the course. I believe it is also helpful for people who want to create web applications.
This is the budged web application that I created in the tutorial. It has the Firebase login authentication.
5. Again! HTML, CSS, and JavaScript
Since I realized that learning React was too early for me, I decided to review what I’ve learned so far. I tried creating mini projects with some lectures on YouTube.
Here’s the article that introduces good projects with vanilla Javascript.
I’ve almost forgotten what I learned before, so it was a good time to learn them again. I realized that using methods is very practical not only for solving algorithm quizzes but also for creating functions for websites. For example, the typewriting effect requires count functions with the slice method.
JavaScript animation is so interesting to me. I tried the JavaScript animation library called “GSAP” on my portfolio site. This one is pretty useful.
Conclusion
I’ve been learning a lot of things by myself since my previous school closed. After this period, I started to go to the new school. Luckily, I had many opportunities to learn something new. Except for what I wrote above, I’ve learned Java, SCSS, and some other new stuff.
I found these ways to improve myself as an absolute beginner after I started to learn front end development.
- One of the most important things is to review basic things again and again. If I don’t understand basic syntax or methods, I wouldn't be able to learn advanced stuff.
- When I stack in errors, reading errors and documentation is the most helpful way to improve me. Getting errors always turn me off, but errors show me where I make mistake. Also, the documentation says always right. It never wastes your time. (Sometimes Stack Overflow does.)
- You will be satisfied when you finish tutorials, but it is not enough for your improvement. Unfortunately, I was satisfied when I finished tutorials and never have created applications by myself. Then I forgot everything I learned in tutorials. Creating something by myself is essential for absolute beginners.
My road to being a front-end developer is still far away from where I am, so I’ll keep learning!
