HTML, CSS and JavaScript are the most important part of web development. I like to call them the holy trinity. I've been teaching myself web development for the last ten months and only learning these three and some supportive technologies. In this article I'm going to share all the resources I used to teach myself. So this is not a random gigantic resource article but about the resources I actually used.
If you read the intro attentively, you're probably wondering about the 'ten months' duration. Is that a typo? No, not at all. It's true that most people learn backend in this duration, some even get hired. I took time, mainly to build too many projects, less time investment and probably I'm a slow learner.
Common Resources
FreeCodeCamp is my default learning spot. I either learn from it first or I come to practice later. Highly recommended.
Whenever I forget something or need a quick look, I use these two sites.
It's possible to become a frontend developer just by using these three resources.
HTML
I discovered this two hours long video on FreeCodeCamp's Youtube channel. It's to the point and teaches everything one need to know.
I watched this video tutorial where the tutor build a bare bone blog site with only HTML.
CSS
This is one of the longest courses on FreeCodeCamp's Youtube channel. This 11 hour long video will teach you everything you need to know about CSS. The first three hours of this course is on HTML. So this one video tutorial is enough for HTML and CSS. John Smilga is a great teacher.
CSS Flexbox
Flexbox is very handy for component making. This course is undoubtedly the best course on Flexbox.
A fantastic site to learn and practice Flexbox by playing a game.
This site is a life saver when you can't figure out what property do you need to solve the problem. Every Flexbox property is displayed with illustration. You can buy the poster too.
CSS Grid
There's a phrase for CSS Grid, "Look Ma, No Media Queries! ". Learning Grid is very helpful to design a layout. A beast for responsiveness. I forgot when was the last time I wrote @media rule. This course by @WesBos, just like the Flexbox, is amazing. You can learn in-depth and code along some awesome projects. Many people feel like they don't need to learn Grid if they know Flexbox, but I'll request to give it a try.
Just another fun game to hone your Grid skills.
The same approach by CSS Tricks for CSS Grid like CSS Flexbox.
ℹ️ Both the Flexbox and Grid course are pretty old. Some of the properties and browser extentions have been updated. So please take a look at MDN documentation after completing the courses.
Bootstrap
This crash course is enough to learn about Bootstrap since their docs are very easy to use. This course includes a simple dashboard.
I watch this video to understand how he make a complete website. It was good. After this, I built some more projects on Bootstrap.
SASS
After learning SASS I tweeted:
You've two life in CSS. Before SASS and after SASS.
I hope you can understand how much I love SASS. This course is to the point. The tutor gives some theory and takes you to the project straight. You can learn by building a cool portfolio.
Colors, Fonts and Icons
- Coolors for color palette.
- Google Fonts for fonts.
- Font Awesome for icons.
There are lots of color generator sites but I keep going to Coolors. I tried few icon packs but FontAwesome is awesome for it's simplicity.
Photos
I used Unsplash for most of the times. For the last couple of months I've been using CSS gradient background patterns. I've a seperate blog on that. Alternative to images in website design.
Design Inspiration
- Behance
- UI Design Daily
- Frontend Mentor
- Random Google image search
CSS Projects
This is the most important part. It doesn't matter how much you know. What matters is your ability to build. After learning each above section I made several projects.
After learning just the basic CSS, no Flexbox or Grid, I downloaded some free template from these sites. Then I took the images & videos from their folder and tried to replicate the whole site. The best part of these templates were to see code when I couldn't make progress and looking at their coding structure. This helps to write good, reusable CSS.
A great playlist to hone your CSS3 skills by Brad. I did couple of projects from there. Brad is an energetic teacher and he tells how he is going to achieve the final result.
Frontloops provides you a design file with all the assets needed to complete a project. They've 30 total projects. You complete one, submit it and they'll give you the next project. I completed about 20 projects of them after learning Flexbox. When i did, they had a free option. Now it's only premium.
I recommend this more than anything. It has lots of projects from beginner level to guru level. You can build components or full page sites, see others solutions, submit your solution. They also has a leaderboard. So you can be competetive and learn by having fun.
Git, GitHub and Netlify
Many people recommend to learn Git after learning JavaScript but I think it's better to learn after CSS so that you can display your projects. I learnt Git & GitHub from Bucky Roberts because he is the coolest.
Although TheNewBoston's Git tutorial is awesome, Bucky uses GUI app for the later parts. For this reason I couldn't learn Pull Request or Merge from that course. Then I looked into this playlist and it's really good.
I tried Netlify on my own and it's very easy to deploy sites. I love their service and always host there.
I use CodePen to display components and CSS Arts. To be able to see the views is inspiring.
JavaScript
At the beginning I took lessons from The Odin Project. I like their curriculum. But I couldn't get much from that course. Maybe because most of them were text based and I learn better by seeing.
This is a course on Bangla, my mother language. If you're a Bangali, it is highly recommended. The tutor has experiences of programming for more than two decades and it reflected on his tutorial. It only teaches the basics of the language. No projects are there.
I was looking for a constructed course and found this. It's my first premium course. I can proudly say that, it was the best $14 I've ever spent. It's the most popular JavaScript course on Udemy. Jonas is a fantastic teacher. The best part of his teaching method is that, he teaches in a way that you won't feel like he is leaving you on a lonely desert. Recently he updated the course and the present curriculum is bound to make you comfortable in JavaScript.
I bought the course to practice Data Structure and Algorithm. The tutor explains the complex concepts in a simpler manner. But if you don't want do spend money on this topic, FreeCodeCamp has a section for Data Structure. Check that.
Other than these three and FreeCodeCamp, I often searched Google when I couldn't understand a concept. Different people shares different analogies and you don't know which might suit you. So keep exploring.
JavaScript Projects
There are two ways to be better at programming, building projects and solving problems. I set a mission a to build 50 vanilla JavaScript projects before learning any frameworks. I used some of the projects from below resources.
Created by Chris Dixon(@chrisdixon161). Everything from HTML to vanilla JavaScript project.
This is a premium course which has 20 vanilla JS projects. Most of these projects are beginner friendly and basic projects. I expected some intermediate projects to practice.
I don't think anybody should buy a premium project-focused course as long as you have JavaScript30. It has all sorts of projects and some theory based tutorials. Moreover before every tutorial, Wes tells the tricks and inspires you to try on your own.
Like CSS they have lots of JavaScript projects to practice.
My favourite site for problem solving. The gaming like interface is captivating. I was suggested that problem solving is not that important for frontend but I really enjoy solving and it helped me to understand many concepts.
Many find CodeWars or other problem solving sites difficult. If you're one of them, I'll suggest you to start from Edabit. It is extremely beginner friendly and they have tons of problems to work on. I did only the very easy section from it.
ℹ️ There a jargon called tutorial hell in web development. Which means being too tutorial prone to build on your own. The true mastery comes by building on your own. Try yourself first. If you can't do it, don't sweat, watch the tutorial or read the blog. But after watching or reading, please try to do on your own. Don't move to the next project without understanding the present one.
Markdown
Although there are many online tools to write markdown, it's good to know how things happen. This is a tiny course which you can finish at one sitting.
Newsletter
To be honest, I don't read newsletter that much, but sometimes I get informative stuffs from them. Currently I'm subscribed to:
- Quincy Larson
- CSSWeekly
- Jonas Schmedtmann
What's Next
I'm going to start learning Reactjs from Max's course in a few day. After that I'll build some projects and move to learn Nextjs since my end goal is to be a frontend developer. In the mean time I'm also going to apply for jobs that suits my skills.
ℹ️ I used way more resources but can't remember everything. Sometimes you just surf on the web and get valuable things.
Shameless Plug
Like I said in the beginning, I built too many projects. I built 32 HTML & CSS only sites before learning JavaScript. Then 50 vanilla JavaScript projects and 50+ CSS components and arts. Here are the links:
Cover photo: Unsplash
Thanks for reading. If you think this might help you or a newbie, feel free to share. I update my learning process on Twitter. Let's connect.