Self-Taught Developer: How To Code Like A Pro 3/5– 11 HTML & CSS Intro & Resources For Beginners

Use this as your guide and reference as you start your Web Development journey.

Image for post

Don’t forget to read the previous part of this series,

Part 2: Self-Taught Developer: How To Code Like A Pro 2/5–10 VSCode Extensions

Part 1: Self-Taught Developer: How To Code Like A Pro 1/5–Best 5 Code Editors

This will serve as an introduction to HTML and CSS, and of course, you can use this as your reference in the future whenever you need to review or refresh your syntax and understanding.

First, Programming Language is a way of communicating with software, and through communicating, we use these languages to be able to make a website look in a certain way we wanted it to, or in most cases, we use these languages for engagement between the users and the program, and in this reading, we will learn how HTML, CSS, and Javascript interact and communicate to provide a good user experience with technology, in which in this case would be Websites.

So grab a coffee, take your most comfortable seat position, and let’s get to work! :)

Image for post
photo credit to codeanalogies

HTML, CSS, and Javascript are the fundamentals of Web Development followed by learning Database SQL, and I mentioned Database because it’s very important so you can understand how the Backend works too. In case you are not yet familiar with them, here’s a quick introduction so we will be on the same page.

HTML and CSS are technically not programming languages, they are just page structures and stylings. On the other hand, Javascript is where the magic happens, because this is when logic, data structures, and manipulation occurs.

HyperText Markup Language (HTML) as defined, is a markup language used to describe the content in a document, webpage. Its main purpose is to build the User Interface structure. It provides the basic structure of websites, which will then be enhanced by CSS and Javascript.

HTML — is for marking up content. Here’s a sample HTML markup.

<p id='some-paragraph'>This is a paragraph sample for html.</p>

Cascading Style Sheets(CSS)

CSS — is for formatting that marked-up content. This is for Presentation, Formatting, and layout.

Here’s an example of how you design the markup, which is adding design on your paragraph tag:

p {
font-size: 20px;
color: blue;
}

JavaScript (JS)

Javascript — is for making that content and formatting interactive. and adding some logic for its behavior and function.

Here’s a sample Javascript code this code is just adding a listener if the user clicks it will then show the text ‘You clicked it!’

var p = document.getElementById('some-paragraph');
p.addEventListener('click', function(event) {
p.innerHTML = 'You clicked it!';
});
Image for post

And those 3 combined are the languages and fundamentals that runs the web, they may exist together but they were designed for a very specific task, so you need to understand how they interact to each other, how they function and how are they dependent with each other to fully understand the overall structure of Web Development.

They are different but they interact with each other in some way, just remember this analogy: HTML and CSS is for the appearance, HTML is the structure or the walls of the house, CSS is for the color of the walls, and JS is the creator of the function, for example, you wanted to add a door, so you need to do some code on what will happen to the door once it’s opened and once it’s closed, it’s behavior will be dependent on how you code your javascript, make sense?

Image for post
photo credit to mozilla.org

And here is a sample of its file structure on its most basic.

Image for post
photo credit to codeanalogies

Another thing to remember is that HTML, CSS, and JS are only just the introductory or a prerequisite for becoming a Web Developer, there will be several more skills that you needed to master or learn along the way, but this is a solid start!

But don’t get overwhelmed, Mastering these fundamentals are the best way to becoming a Professional Web Developer and soon enough if you choose to pursue into more advance path and become a Mobile Developer or Software Developer, these fundamentals will give you a solid base.

There are a lot of Html tags, and whenever you forgot some tags you can use this as your reference, bookmark it too.

1 — HTML Cheatsheet

2 — HTML for Beginners

3 — HTML Crash Course for Absolute Beginners 2020

4 — CSS Cheatsheet

5 — CSS Tutorial Includes Flexbox and CSS Grid

6 — CSS Zero To Hero

7 — Javascript Programming Tutorial Course for Beginners

8 — Javascript Fundamentals for Absolute Beginners

9 — Learn HTML5 and CSS3 From Scratch

10 — The 2020 FrontEnd Developer Crash Course for Absolute Beginners

Bonus: Check out this 2020 Frontend Course for beginners! This is a good course to start connecting all those 3 languages, Good Luck!

11 — Introduction to Chrome Developer Tools

Browsers are very crucial when it comes to translating codes, browsers such as Google Chrome, Firefox, Safari, etc are those what we can see and interact in our screens if you are going to look closely, in Web Development, codes are nothing without these browsers, it is when the codes are being translated by the browser that creates magic.

Google Chrome is a rich and powerful web browser, and this will help you make it easier for editing small changes in your styling. Here’s a solid reference to know more about making Chrome Developer tools to its fullest.

Written by

Software/Mobile Developer 🇵🇭

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store