Anyone can learn CSS
As a self-taught developer, this is my story of how I learned CSS. The title might be a bit bold but I wish I had known about the approach to learn CSS that is given in this article while I was starting out. I hope my experience will help you to pace up the learning process.
Who am I? Hello, I’m Vignesh. For a few years now, I have been a freelancer, frontend developer, and Maker. Recently, I created two products: EazyCSS and Graha, and this is my journey of learning CSS and how it could have been better.
Story
In college, I was fascinated by the stock market and tried to create a tool that can predict stock market behavior based on a couple of data points other than historical stock data, at this point I had some knowledge of python and machine learning but frontend absolutely zero. So, I rolled up my sleeves and started learning Javascript/CSS. Learning Javascript deserves a separate article, in this article I only focus on CSS.
First I started jumping from one youtube video to another about CSS, HUGE MISTAKE. It took me several weeks to get out of this loop. Don’t get me wrong, there are very good CSS youtube channels (My favorite ones at the bottom), but as a beginner, it’s hard to find the right video where the author speaks beginner-friendly vocabulary especially.
At this point, I watched quite a few videos about CSS, but it brought me to a position where I was not sure if learning CSS is the right thing for me to do with my time. But my end goal of creating something that I was passionate about is a big driver for me.
Suggestion for the people who are reading this, Be fully aware of why you are learning and focus on this goal to keep yourself motivated.
Learn Basics at least more important ones
After a lot of confusion, I made a decision that I should learn the basics from one author. Fortunately, I found Udemy and bought a ~$10 course on CSS. My recommendation for choosing a course is always to choose a course where you are excited about the outcome, in my case a very cool landing page.
So did I finish the course? Big No, To be honest, it was BORING but since it is a vital foundation I learned the very important basics and skimmed through the rest, and jumped to the interesting section “How to make this cool landing page” and got my excitement back and I successfully finished that landing page as a code along. Wow, It felt great and I completely stopped the rest of the course. Yes, I know I missed a big part of the basics by skipping a few explanation videos and other projects in the course.
Up until this point, I was not sure skipping the basics of something is a good thing, but I always did for all the programming languages I learned, but recently came across this tweet by Paul Graham.
As a self-taught dev, I completely agree with him. I picked just the basic concepts when I am building products and learned the rest in the process.
Tutorial Hell
After I finished nearly 70% of the course, I just wanted to create the landing page for my product so I started coding right away, at that moment I realized I cannot write CSS without code-along or I am not up to the level of creating at least average looking original designs even after spending days doing a course about it.
So, how do I get out of this feeling? Answer: “Just jump right in.” How do I know this? I had the same experience when I was learning python, in order to do the final product. I did a lot of small projects just to train my skills to do the final product.
Here is an interesting talk between Paul Graham and Mark Zuckerberg where Mark Zuckerberg explains how he is afraid of public speaking and how he overcame it. In my opinion, his advice applies to learning programming languages as well.
After I decided to do small landing pages before my product landing page, I went to dribbble.com and challenged myself to replicate one design shot per day, starting from very simple shots to fancy-looking shots for 30 days straight.
You may ask me “I don’t know where to start when I look at some design shot” my suggestion is just to focus on one element like a button or a search bar and imagine splitting the element into individual design components such as colors, shadow, padding, and just google everything find the appropriate CSS code and put together. It may look bad but it is okay. It’s not about the result, it is about the progress in your perspective to adapt from a design shot to a CSS syntax.
Finally, after 30 days of rigorous googling and practice, at one point (~26th day), I was comfortable replicating design shots to HTML/CSS code, it was not perfect, but the point is I was not afraid of doing something in CSS without depending on a tutorial.
Conclusion
CSS fundamentals are easy to get started with, but it will take practice to learn how to use the properties in the right way. I hope my story helps in your learning journey.
Shameless plug for my products
EazyCSS — A browser extension that allows you to change any website design visually and get your changes in CSS code. Use-Cases
Graha — First real-time live website collaboration tool where teams can edit website text, make quick design iterations with our Sliders/AI-powered CSS editor, collect feedback directly on the live website, and finalize the live website design 10x faster.
