Code for Beginners
Have you ever worked with HTML before? This was my first time! If you've never edited code, it's actually easier than you think. As long as you learn the rules, and stick to them, anyone can learn how to read and edit basic code. Want to learn some basics? Keep reading!
What is code?
Code is used for communicating with computers, to put it simply. Humans use code to give computers instructions on what actions they need to perform. There are a few different types of code, depending on what you want to use it for, but I'll just describe 3 of them here.
HTML (Hypertext Markup Language) is the standard markup language for web pages. This is the language we use to create the structure and content of web pages. These elements tells the browser how to define headings, paragraphs, links, etc.
CSS (Cascading Style Sheets) is the language we use to design and style web pages. CSS describes how HTML elements are to be displayed on a screen and specifies the layout of web pages.
JavaScript is the world's most popular programming language. JavaScript programs the behavior of web pages.
What can you do with it?
Coding is used to create websites, webpages, programs, and the like. For my first coding exercise, I took my bio from this website and tried to figure out how to replicate it. My bio on this website was created with a drag and drop template on WordPress. Templates on Wordpress are cool, but they aren't fully customizable. Here's a screenshot of what my bio looks like currently. Looks good, right?
Bunch Media 'About Me' Page
How can you create content using code?
There are plenty of sources of open, free code for anyone to use. Along with plenty of websites that allow you to play around with code, without actually messing anything up. Nice, right? I've been using this super-useful website: W3Schools.com.
Let's look at the anatomy of HTML:
If you were writing code, and you wanted to create a paragraph that had the words, "Hello World!" in it, this is a line of code you would write. Each "line" of code is made up of elements, and these elements contain a few things. First, each element needs an opening tag. The opening tag tells the computer the specific action you want to start. In this instance, the <p> stands for: begin paragraph. Then, you fill your paragraph with whatever content you want to write. In this instance, they wanted to write "Hello World!". Now when you're finished with your paragraph, you need to tell the computer to close it. It's similar to opening, but this time you need to put a backslash to close it. The closing tag here is </p>. You're done with this line of code!
HTML Example and Rules:
Here is a simple example of HTML:
Example
Some rules to HTML are:
Every page needs to start with <!DOCTYPE html> <html> and end with </html>. This declaration defines that this document is an HTML5 document.
HTML tags are enclosed by brackets < >
Most tags require a closing tag <HTML> </HTML>
Tags must be nested correctly, if stacking. <B><I> Basic Rules</I></B>
HTML treats all white space as a single blank space
Coding my first page
There are a few programs you can write code in like Notepad, TextEdit, W3 Schools, and Dreamweaver. I used Dreamweaver since it is apart of the Adobe Suite. Dreamweaver is also nice to use because it displays the simulated web page as you type it in. Here's what my code looks like in Dreamweaver with the simulated page:
Dreamweaver
And here's a closer look at the code and what it turns into:
comparison
Where does it go?
So you've written some code. Now what? Next you need to use a FTP(File Transfer Protocol) program to save your web page(s) from your computer to your web host, remote site, or remote server. I used FileZilla, it's free to download. Here is a great tutorial here on how to upload your content from your computer to your website.
I've transferred my HTML file and corresponding image to my preferred host, and here is the resulting page:
My first coded page.
I know it's not beautiful, but hey, you gotta start somewhere! The structure is there, the image is there. The links work! My next step is to start designing and styling the page, using CSS. Overall, I had a fun time with learning code, so far.
Have you tried coding before? Are you an expert? Let me know in the comments!