

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