A Mechanical Engineer’s journey through Software Engineering field

Beautifying Websites with CSS: Cascading Style Sheets

At the time of this writing, there was this poll conducted in the Sunday time wherein it concluded that artists were not deemed as an essential service. Some has even gone to say that without artist, entertainment steams such as Netflix, Youtube, Spotify and many others wouldn’t exist. This is true however on these online platform there is an overlooked aspect which is extremely important and often taken for granted and its comes from CSS (Cascading Style Sheets). Today we will be discussing about CSS; How it is used in conjunction with HTML to format and beautify website that we enjoy today. I will give my views that was mentioned earlier with regards to artists at the end of this blog.

Buzzword of the day

From my previous post; Front-end was mentioned several times and term used was UI and UX (User Interface and User Experience ). From a surface level perspective, this two terms could be used interchangeably but there is a clear definition. Simply put “UX is an umbrella that comprises of many subsets, which one of them is UI. Whatever your UI is will ultimately affect your UX.”. therefore, the UI component is the actual building blocks of a website or an application.

So what is UI then? UI is anything that contributes to the end experience of a user. This can be the font being used which decides the readability of the words, complimentary colour palette used within the webpage/app or even the layout/type of buttons used deeply affects the UX.

These small collective elements are so essential and compounding that when you visit/use a webpage/app with bad UI you will immediately notice it and in my eyes it is very artistic in nature. Hence without talented UI/UX developers, iconic websites and services would not have been noticeable at an instant.

See the vast impact that CSS has on a webpage! With that in mind, lets dive into some CSS basics to see how it interacts with HTML.

Basic Structure of CSS

Similar to HTML, CSS follows a ruleset which can be seen in the snippet below.

If you want to apply the CSS code to multiple tag it is as simple adding multiple tags in the selector (E.g h1,p,li). This means the styling from line 11-14 will be applied to <h1>, <p> and <li> tags in the link HTML file.

Then comes the question of unique areas of the HTML page that needs special attention? What if I want a particular <p></p> tag to be blue and the others <p></p> tag to be pink? With that you’ll need to use different element selectors. The common additional selector are called ID selectors (denoted by a “#”) and Class selector (denoted by a “.”). Lets see this in action the in following code snippet.

All in all there are many combinations of styles that one can use to beautify their websites and whatever that was discussed is just the tip of the iceberg and we have yet truly harness the power of CSS. What makes CSS powerful is that it enables web developers to create responsive websites with different layouts. This will be discussed in the next instalment of the blog. With that I hope to see you soon. Thanks and Bye!

The Beginning, HTML: Hypertext Markup Language

In the exictement of explaining and sharing what I’ve learnt during my journey, I have missed something really important and that is explaining most basic component of a website. Hypertext Markup Language or most commonly known as “HTML” is a language used by programmers to build up text in a website. It is the first building block of a website of which it is build upon but other languages and features such as Cascading Style Sheets (CSS), JavaScript(JS) and Bootstrap but that will be discussed in future posts. For now we will discuss the basics structure of HTML, the lines of codes that is commonly used and some fun and interesting features that you have seen or used everyday.

Buzz words

let us start by clearing a buzz word first. Front-end or Back-end is a term that you have heard if you would want to know about a little about coding. In the easiest sense Front-end programming is related to the presentation albeit the colours, layout and the ease of use of the website(aka User Interface[UI] and User Experience[UX]). Comparing it to the Back-end of which there are languages that communicates to servers and calls certain information that is needed at that point of time.An example of Front-end and Back-end that can be used in a daily context is of food.How the food looks, smells and presented on the plate is considered Front-end; How it is harvested, bought and transported is a Back-end process.Hence by definition HTML is a Front-end programming language and neither Front-end or Back-end is superior over one another. It is how these two work with one another is what matters in the end of the day.

Basic Structure of HTML

In HTML, lines of code are starts “<>” and ends with “</>” hence looking like this (<h1> Hello world </h1>) ; these are call tags and in every HTML page meta-tags are the bare necessities needed to ensure that a HTML file can run. These are the meta-tags that I mentioned.

Above, there are tags that I would draw some attention. mainly the <head></head> meta tags and the <body></body> meta-tags. For now just think of these meta-tags as 2 containers.
In the head meta-tag, important information is which is needed to be preloaded before the webpage is being displayed, it will be placed here. External links for styling (CSS) or Javascript(JS)
In the body meta-tag, this is where your writer content will be done. Your headers, paragraphs, buttons, image and other content are placed here.
These tags are then wrapped in <html></html> tag to complete the structure of the html file.

Commonly used tags in HTML

In html there are tags that are used more commonly that others and these are numerous. Going through via text will be very difficult, hence I will show a screenshot of where each of these tags goes with their functionalities written on the side. Remember just look out for the letter/word within <> and your good to go.

within the nav tag you’ll see <a></a>(anchoring tag) and the <ul><li></li></ul>(a list within an unordered list). The anchoring tag allows the linking of other html files when the link is clicked. The ul/li tag arranges the links in a very cleanly within the website. Cant visualise this? Here have a look! and yes I know it not much but this will be built up later on

Fig. 3 Header Navigation bar

Fig. 4 Content section with Footer navigation bar

within the section tag you’ll see the <h1></h1>(header tag) and the <p></p>(paragraph tag) these are tags that are used to display text based content within the website. the <br>(break tag) inserts a single line break within the block of text. The footer tag is self explanatory once you’ve read the header tag.Still cant visualise? Yeah I know it’s difficult at first but here you go!

Oh gosh that was a lot to take in innit? and yes it take a lot of work to put up a website however through the year web developers have found numerous shortcut to increase the speed in which website are designed. This will be discussed later on in my blog. If you’ve reach this far I thank you and I hope you’ve learnt something today =]

