Episode 22: A kick off into basics of HTML and CSS

A quick update,

After going through closely five weeks of coding, I have concluded I am totally a Front-End Developer. The week of databases (last week) murdered me, and it’s a nightmare I know I have to sink into. Like, If I had to order my strongest to my weakest weeks at Makers, it would be the following:

• Welcome to the Web (HTTP/Browser)
• Javascript (This week, surprisingly)
• Object Orientated Design (Ruby code )
• Oystercard challenge (More Ruby principles & testing)
• LIFE
• Databases

Yes, my life seems way easier than understanding and implementing Databases. Although that this week is where the walkthroughs end, this blog is going to be about happy stuff. Happy stuff, by which I mean is code a Front-End Developer should touch on.

From this blog post onwards, I’ll be touching on bits of HTML, CSS, Javascript and more cool things that a supposed “front-end developer” is meant to know.

You can’t really tell where the box ends, but it’s a website! Yeah, doesn’t it look pretty? (Why, thank you). Today, this blog post is going to kick off into the world of HTML and CSS, and hopefully will kick me off into exploring this further in the blog posts to come.

HTML? What is it ?

Hypertext MarkUp Language is the coding language we use to print our data on screen. It basically is a connector of actual logic code (Ruby, Javascript) and lays out the coding logic on a page. They can be in forms of buttons, fill ins, shapes, text…and much more I assume.

CSS? What is it ?

Cascading style sheets is what we link our HTML files to, to make it look pretty. We can add different style attributes and features to each element in our HTML code. It’s basically the ultimate design feature that is used to make websites look good.

Whoever thinks design is not important or vital, I shame you. Sure, it’s vital to get an app or a website working. However, when you are in the market where everyone is making “something that works”, how else will your website or app stand out. Design, and it’s so important how a web or app looks given it defines the choice of whether the user uses it or not. Can you argue with me there? (End of design rant)

Let’s take a look at the code shall we…

This is our HTML file for the website above

In our html file, we alway have a head and we always have a body section. In the head section, this is where we will put all our java/ruby code that we require or need for our code to run. Whether it is requiring files or packages, or css files, this is what the head section is used for.

In our body file, this is where all our elements will go and be listed on the page. Once we link all our java or ruby code to our html file, we can then list out the elements (such as buttons, fill in forms) along with the text so that everything in our java/ruby code is connected to our display page.

This is part of our CSS file for the moment.

Although I’m not showing you my entire CSS file at the moment, this picture is a great example because you can connect your styling to HTML elements ( h1, h4, body) or you can connect them to HTML class (.number). Will mention this later on.

How do we even link our HTML and CSS code together?

I always get frustrated whenever I talk about this because it took me a day to figure this out when it was one simple line.

As we put “files we have to require” in the head section, we will put this one liner in the head section. So what do we have here?

• We have the rel= “stylesheet” which defines that this line of code, is going to be linking a stylesheet! If you don’t do this, it just ends up typing out that line as boring black text.
• Then, the type = “text/css” defines that this style sheet is going to be in CSS as I assume one would make this because there could be different types of code you could use to style?
• Lastly, and this is important: “href = “style.css” where we will ink our css file to our html file.

Note: When you are normally coding with a lot of files, we normally put all our CSS files in a ‘Style folder’ so we know all our CSS files will be there. I believe you then have to say “href = “style/style.css” to tell the program, hey this “style.css” is in the “style folder”

Let’s look at the CSS code line by line (or section would be better actually):

In the body section, we are setting our margin and padding to zero. What is this?

If you inspect any page and look in elements, a little box will turn up that is layered with different boxes and different colours. I believe, by default, a website or web page has a set margin and set padding so that you can split your content with equal space.

As designers turn coders or design-coders, the power of design comes when we can edit everything, down to every single text and element in our HTML.

Having done a few projects, I always love setting the margin and padding to zero because you then know that you have no spaces on your web page. I mean, if you don’t, you’ll be experimenting what the space range is on your website every-time. Sigh, it’s always good to have an empty canvas with nothing that will disturb you or shock you.

Next, we have the h1 feature:

H1 : This means that it’s a header. There is h1 to h7, and they come as default text sizes to show hierarchy on a web page. In html, it’s normally written as <h1></h1> and this goes for most elements in html. As I love to say…

When one tag opens, one tag will close

We have the following features listed, which some are pretty simple:

• font-size (Size of font. Although headers come in default fonts, you can still change their size which is pretty cool.)
• font-family(You have Arial, Times, Georgia, Comic Sans — NEVER DO COMIC SANS — )
• color (this means font color, as background-color would be “background-color”)
• position- absolute; (This is quite an interesting one we will talk about, and it comes with the rest below..)

