What is HTML?

HTML stands for Hypertext Markup Language, which I know doesn’t really tell you anything, but I’d be remiss if I didn’t tell you what those letters stand for. It is not a programming language (it is a markup language), but many people still refer to it as such. It defines the structure of a web page and tells the browser what to display using HTML elements. These elements carry meaning, such as whether this line should be a heading or that bunch of text a list. All web pages use at least some HTML and if you decide to study web development, HTML is probably the first language you’ll learn.

History

The first version of HTML was written in 1993 and since then the language has undergone many changes through multiple versions. The current version is known as HTML5, officially released in 2014 though available for years before that. HTML5 is an important update for a few reasons. It includes graphic elements and elements which allow video and audio content to play in browsers. Previously this was achieved using third-party software such as Adobe Flash, which was not available on all platforms.

Elements

HTML elements are the items that make up a web page. These are headings, paragraphs, images, forms, and just about anything else you see. They are all displayed using tags, represented by greater and lesser than signs. For example, here is how you would write a paragraph in HTML:

<p>Hi, I'm a paragraph!</p>

The <p> part is referred to as the opening tag, and the </p> is the closing tag. The text in between is the only part that will be displayed on the web page and is known at the content.

Some elements are considered ‘self-closing’ because they have no content and do not need a separate closing tag. For example, a ‘break’ element looks like this:

<br>

That’s all! This creates a line break after another HTML element, which can be useful when you do not want to use the <p> tags. A line break has no content; all the information it needs is in the tag itself, so it is self-closing.

Attributes

All HTML elements can include attributes within their opening tag which provide additional information to the browser. Most attributes come in name/value pairs. Some elements have mandatory attributes such as the image element:

<img src="image_name.jpg" alt="image description">

The ‘src’ attribute tells the browser where to find the image to be displayed; the given filename is the value. The ‘alt’ attribute describes the image in the event the user is using a screen reader or is otherwise unable to view the image itself. There are also optional tags that can be added to describe the height or width, among other things.

Every HTML element has a separate list of attributes that can be applied, but there are global attributes which can be added to any element. One of these is the ‘style’ attribute added which allows you to change various visual elements such as the color, font weight and background color. However, as you’ll see in the upcoming CSS post this is not the best way to achieve such effects.

Learn More

If you’re interested in learning how to write HTML, check out the W3 Schools website which is a great place to start. You can also refer to the web development section of my resources list where I’ve linked some courses which will teach you HTML, among other things.

Sources

The Odin Project – Etch A Sketch

This is the project I’ve most recently completed as part of the Odin Project’s full stack JavaScript path. It was actually fun, perhaps because it’s kind of like a game.

I’m definitely not qualified to write a JavaScript tutorial but I’ll give you an overview of how I completed this project. The requirements are listed here.

CSS Grid

I began by creating the grid itself. I used CSS Grid, though there are other ways it can be done according to the project page. Initially the grid was set to 16 x 16 squares. In my HTML file I made a div with the id ‘grid’. Then in my JavaScript file I put it into a variable like this:

const grid = document.querySelector("#grid");

I used CSS to set the display to ‘grid’ and set a width and height.

Then I created a function that set the gridTemplateRows and gridTemplateColumns to repeat 16 times and take up ‘1fr’ of space. ‘1fr’ here means 1 fraction of the available space. So – as far as I know – if all parts are equal to ‘1fr’ then they will always be equal no matter how many there are. I knew this would be important for later when variable rows and columns needed to be accounted for.

This function then runs a for loop for the area of the grid. This is what makes the actual grid items. Each time it runs through it creates a div, gives it the class ‘gridBox’ and adds it to the grid. The loop looks like this:

