What is CSS?

If you are unfamiliar with HTML then I recommend you read my ‘What is HTML?’ post first.

CSS stands for Cascading Style Sheets and it is a style sheet language that displays how the HTML elements on a page should be displayed. CSS, as the name suggests, dictates the style of the web page–the layout, the colors, the fonts, etc. It was designed so that the structure and visual appearance of web pages could be separate, which has a few benefits. For one, it’s easier to make changes to the website later on, and for another, using a separate CSS stylesheet makes it easy to apply the same style to multiple pages within a website without repeating the same lines.

History

CSS was first proposed in 1994 and there have been a few versions since the. The current version is CSS3, of which the earliest drafts were published in 1999. There are also a few newer modules such as Grid and Flexbox which are sometimes collectively referred to as CSS4, though this term is not official.

Selectors and Declarations

A selector refers to the HTML element you want to apply a style to. There is a wide range of types of selectors that you may end up using if you become a web developer, but for now we’ll just look at the most basic form.

After the selector come all the styles you want to apply to the targeted element, enclosed by curly braces. This part is known as the declaration block and each style within is a declaration.

The selector and the declaration block make up a CSS rule-set. Here is an example of a simple CSS rule-set which targets the paragraph element and sets the background color to purple and the margin to 20 pixels:

p {
    background-color: purple;
    margin: 20px;
}

The ‘p’ is the selector and all that follows is the declaration block. You can apply as many styles as you want in this way.

How to Include Styles

There are three different ways you can include CSS in your website.

Inline

This is when you add styles as an attribute of an HTML element. To add CSS so that a particular paragraph is colored red, for example, you would write this:

<p style="color:red;">I'm a red paragraph!</p>

This is not ideal as it means that if you want to have multiple red paragraphs you’ll have to add the attribute to each one. And then what happens if you want to change the color? You’d have to look for every red paragraph in your HTML and change them all individually.

Internal

An internal style, also known as embedded, is included in the head section of your HTML document. All style information for that particular page is included within style tags, for example:

<style>
    p {
        color: red;
    }
    h1 {
        font-weight: bold;
    }
</style>

This will make all paragraph elements on the page red, and all level one headings bold.

This is a better solution than using inline styles but you will still have to change the CSS on every page whenever you make an update. Additionally, if your website is large and multiple pages need the same styles, it’s a waste to be including all of this CSS on all of them.

External

External style sheets are what you are likely to use the most. Here the CSS is written in an entirely separate file with a .css extension. Then the HTML page just has to reference it in the head section like this:

<link rel="stylesheet" type="text/css" href="style.css">

When using an external stylesheet, you can write your CSS as usual but this time you don’t use the style tags.

Now if you need to make a stylistic change on your website–let’s say, you’ve decided you want your navigation bar to have a different background color–you only have to change one line of CSS and it will be applied to all pages that are linked to your style sheet.

Learn More

If you’re interested in learning how to write CSS, check out the W3 Schools website to get started. You can also refer to the web development section of my resources list where I’ve linked some courses which will teach you CSS, 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.