For all CSS documentation, you will always write this syntax:

element {

font-size: 20px;

}

position is an interesting attribute because it allows you to move stuff on the page. Position settings such as (“fixed”, “static” or “initial”) will not allow you to custom move your elements around as, hence their names. “initial” I believe means the default setting you set it to. I find using “absolute” puts your element in its own box, and thus it allows you to move that element wherever on the page.

Now, that we have position installed, we can then write the percentages of where it will move to. Although position has all four directions (top, bottom, right, left), we actually only need “left” and “top”. Why is this?

Well, if we pick the top feature, what would be top = 0% and what would be top = 100%? 0% top will be right at the top of the page whilst 100% will be at the bottom of the page! Hence, we don’t need a bottom at all. This is the same for needing only left, when we don’t need right.

You can do this for practically any html element in any html tag. However, what if you are not using a html tag or element? How are we gonna fit that in?

CLASSES.

As every code has classes, HTML has it’s own clever class feature too. Let’s look at this piece of code in my example:

Although we are using h4 for the degrees celcius, what about the span. Span, i this case is our number that is connecting from our javascript code. How would I style that? I’m not using any html tag or element. Yes, you can see that I’ve included it in a class and all I’ve typed is simp;y

class = “number”

Here, I have implanted that the css element that I will be editing for this element of HTML code is number. Now, if we look in our CSS code….

Will you look at that? Now I can edit stuff in my HTML, including the ones where I don’t use HTML elements or tags. However, I can already feel the next question come up…how do I then style multiple things in my code. That my friends, is called a <div> block.

Like how all coding languages have blocks, in html we have <div> and we can determine a class inside the div block. You can either section your code our in div files or we’ll do something more interesting, we’ll have a look at what I’ve used a div block for.

What is all this lingo? This is html for a circle. You recognise most of the syntax as I’ve mentioned it before except for three features.

moz-border-radius, -webkit-border-radius and border-radius. These are all “radius-ses” that is need for the circle. If you haven’t seen it yet, it’s the giant big blue circle behind the font.

You can create different shapes, depending on the different features you apply in the div block. (You can search links on how to do so).

However, let’s look at this in context and by context, i mean PRIORITY.

We can conclude that the circle is above all the content of the code (which are the buttons you see on screen). Does it matter what order you put your code in? Yes, it does as if we put it last in our code, our content will cover up all the content. It’s a tricky concept to get your mind around but I’ll try explain it in the best way possible.

If you come from any creative background, then this explanation will be easier for you to understand. If not, try see what I mean.

Have you ever used Photoshop or most creative softwares? If you haven’t that’s okay, I’ll go through it anyway.

In any creative program, or most I believe, there are things called layers. If you see the insert of more rectangles popping up, those are layers. This allows us to build stuff on top of each other. In other words, right now, the GIF above shows that we are only looking at one image. However, how we created that image are in layers.

It works the same way with CSS or HTML, when we are thinking when to put elements before or after. The higher you put an element in your body, it’s more likely to be the earlier layers and if you put it last, it will be the current layer you see and cover all the elements under in.

LETS LOOK AT A BUTTON.

A button is quite interesting to format in CSS because it is an interactive feature. A default button normally looks as such:

This is what HTML serves us, when we create a button function as such…

Buttons can be written in different ways, but this is one way to do them. Let’s take the power save button and have a look on what we’ve done with the CSS. Note: The class is called Save On.

What’s new here, is actually the padding. We know what padding is and does, but for a button, it’s important if we are going to stylize a button, that we give the text some space. I believe in padding it’s by height and width.

Note: Be careful how you size and pad you buttons, because users still need to be able to click on those buttons. Padding only gives you so much room for your button to be able to click. (As in it can only be clicked on the center).

Though, here’s a neat trick. As in our code, this button turns the PowerSaveMode On and the PowerSafeMode Off, what if we want the buttons to change colour if this happens. Ah! That is not for our CSS file unfortunately. This is because our CSS file nor our HTML file is in charge or as we coders say, our “controller” to view the files.

Our controller would have been done in JQUERY and Javascript.

Although, this is a post for another time, you can see the $ sign and the css implemented in the code somewhere…this is where our if statement comes in, and alters our CSS elements given that this JQUERY file is the controller where it links everything together…

Fun Fact of the Day:

It’s really crazy how in art school, code was an imaginary tool. It was like the alien lingo that was bestowed on us in 2017, and we were cavemen using it to make shapes or move a ball from one part of the screen to another.

After graduating from one of the top claimed art universities in London, Central Saint Martins, coding isn’t that much big of a deal (Talking about HTML, CSS and JAVASCRIPT here, by which I mean the FRONT END). Like anything to learn, it just takes time to pick up and the learning never ends.