DEV Community

Justin Marsan
Justin Marsan

Posted on

I learned HTML and CSS, now what ?

After browsing online forums for a while a question that often pop ups is how one gets from a beginner course or reading a tutorial to getting kinda good at something and then getting really good at it.

Find something difficult and repeat it until it becomes easy

It really is that simple : find something difficult... But where do you find it ? Dribbble and Behance are very good places to find good designs to copy. I like the first one more because it focuses on sharing a small piece of a whole : you don't spend as much time on large screens and instead focus on just a small piece of a page, a small screen, making it much easier to find time in your schedule for some daily practice.

Another good place is code themes, like ThemeForest : on there you can easily find the right font used for the design, and get pointers if you don't know how to do something. Find a theme that you like in any category, try and re-create it and when you get stuck look at the source code to figure it out.

Pick things you think you can code

Among the various designs you'll see there are some that will feature an animation or an effect that will leave you staring at your code editor. Try to avoid those initially. You'll get tripped up by things you didn't know you didn't know. That's very normal. This is normal, and that's why you should use your practice to just get very comfortable with what you already know, and just keep a list of the things that tripped you up and were difficult for you to code.

Then make it hard

To keep getting better you then add layers of difficulty. It could be from the designs you decide to code, that include more complex elements, from adding interactions with basic JS, or it could be by learning about new topics and implementing them, like accessibility, SEO or naming conventions for example.

You could also make it harder by trying to not look at the live result every time you code. Try and make the whole layout of your page in one go, and then adjust if it doesn't do what you think it would. This helps get a more intuitive understanding of what you code and how the various pieces fit together to make up your pages.

You could also timebox yourself on easier stuff. Being good at something means it comes naturally, and trying and rush yourself is a good exercise for that, so give yourself a time limit. This will also guide you towards tooling that'll help you code faster and become more efficient (like Emmet for example).

Make yourself employable

Unless you're in this for the fun of it (which would be a really good reason to code because it is fun) you'll want to get a job someday, or change position to use your new skills. One way to make sure this practice helps you with that goal is to look at job postings that you apply to and look for the tools, techniques, frameworks they use, and try and use them in your tiny projects.

If a job offering mentions Webpack you don't need to know Webpack configuration like the back of your hand, it'll already be setup when you get there anyway, but it really helps if you've played with it a little and know how it's used when going to the interview. Same is true for SCSS. If you've coded 100 little 400 pixels squared thingies with just basic HTML and CSS, you won't have learned as much as you would have with 25 using many different tools, even at a beginner level.

Follow people

The issue when you start to know some things about a given topic is that you can forget there are many you don't know. Following people and websites on the subject will keep you on your toes. Frontend Front is a good place, there are many good people on Twitter as well if you're into that. I like Reddit communities as well for discussions on those topics...

Either way, make it so that you frequently face all the old and new ways to do things, the different types of challenges that people face and all that, and learn more about those that you need now or that pique your interest !

Top comments (0)