What is this blog about?

Being new to all this and not having touched programming since 2012 this blogs give readers a first impression of a beginner like me and trust me; I am no expert when coming to coding.

With the willingness to learn and try out something new I have convinced myself, to make the switch to tech through the coaxing of friends and casual interviews with strangers I’ve meet in career fairs. These sharing sessions are very inspiring and motivating and I wish to project that into writing. How inspiring?Just imagine an English teacher with kids learning how to code! Mind blowing I know!

Therefore the purpose of this blog is to document my journey through the landscape of software development from the culture, work ethic and tools that developers used. To educate people that coding isn’t as difficult as it seems to be, by taking real life examples, relating it to code and translating them to digestible bite sized chunks of information. Also explaining these concepts reinforces my understanding to what I’ve learn through this new career and it forces me to be liable to the information that is put out. Readers who are also going through this journey can also use this blog a streamline to which will benefit their own learning. Lastly,I hope that this blog will inspire those who want to do code as a career but are afraid to do so and to show that many have done it and themselves are capable.

The Importance of Functions

When writing code ensuring readability is of upmost importance and one way to ensure that is to write clean and neat code and not be DRY! (Do.Not.Repeat yourself). As such, functions are used to facilitate this.

“When should I use a function?” you might ask? When there is something that you would like to do repeatedly for an indefinite amount of times the use of a function is highly recommended.
For example think as functions of a vending machine which it can do anything you want it to do. You insert a coin(input) and the results appear(output). It is that simple. Below is a snippet of code that better explains the workings of functions

undefined

In line 1-2 var a and var b is used to cache information from the user. (Due to JavaScript loosely coupled variable declaration, var a & b are treated as string variable).

In line 9, function named “multiply(a,b)” has been invoked it takes the argument of variables ‘a’ and ‘b’ and parses it into the function multiply in line 4-7. Once the magic has been done, it shows the results to the user.

Some other neat things that you can do is placing a function within a function to compute a specific result you want and then return that said result. This is called a validator.

**As you can see within the function it can be anything and in this case its a addition mathematical operation named multiply see line 5(kudos if you caught that!)**Some other neat things that you can do is placing a function within a function to compute a specific result you want and then return that said result. This is called a validator.Although pretty short I hope this post find it useful to you in understanding some basics of code. Until next time, Bye bye!