Coding for Beginners – Best Way to Learn HTML & CSS Codes to Build a Website

What is code?

Go to the top

Code is the foundation of every single website or computer app that you’ve ever used. Much like building a bridge, coding a website or app is all about piecing together small pieces of code into something larger and more functional.

While it’s often horribly misrepresented in Hollywood, code is what you’re seeing when a character is “hacking” into something. It usually resembles text with a lot of rarely used punctuation, like semicolons, or some of these: < >

Even this page is littered with invisible code. To pull back the curtain a little bit, even something as simple as the heading of this section – “What is code?” – needs a bit of code surrounding it for it to function properly.

As for the different types of code, that’s a different question. When it comes to web development, programming can be split into two categories – front end, and back end.

Front end code is code that has to do with what the user sees. Pictures, text, buttons – these are all governed by front end code. Meanwhile, back end code is the boiler room of the website, where crucial things like logins and security are managed.

Why is code important?

Go to the top

When you run a website, knowing basic code is important in the same way that knowing basic mechanics is important when you own a car. If something goes wrong, you want to know that you can fix it. Like a broken down car, you can take it to someone to fix it up, but it’s cheaper and more comforting to be able to patch it up yourself.

“Even if you have no interest in being a professional software engineer, writing small programs to help you with day-to-day tasks saves an enormous amount of time. Do you have a bunch of files on your computer you want to rename without clicking on each one? Write a Python script to do that and save yourself the hassle. Wanna be notified when your ex posts photos with a new person? Write an application to hit some APIs and send you a text message.

“Coding exercises a part of the brain that is hard to find through other disciplines. Aside from that, it’s just a ton of fun. It’s similar to cooking, in that you’re able to take a set of pieces that don’t mean anything on their own, and put them together to make something awesome.” – Jake Byman, Senior Software Engineer

What are the different types of code?

Go to the top

There are loads of different coding languages, and you’d by no means be expected to learn them all. For someone looking to run a website, there are four main languages that would be good to have under your belt. Don’t be intimidated by that number, as you won’t need to be an absolute expert in all of them – it would just be nice to have a basic understanding.

The four best languages to know are:

HTML

HTML is technically what’s known as a “markup,” rather than a language – but for the sake of simplicity, it’s lumped in here. This is the content of the site at its most basic level. Text, buttons, and formatting are all controlled using HTML, which stands for “Hypertext Markup Language.”

CSS

CSS stands for “Cascading Style Sheets,” and controls what the content of the site looks like. CSS is in charge of the website’s colors, fonts, sizes, etc. If you can see it, it’s probably under the control of CSS in some way.

JavaScript

JavaScript controls most of the interactions on the site. If HTML creates a button, and CSS dictates what it looks like, then JavaScript controls what happens when that button is pressed.

PHP

The first three discussed here are known as front end languages, since they control what happens on the site itself. PHP, short for Hypertext Preprocessor, is a backend language, meaning it governs things like login, user accounts, and emails. This is the power behind the scenes that a user would never see, but would rely on heavily.

“Most people think of websites as having a front end and a backend, the frontend being what you see (HTML, CSS, JavaScript), and the backend governing the behavior and data of the site (e.g. PHP, Java, Python).

“If you’re spinning up a website completely on your own, you also need to maintain the cloud infrastructure (e.g. provisioning EC2 instances, DNS, SSL certificates, etc.), as well as a deployment pipeline. Paying for hosting services can be worth it if you don’t want to spend the time maintaining all the pieces of the site.” – Jake Byman, Senior Software Engineer

What resources are available to help you learn code?

Go to the top

There has been an enormous swell of people learning to code throughout the past decade. And with any new market, you can be sure that there are hundreds of people willing to take advantage of this demand.

That’s why there is no shortage of ways to learn coding. Let’s look at a few of the different services that can show you the way.

Codecademy

Key features:

• Run by: Ryzac Inc.
• Cost: Free plan, with a monthly premium plan priced at $39.99, or a yearly premium plan priced at around $240
• How many classes: 15+
• What we like: Very clean UX, extremely easy to navigate
• What we don’t like: It’s quite expensive
• Score out of 10: 8

Codecademy has a massively comprehensive list of courses on 15 programming languages. They have a page showcasing their most popular courses, and every language has an extensive track that will let you reach a good level of proficiency.

