6 free resources to learn html css javascript basics before learning webflow

I CAN’T CODE. But here’s why I’m learning and what I’m learning with.

‍

If you’re like me, you came to Webflow because you wanted to build the designs you created. You’re a designer far more than a developer. Perhaps you think coding is intimidating, hard and just not for you. So why learn to code if Webflow allows us to make websites without touching it?

‍

Why Learn To Code If You Learn To Webflow?

I wish I could go back in time to the time and learn HTML, CSS and Javascript before diving in to Webflow. Since every single webpage that you build using Webflow (or anything else) use HTML, CSS and Javascript, it’s important to understand these basics. Here are 3 more specific reasons why learning at the least the basics of HTML, CSS and Javascript are handy:

‍

1) Published Websites May Have Bugs

Webflow is a visual code editor. Every decision you make on the visual canvas when building a project in Webflow generates lines of code.

‍

I used to think that if I knew Webflow well enough, I could get by (for very simple websites, it generally is). However, the problem I have found with this is that my project may look fine in the Webflow designer but when you hit publish and your website goes out in to the wild, it’s a very different story (read about how I fucked up a recent Webflow project here).

‍

That’s not just on different screen sizes but with different browsers too.

‍

Outside of the safe space of the Webflow webdesigner and in to the land of Safari, Firefox and Chrome, these different browsers interpret or display website source code like HTML and CSS in slightly different ways. In other words, things might not work how you expect.

‍

Inside the Webflow designer - looks fine. Published site - looks buggy.

‍

This is when it’s extremely helpful to know at least the basics of coding to be able to de-bug projects.

‍

“I would start first by not learning Webflow. I would start by learning HTML and CSS fundamentals, and UX and web-design patterns.”

47.46 mins

Ben Celinski

‍

2) Complex Websites May Need Custom Elements

If you want to make simple websites for clients, you can probably get away with not really understanding what is under the Webflow hood. However, naturally, you want to be able to have confidence that you can tackle more complex problems and custom integrations for your clients.

‍

Not only is this going to help you stand out as a Webflow designer but also make you far more valuable to your client.

‍

“My first tip for anyone who doesn’t know HTML, CSS and Javascript is to know these 3 things. Once you are able to build a website from scratch, you are able to build the most amazing things inside Webflow. […] 90% of people in the Webflow community are designers who don’t know any code but it’s necessary to know some code to offer clients more complex tasks.”

35.40 mins

Ziga Fafjar

‍

3) Troubleshooting

When problems arise with projects, I normally head to Webflow forums to work out a problem. However, if you know HTML, CSS and Javascript, you can work out problems much faster using other resources like Stackoverflow.

“As quickly as you can, understand the deeper meaning of what you are creating in Webflow. What you are creating in Webflow is HTML and CSS. Understand these and then understand how Webflow works with it. The benefit of this is that especially when it comes to challenges is that when there is something that you don’t know how to do, a lot of Webflowers will look at the Webflow forums to find someone facing the same issue. That’s a pretty narrow audience in comparison with the whole internet. If you know CSS, you can just google CSS + how do I do this thing. You will then find solutions that you can apply to Webflow.”

57.44 Mins

Corey Moen

‍

6 FREE Resources To Learn HTML, CSS & Javascript Basics

1) W3 Schools

https://www.w3schools.com/

W3 schools has tonnes of different useful info about different coding languages along with exercises, templates and qualifications. Although some info is behind a paywall, there is an insane amount of free documents on here to work through.

‍

2) Code Academy

https://www.codecademy.com/

Code Academy is another great resource with tonnes of information with a friendly UI. I love the way it has a goal tracker to ensure you stay disciplined while learning. While there are paid courses behind a paywall, the Introduction To HTML (and other intro courses) are free and helpful.

‍

3) Super Simple Dev

Super Simple Dev YouTube channel has an insane amount of free content. My favourite video that I have seen so far on the channel is a full HTML and CSS full course. Yes, it’s 6 hours BUT it’s insanely useful. It’s practical since you literally build the YouTube.com. You learn basics and build up from there. I haven’t completed this one but it’s excellent so far.

‍

4) Design Course

Design Course has multiple complete crash courses which are in depth and not 6 hours but 2 hours. You whip through making a website that is fully responsive - clear, fast paced but incredibly useful.

‍

5) Hand-Code Your First Website: HTML + CSS Basics

This course was the first one I did and it is incredibly useful to understand the basics. Rich Armstrong, the course instructor is knowledgeable but easier to listen to than some other development tutorials I have done - he’s fun and not droning on!

‍

6) Clever Programmer

I know this is 12 hours but there are multiple projects in here - from creating a tip calculator to building your own street fighter game, I’m excited to get more in to this one. Although I am nowhere near completing this one, it seems very robust for beginners starting out in JS.