Setup Your Computer For Web Development

Eddy Chung — Sat, 29 Aug 2020 20:30:35 +0000

Let’s set up your computer so it’s ready to code.

I recommend the Atom text editor for coding.

Watch this video to see how to get yourself setup.

Code Explained

HTML stands for HyperText Markup Language. It’s used to create every webpage. It defines the structure and the content of a page.

Tags are what HTML uses to define these structures. Tag names are surrounded by <>, also known as angle brackets.

Angle brackets are the greater than and less than signs, above the period (.) and comma button (,) on most keyboards.

Tags typically have an opening tag and a closing tag (there are some exceptions to this rule).

All HTML files must start and end with an html tag.

<html>
</html>

Closing tags in HTML have a ‘/’ after the first angled bracket.

To display something in the browser, you should enclose the content inside body tags.

<html>
  <body>
    Hello HTML! 
  </body>
</html>

Notice how we start to indent our HTML code here. This makes it easier to read. The indents represent what tag we are “inside”. It’s clear that the body tag is inside the html tag here, and that our sentence “Hello HTML!” is inside the body tag.

The last tag that was used in the video was a heading 1 tag. There are 6 heading tags in HTML from h1 all the way to h6. We’ll look into this more in the next lesson.

<html>
  <body>
    <h1>Heading 1!</h1>
    Hello HTML! 
  </body>
</html>

Hotkeys

CMD + S / CTRL + S to save
CMD + R / CTRL + R to refresh your browser

Action Items

Before proceeding you should have completed the following:

Installed Atom on your computer
Opened Atom and created a website.html file
Added the code in this lesson to your website.html file
Loaded website.html in your browser (Google Chrome is recommended)
Modified the code (simply change the text), saved it and refreshed your browser to see the change.

Once you’ve completed these steps and are comfortable with how everything works, you’re ready to move on to the next lesson.

If you have any questions, please let me know – email me eddy@risingblock.com

HTML Basics With Cheatsheet

Eddy Chung — Fri, 28 Aug 2020 02:05:13 +0000

In this post, we’re going to cover HTML basics. Download the cheatsheet for HTML basics here.

What is HTML?

HTML is the structure & content of the webpage.

This includes the words, buttons, images, lists, forms and more.

It does not include styling like padding, sizing, grids, margins, fonts, etc.

HTML Tags

Let’s do a deep dive into the basic HTML tags.

HTML & Body Tag

All your HTML code should be enclosed in html tags.

Anything visible on the screen should be enclosed inside a body tag. Otherwise, you could run into some unexpected bugs on some browsers.

So let’s make our basic website like this:

Remember to save your file in your text editor & refresh your page in your browser after every change.

Headings

There are 6 heading tags in HTML. They go from h1 all the way to h6. H1 is the largest heading, think of it as the page title. H2 is the subtitle and so on for h3, h4, h5, h6.

Try adding these headers to your website:

Divs

Dividers or divs separate your page into different sections. They act as containers to group together HTML elements.

By themselves, they don’t have any visual effect.

Divs can contain any kind or combination of HTML elements. I would say divs are the most used element in HTML.

Let’s modify our website to include some divs.

Notice how the spacing of our HTML file now. We do this so it’s easy to read and we can easily tell what’s inside each div. It is recommended you do the same. Atom even has a beautify plugin to do this for you automatically.

You may think this kind of useless, the website looks the exact same. So I’m going to cheat a little and add some background color so you can visually see why this would be important.

Don’t worry too much about the colors right now – I’ll be teaching you that in the CSS posts.

The main takeaway is that divs allow us to break our web page into different sections.

Paragraphs

Paragraphs can be created by using the p tag. They have some space before and after – like a paragraph in word document.

Try adding some paragraphs to your website.

Spans

Spans are inline elements, unlike paragraphs there is no space before and after them.

It’s used to group elements inline – kind of like an inline div. There is no visual representation of a span by itself.

Try it out:

Like the div, I’m going to cheat a bit and add a background color so you can “see” the span.

Don’t worry, we’ll be covering how to add colors soon.

Bold

The bold tag is a simple b. It makes text bold.

Italics

The italics tag is a simple i. Makes text italics.

Line break

The line break tag is a br. This adds a new line. This is a special tag because it is “self-closing”. The opening tag and the closing tag are the same! That’s why we have the slash after the “br”. Note: The self-closing slash is optional.

Lists

In HTML, there are two kinds of lists, ordered and unordered lists.

Ordered List

You can think of ordered lists as numbered lists. Just like this:

One
Two
Three

Ordered lists use the tag ol. Lists in HTML must contain list items, which we represent with the li tag.

Unordered List

You can think of unordered lists as bullet points:

Just
Like
This

Unordered lists use the tag ul. They also contain list items, which use the same tag li.

Multi-media

Images

They say an image is worth a thousand words…

Here’s how you add them in HTML. Use the img tag but then set the attribute src to the URL. I’m going to use an image I uploaded to imgur.com (a free image uploading website).

Notice that the image tag is also self-closing, we add a “/” to the end of the tag.

The direct URL to the image is surrounded in quotes (“”) and set to the src with an equal sign (=).

Note that the image location must be direct and end in an image extension (for example: .jpg, .png, .gif).

To get the direct image link to any image the internet, right click it in your browser and select Copy Image Address.

Videos

To add a video, use the video tag. You’ll have to set the src to a direct link to the video. Also, remember to add the controls attribute, otherwise, the user will not be able to play the video.

Not all browsers support the video tag. You’ll want to change the video tag from a self-closing one to a normal tag. Inside this video tag, you’ll write an error message if the browser cannot play the video.

Challenge

Try making a website with all of the HTML elements listed on this page!

Make it about whatever you want, your favorite hobby, or something work-related.

Download the cheatsheet for HTML basics here.

DEV Community: Eddy Chung