If you’re completely blind to where you even need to begin, they also offer a quiz that you can fill out, which will give you recommendations based on your assessment.

The downside is that taking advantage of its full range of features is quite pricey, with a year course running you $240, or a monthly fee of $40.

Code.org

Key features:

• Run by: Hadi and Ali Partovi
• Cost: Free
• How many classes: 20+
• What we like: It’s very good for children looking to start early
• What we don’t like: The classes are quite railroaded
• Score out of 10: 6

Code.org is a site focused purely on a K-12 coding education. If your child is interested in coding, or if you yourself are interested in learning coding in a more casual and playful setting, this website is a great place to start.

You can learn how to make small games and apps, and even see your finished product. For example, in a course about making a balloon popping game, they’d let you play the game first, and then take you along every step you’d need in order to program it.

However, since these courses are so structured, there isn’t a lot of room for your own experimentation – meaning you’d have to apply your skills outside of the courses. Also, since the site is aimed more towards children, a lot of the early tasks are more related to games than web design.

W3Schools

Key features:

• Run by: Refsnes Data
• Cost: Free
• How many classes: 14+
• What we like: It’s free and extremely comprehensive
• What we don’t like: It can be a bit of an information overload at times
• Score out of 10: 8

When we asked programmer Jake Byman what resources he recommended for learning, he said that W3Schools was the best place for absolute beginners. This website is its own entity, run independently of any large company or service, and exists purely to spread the love of programming.

Making an account is entirely free, and very user friendly! Click through their website to get a feel for how they teach programming, and see if it would be right for you.

“While I went to school for software development, I would say the majority of my programming ability is self-taught through trial and error. Honestly, to learn programming, you just need a laptop.

“Most software engineers, at least to some degree, have taught themselves how to code. Most tech companies don’t care if you’ve had a formal college education in computer science – all that matters is you’re able to show that you can write code. Plenty of my colleagues either didn’t go to college, or didn’t study computer science.” – Jake Byman, Senior Software Engineer

Our top tips for helping you to learn code

Go to the top

Now that we’ve gone over how to learn code, here are some smaller tips to wrap up.

Trial and error is your friend

Coding is one of the few skills that takes absolutely no toll if you make a mistake. If you’re learning to cook or paint and have a failed final product, those are spent resources that you can’t reclaim. But if you’ve butchered a segment of code, just delete it and never look back.

Since there’s nothing lost when you make a mistake when coding, don’t be afraid to try to implement anything you’ve learned and get creative with your skills. You’d be surprised at how many coders use brute force to fix a problem, since there’s nothing lost but time.

Try to focus on learning one language at a time

This might seem obvious, but try not to learn too much at once. Try to become proficient in one language before starting to learn another, otherwise you risk crossing your wires when implementing what you’ve learned.

Make sure to keep everything you learn in its distinct context, so you know what language to use and when to use it.

When asking which is the one you’d want to focus on, it’s a tricky question – ideally, you’ll want to cover all your bases. However, if you’re in a rush to launch a website for whatever reason, HTML is going to be the one you want to nail down first, since you’ll at least be able to get the majority of your content live.

However, the answer changes if you’re asking about the most important language to know well. For example, some sloppy HTML here and there won’t look great, but it won’t crash the site. But if you cut corners on your PHP, you risk important elements of your site going down, like users not being able to log in or check out.

Studying a concept doesn’t mean you understand it

“I hear and I forget. I see and I remember. I do and I understand.” – Confucius

When you were in math class, did you ever have a moment where you completely understood what the teacher was saying, but then when asked to implement the concept, you found yourself completely helpless?

The same can happen when you’re studying coding. When you’re reading about a certain method and thinking it sounds easy, make sure to give it a try while it’s fresh in your mind to make sure that you really understand how to use what you’re learning.

Be patient

“Any software engineer will likely give a new coder the same advice: be patient. Coding, while great, is one of the most frustrating things to learn. You’ll spend three hours staring at your code, wondering why it’s not working, only to be missing a semicolon somewhere. But when you finally get it working, it’s worth it.” – Jake Byman, Senior Software Engineer

Wrapping up

Go to the top

Coding is one of the world’s newest fields, and is growing with each passing day. There are dozens of ways to use code to your advantage in your everyday life, as well as in your website.

Like we mentioned, there are loads of resources you can use to learn how to effectively code, so get out there and learn how to make a website or app with your own two hands!