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:
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.
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.
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)
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.
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.
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?
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”
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.
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.
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:
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?
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:
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.
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.
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…
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.
Create your free account to unlock your custom reading experience.