I have spent long hours searching, reading, hearing, and viewing free tutorials. So, I am listing all the Front-End web development resources for newbie coders that I have used to learn HTML, CSS, Javascript, ReactJS and AngularJS.
I will be updating the list when I continue to find resources that have been helpful a couple of times.
Learn to code on your own
The internet is a beautiful place where we can find every type of information in a matter of seconds. That is A LOT of information.
Not every resource explain concepts simply. Therefore, you can spend a lot of time researching for that course provider, magazine, or blogger that prepares learning material that your brain comprehends.
Also, if you are on a budget, it is time-consuming to find practice material that is free of charge. It is much easier to find free of charge theoretical material with a few practical problems.
Theoretical Resources
- If you have never taken a computer science, web development, or algorithm course, it is required for you to take time to see, read, or hear what a program is, and how does it work. Learning to Program de Steven Foote (Senior Software Engineer at LinkedIn when this was published) is an excellent book to break the programming ice. It explains everything from what a program is, how does it work, the various programming languages, and their differences. Also, he guides you in creating a Chrome extension.
- MDN Web Docs – if a programmer would have a Webster Dictionary or the Bible it would be this resource. Here you will find every function, attribute, methods, variables, family, friends, neighbors, and everything that has to do with HTML, CSS, Javascript, HTTP.
- Code Academy – is a programming language learning platform where you can create a free account. With the free account, you have access to the basic courses on web development. The good thing about this platform is that it is interactive. On the same platform, you can solve the practical example and the platform detects if there is an error in the code. I use this platform a lot to refresh basic concepts, especially for ReactJS.
- Eloquent Javascript – book with an online electronic copy that has some basic examples that are also interactive. As you can read from the title, it is focused on Javascript. Another good resource to have bookmarked on your browser.
- Stack Overflow – a resource where you will find a world of questions and answers between web developers. As a self-learner and newbie, debugging and describing your code in words can be challenging. This resource has helped me understand how developers communicate with each other when they have issues. It has helped me put into words my bugs. By reading that other people had the same problem as you, you can read how other people explained it, and how other people helped solved it.
- Github – is an online repository, and its main propose is versioning. I consider Github a good learning resource because it is open source. You can see the code of the components that are stored on the repository therefore, you can learn to write and maintain code. As Stack Overflow, which is based on questions and answers, on Github, you can read each change that users have made to their repositories, or how other users have collaborated on the project.
- CSS Tricks – it has great articles that explain different ways to use CSS. I have bookmarked this article they did on FlexBox. I always go back to it when I am dealing with page layout.
- Dev.to – is a community of software developers helping each other. Not only you can find great posts about web development, but also you can read about experiences from beginner, mid, and senior developers that have learned either from college, boot camps, or by themselves, and are working in companies, freelancing, startups or agencies.
- Jonathan Melgoza Blog – A software development blog in Spanish. The article that I include here helped me understand HTML, CSS, Javascript, and PHP because it was one of the first articles I read on the subject.
- Ladybug Podcast – A podcast that focuses on different topics such as web development, personal development, and career advice.
Practical Resources
- Wes Bos – Wes is the MAN explaining Javascript. His 30 day Javascript challenge, Javascript 360, was my: “Oooohhhh I get it “ moment. After finishing his challenge I felt confident that I could continue learning my own. Javascript 360 consists of writing code for 30 different components of a web page in 30 days. Wes includes videos where you can see his coding process and he explains why he is writing the code as he is writing it, everything for free.
- Zell Liew – I subscribed to Zell Liew’s mailing list because his Learn Javascript description resonated with me. I felt like I was reading from a friend who understood my position. Most of the blog posts out there, do not explain things so anyone can understand. It is mostly assumed that the reader has a certain level of knowledge or degree, and well, not everyone is in that position. Zell explains for all. Although I have not taken to his course, this practical example demonstrates his ability to explain Javascript concepts in simple words.
- freeCodeCamp – it’s a non-profit organization that provides neatly explained articles about web development. They have a curriculum set in for everything you need to know, and practice, about to become a Software Developer. They also refer to other resources for more information or practice. Excellent for people who have not written a line of code.
It’s all about consistency
I hope that this list helps you start, or at least guides you, on your front-end self-taught journey. Learning to code requires a lot of reading and practice. If you are consistent about it, you will go from web newbie to expert in no time.
From the list of resources MDN, Stack Overflow, Github, and CSS Tricks are not courses, training, or books. I would consider those as “Continuous Improvement Resources”. The rest of the resources require time to understand and practice.
Practice with a small project after completing the listed resources. An example of a project may be to re-create a webpage’s design and functionality. You can try to create your portfolio from scratch. Practice, practice, practice…. I can not stress enough that you need to practice.
But also, take it easy. All of us have gone through that frustration when the program does not do what we want it to do. When those frustrating times kick in, think about how satisfying it is when it does work. It is even more satisfying when you realize that you can create on your own, and learn by yourself.
Thanks for reading.
You can get a new post notification directly to your email by signing up at the following link.
Related articles
The following CTRL-Y articles are related somewhat to this post. You may want to check them out!:
- Programming Language: The General Parts
- HTML for Beginners
- HTML: Tag Atrributes
- HTML: Tag Nesting
- Layered Architecture for NodeJS
- Filtrando con GraphQL y Prisma: Qué NO hacer
- What is the Rendering Engine?
- A Morning in a Front-End Developer’s Mac Terminal
- Incorporating Digital Assets into Your Finances
- My First Year Writing Code
By the way – A playlist for you
This post was written while I was listening to Karen O and Danger Mouse’s new album Lux Prima. Karen O is the lead singer from the band Yeah Yeah Yeahs, which you should check it out too because is great! I had that album on repeat all day. I would recommend this album you want to something smooth but a bit upbeat.
Do you know of another great Spanish or English resource that is not listed here? Which resource would you recommend?