for (let i = 0; i < size * size; i++) {
    let div = document.createElement("div");
    div.classList.add("gridBox");
    grid.appendChild(div);

Adding An Event Listener

The class ‘gridBox’ is used to create an event listener for every grid square, so that whenever the mouse goes over a square, it changes the color. This is done by adding a class to the classList; this class simply sets the background color to a pretty purple/magenta gradient. Here’s my event listener code:

gridBoxes = document.querySelectorAll(".gridBox");
gridBoxes.forEach((gridBox) => {
    gridBox.addEventListener("mouseover", (e) => {
        gridBox.classList.add("active");
    });
});

I did try changing the classList.add to classList.toggle so that if you went over the same square again it would remove the color, but I decided I liked it better this way.

Finishing Touches

Once I had the 16 x 16 grid working, it was fairly simple to make the size a number chosen by the user. Upon loading the page the user is asked the number of columns/rows they would like and then this number is stored in a variable, which is used to generate the grid.

Initially I just had a reset button which asked the user how many boxes they wanted this time and cleared the grid. But then my husband was like, “why can’t you just have a reset button that clears the grid and lets you keep the same size and add another button for changing the size?” This was simple enough to do so I added the other button to appease him.

Final Project

You can view my Etch A Sketch on GitHub pages here and the code is here. It’s not fancy but it works! I should mention that I know the grid itself does not resize so if your screen is small then you may have to scroll. This was something I did play with but I was having trouble making the variable rows/columns work properly with a responsive box. It wasn’t in the project description as a requirement so I left it as it is.

I’d also advise you not to choose a crazy number for the size. I think I put in 400 once and my browser couldn’t handle it. 100 is a pretty safe upper limit.

Please don’t think this is an example of good code either; I don’t think it’s bad but it’s likely not optimal.

I’m currently still working through the freeCodeCamp JavaScript section. Soon I’ll be up to the projects and then I can post about it!

FreeCodeCamp – Responsive Web Design

I completed this section of FreeCodeCamp about two months ago now, and I’ve been a bit slack trying to get through the next section which is all about JavaScript. So I thought maybe it would help to document my progress through the course after I finish each section. I think this will give me more motivation to finally get through the JavaScript part, because when I’m done I’ll be able to post all about it.

After you complete each section of FreeCodeCamp, you get a certificate. Some employers do like to see this kind of informal online certificate and FreeCodeCamp is probably known to many of them by now. Others won’t care. So I wouldn’t complete this specifically for the certificates. Complete the course for the knowledge you’ll gain.

You do also create a few projects at the end of each section, and these can be used in your portfolio. I struggle with finding project ideas that I care about, so this is a good way to get ideas and build something with the support of a community for if you get stuck. I plan on including links to all my own implementations of the projects here, no matter how bad I think they turned out.

Now onto the course. The Responsive Web Design part consists of eight sections.

Basic HTML and HTML5

This is exactly what it sounds like – a basic overview of HTML, including the new elements introduced in HTML5. Since I already knew HTML I went through this part very quickly, and I feel that even people who aren’t familiar with it are unlikely to struggle. Each lesson introduces a different element and is quick and simple to complete.

Basic CSS

Again, what it sounds like. You’ll learn the basic concepts of CSS and a few of the newer properties introduced in CSS3.

Although HTML is, I think, quite easy, CSS isn’t. It appears easy at first glance, but there is a lot more to it than changing colors and adding borders.

Applied Visual Design

Here you’ll learn more CSS. This section goes into more detail about the properties you can use to make your website more visually appealing. It also introduces the basic ways of positioning HTML elements using absolute and relative positioning and floating. This, to me, is where CSS can begin to get difficult. Having a good understanding of the box model will help.

Applied Accessibility

This section covers the ways you can make your website easier to navigate, especially for people who are vision-impaired. You will learn how you can make your website work better with screen readers, and how to choose color combinations that won’t make the site unusable for people who are colorblind.

Responsive Web Design Principles

This is a short section which tells you how to size your elements so that they will scale depending on the size of the screen. This is really important these days, since websites should work well on mobile devices, tablets and regular computer screens.

CSS Flexbox

Here you’ll learn how to use flexbox, a layout system which allows elements to shrink or grow to fill the space available to them. In theory, this allows you to make responsive layouts without having to use the floating and positioning you’ve covered so far.

My favorite use for flexbox is making footers sit at the bottom of a web page even if there’s very little content, something that’s harder than it sounds. If you’re interested, here’s an overview of how it can be done.

CSS Grid

This is another method of laying out web pages, this time using a two-dimensional grid. Compared to flexbox, I personally find grid a little awkward to use for a full page layout, but I think many people do use it for that purpose. I do find it great for things like image galleries or content that’s displayed in a tabular-type format but isn’t meant to be an actual table.

Responsive Web Design Projects

Here is where you’ll be given the specifications for the projects you need to complete before receiving your certificate. You will make:

You’ll use a test suite to ensure you’ve met all the requirements. The instructions given assume you’re using Codepen, but I created my projects in VS Code and uploaded them to Github. To make the test suite work you just have to put the script they give you into the body tag of your HTML document. It’s commented out in my projects but you can take a look if you are confused.

I didn’t bother trying to make the portfolio page more ‘real’ because I didn’t like the specifications I’d been given and didn’t want my actual portfolio to look like that. You probably shouldn’t have your intro line saying that you like purple on your real portfolio!

Now, onto the dreaded JavaScript!

The Odin Project – JavaScript Track

I’m very pleased with myself for thinking of a better title than simply ‘JavaScript Sucks’. I’ll likely have to use that one at some point, so at least now I still can. JavaScript just tends to drive me nuts. I don’t like the syntax. I feel like I always have a zillion closing brackets to keep track of and I get confused. And arrow functions are often hard to read. Or maybe I’m just dumb.

However, I actually did something reasonably fun today with JavaScript (on a beginner level; don’t get excited).

I’ve spent some time the last few days trying to improve my JavaScript because I suck at it. It’s also probably closer to what I ‘should’ be working on, since I don’t think Django is used at the place I might get a job. I’m definitely not done with Django, because I like it, and may need it after all if I fail and have to go looking for a job somewhere else. But it was time for a little break.

As I mentioned in my last post, the Odin Project has recently released a full stack JavaScript curriculum. Originally they only had a Ruby based track, which people say is very good, but I wasn’t interested in learning Ruby so I didn’t bother looking. Now I’m finally checking it out since I can always use some more help trying to learn the dreaded JavaScript. One really big bonus here is that all the content is completely free. I love free stuff.

The JavaScript track is split into five sections:

  • Web Development 101
  • JavaScript
  • HTML & CSS
  • Node.js
  • Getting Hired

For those interested, the Ruby track has a similar layout:

  • Web Development 101
  • Ruby Programming
  • Databases
  • Ruby on Rails
  • HTML & CSS
  • JavaScript
  • Getting Hired

I’m currently in the Web Development 101 section of the JavaScript track. It covers basic HTML, CSS and JavaScript, and how to use Git. It also takes you through setting up Ruby. This probably should be removed because who wants to go through all that when they aren’t planning on using it? As a Windows user, they were recommending I set up a virtual machine for installing Ruby, so I just skipped over all that stuff. I can see what they’ve done – the only actual new content is probably the Node.js section, the others are all just the same as their Ruby track. That’s fine but they should edit where required to keep the content relevant.

I skimmed over the non-JavaScript stuff so far since I didn’t need to study HTML, CSS or Git. From what I can see though, this is a great resource. There are explanations and exercises on the Odin Project’s website itself, as well as a bunch of projects, but there are also lots of links to other free resources that are meant to supplement the content provided.

I’ve been working through the JavaScript parts of the Web Development 101 section. I had to make a rock, paper, scissors game that ran in the console, and then I did a bunch of exercises and didn’t struggle too badly with them, so that was pretty cool. I did, however, get frustrated a few times with how awkward it was to do some things that are easy in Python.

Today I completed the next project which was to take the rock, paper, scissors game and put it into an actual web page. I sighed, as I usually do when faced with doing a bunch of JavaScript, and began. I did finish, but my code is horrible. I have this gigantic block of if statements. And a bunch of global variables. It’s probably twice as long as it should be. But it works!

I did cheat a little though. I have yes/no buttons that are hidden initially and then show up when you finish so that you can indicate whether or not you want to play again. When I try to add the class that hides them after the player selects ‘yes’, it can’t seem to see the global variable that I set for the element here:

const again = document.querySelector("#reset");

That exact same variable is accessed just fine by other functions using this:

again.classList.toggle("hidden");

Just not by my reset one. And yeah, I know what you’re probably thinking. What kind of variable name is ‘again’ anyway? Probably not a very good one. I ended up making it work by doing this instead of using the variable:

document.querySelector("#reset").classList.toggle("hidden");

This bothers me though. Obviously I’m doing something wrong. I’ll go back and refactor this, probably, and hopefully discover what the problem is.

If you want to see my code I’ll show you the Github link but otherwise I am not posting it on here because it’s so bad it’s embarrassing. Not only is the code messy but the web page isn’t very pretty either since I just don’t care a lot about front end stuff. I think it would be more beneficial for me to move on at this point then spend a bunch of time refactoring though, so I’m going to start work on the next project which is an Etch-A-Sketch. I have to admit that although I don’t like JavaScript, I do like making games, even if they are small and silly, so I’m glad that the projects have been games so far.

It’s getting to be about time to set up a job interview, but I’m scared. I’m worried about failing the technical test. I’m also not really a people person so I may just do something else wrong. But I guess I have to at least try.

I hope all you US people are having a great 4th of July. We’re celebrating by eating pizza because pizza is awesome.