back to all posts

Vanilla Quickstart

by jonathan barrios / August 9th, 2019

How do I start learning Web Development?

Hey there! I'm Jonathan, a full-stack JavaScript web developer and educator writing about web development, music and machine learning in a conversational style. If you want to learn modern web development, learn the core technologies then build a bunch of stuff. In this article, we'll learn about the Internet, HTML, CSS, and vanilla JavaScript. After getting the grasp of HTML, CSS and JavaScript, it helps to build projects like Dog Walker to retain what you learned. Follow me on twitter at @_jonathan_codes for more articles and tutorials on modern web development.

DOG WALKER

What Is The Internet?

HTML 005 I like to imagine a global network of computers sending numbers back and forth, quickly and efficiently. At the end of the day, binary is the foundation of all computer hardware and software. While that might sound intimidating, HTML, CSS, and JavaScript were made with humans in mind. I hope you feel more comfortable moving forward knowing that programming languages were made for people like you and me.

HTML 010

What Is a Website?

Essentially, a website is a collection of files that live somewhere on the internet. Computers connected to the internet are called clients and servers and to share your website files, you'll need to find a home like a 'host' server that will 'host' your website files making them accessible on the web.

HTML 015

We can think of a website as files on someone else's computer that can be accessed by an IP address (i.e 74.125.224.72) or domain name, much like a phone number or contact name. We normally assign a domain name (i.e. learnthatcode.com) to an IP address so it's easy to find and remember. It's just a global internet 'phone book' called DNS or domain registry system.

When you type a domain name in the browser, your browser, or client, communicates to the server using the domain name that is assigned to a particular IP address. If a connection is established, the server will send the files requested and the browser will load the main HTML file, before it continues with the CSS and JavaScript files. These files enable the browser to render a beautiful and interactive website. Don't worry if this sounds confusing or complicated, all you need to take away from this is how the internet works at a high level, using words, without focusing on terminology. In due time, you will know what DNS, IP, HTTP, HTTPS, TCP/IP all mean and how to use them as a professional web developer.

What is TCP IP?

From Mozilla, "TCP (Transmission Control Protocol) is an important network protocol that lets two hosts connect and exchange data streams. TCP guarantees the delivery of data and packets in the same order as they were sent. Vint Cerf and Bob Kahn, who were DARPA scientists at the time, designed TCP in the 1970s."

When you buy a computer, TCP/IP is included, so you don't have to install anything. Your actual software might be different, but they use the same RFCs (Request for Commands), which is more or less the transport mechanism of TCP/IP protocols which is also part of HTTP(Hypertext Transfer Protocol). Last but not least, HTTPS(the secure layer) is also part of HTTP.

IMG

What is DNS?

DNS(Domain Name System) is the Internet's way of converting alphabetic names into numeric IP addresses, an internet phone book of sorts. Again from Mozilla, "DNS (Domain Name System) translates easy-to-recall domain names to the numerical IP addresses needed to find a particular computer service on the Internet or private network."

The Difference Between Servers and Web Servers

IMG webserver is a piece of software that often runs on a piece of hardware called a server that offers services to a user, usually referred to as the client. A server, on the other hand, is a piece of hardware that lives in a room full of computers, commonly known as a data center.

What is HTML?

IMG It's easy to compare HTML to a structure that holds everything together much like a blueprint. Notice how it lacks a finished appearance, color or design.

What is CSS?

IMG Pure HTML websites don't look so great because they lack style, design, and interactivity. You'll need to add some CSS styling to welcome your audience to stay and have a look around. Websites styled with CSS look much, much better than websites without any CSS.

What is JavaScript?

IMG JavaScript is a scripting language, primarily for the Web. It is used to enhance HTML pages and is commonly found embedded in HTML code. After learning CSS, learning JavaScript is a solid and logical next step.

IMG

Follow me on Twitter @_jonathan_codes

back to all posts