Ignition: Week 6

HTML/CSS & Javascript

This week we deviated from Ruby to dive into HTML/CSS and Javascript. It was pretty straight forward and covered the basics, which was good for morale because I needed to feel like a pro, if even for only a week.

qtmxq

If you are unfamiliar with the basics of HTML/CSS and Javascript, please go to Free Code Camp and sign up. I would personally work through, at a minimum, HTML/CSS through Basic Javascript. This will give you a really great introduction to building webpages, from simple to as complex as you would like. By the end of it, you will have created 2 pages, one a static ‘tribute’ page and the second being a portfolio page – both to be done on Codepen.

As with all things coding, feel free to utilize the inspector tool built into Google Chrome to analyze HTML/CSS & JavascriptIf you are unfamiliar with it, just right click an element on a page and select ‘inspect‘. Here are a few resources on the topic:

Don’t say I never did nothin for ya. 

You really should get use to using this tool. I cannot stress how invaluable it is. One of the great things about it is you can edit a page in real-time. By actually editing the content or disabling/enabling content you can see how it affects the structure of the page and how different elements on the page react when you change things around. Do this frequently, and take note of the HTML and CSS of pages you really admire the layout of. There is no shame in copy/pasting for now, but when pasting it make it your own – tweak it and modify to give yourself a better understanding of what HTML/CSS is capable of, and how the two rely on one another.

As for myself, this week was nice because I had some prior experience with the big 3 before applying to Launch Academy. I worked through the links about on Free Code Camp and designed my own Portfolio page. I had a lot of fun doing it to! I also worked through a lot of Code Academy so I had a good grasp on the basics of Javascript prior to Launch, so I just had to recall them for the lessons for this week. This gave me an extra sense of confidence and optimism that felt really good, not gunna lie.

1wrt49z

Ok. You’re right. I am so sorry. So, so sorry. I never explained what the hell this crap it, my bad. In its more simple form HTML/CSS and Javascript can be summarized as follows.

HTML: It is the content of your page, w. It is letters and number and nothing fancy at all. It is what you are reading, almost entirely text but also designations for breaking up the page into different distinct sections to be later altered with CSS.

CSS: Also called Cascading Style Sheets. CSS makes your HTML look attractive.

mmll

Think text-color, text-size, fonts, borders, background images or colors. Anything remotely aesthetics involved is very likely CSS acting on its HTML counterpart. In short, remove CSS from the equation and you get crappy looking 1993 looking websites.

aint-nobody-got-time-for-that

Check out these resources:

Javascript: You know when you are on some website and you scroll past a certain point and then an AD pops up? That’s Javascript. It’s also Javascript when you perform some type of an event, say clicking somewhere on the page or moving the mouse away or into a specified location. Javascript gives our webpage functionality, it makes it more interactive. It’s also built into all of the modern web browsers so you don’t need to worry about whether or not your end-user is going to be able to access all your hard work in the form of Javascript because it’s a given. You cannot get away without knowing JS in the dev world because it is utterly ubiquitous – so you might as well learn what you can now!

Now, if you have been following the learning track or path that I have up until now, having grasped the basics of Ruby syntax and it’s logic you may be worried about jumping ahead to another language; Javascript. Here’s the thing, logic is logic is logic is logic. Simple. Each and every language is founded on the premise of logical reasoning, learning different languages is more of a matter of learning specific syntax than it is starting over again – the majority of what you have learned in Ruby WILL carry over into Javascript. 

An example:

Let’s write a little program. We want to print out every odd number from 1 to 100 – no even numbers. Let’s compare Javascript to Ruby and see if we see some similarities.

comparee

Logic: How is the logic the same here? In each example we are using loops. In Javascript we are using a ‘for‘ loop and in Ruby a ‘while‘ loop. In each example, we see a counter to ZERO, set the end of the loop to 100 and ask the loop to increment the value of our variable by one for every pass of the loop. So far so good!

What else? Well, we only want odd numbers, so how are we doing this? With an ‘if‘ statement of course. We do this because the loop is going to automatically increment the value of our variable but we only want some of those numbers, not all. So in each example, we ask that is the current value of our counter returns a remainder of 1 when divided by 2 than we want THAT number printed to our console.

The %, if you are unfamiliar with it, is called a modolo. It returns the remainder of a division of two numbers. So for instance, 4 % 2 == 0 this is because 2 goes into 4 (2) times and there is nothing left after that, but 5 % 2 equals 1 this is because 2 goes into 5 (2) times but the remainder is 1 5-4 = 1 and so this is an excellent way to determine if a given number is either odd or even! 

Syntax: How are the two examples different? We have established that the underlying logic is identical across the two languages. Essentially, the main difference is in how we output our numbers to the console. In Ruby it is done with the method ‘puts‘ (short for put string) whereas with Javascript we utilize something called ‘console.log()‘ – inside of those parenthesis is going to be whatever you would like printed to your console. 

If the ‘for‘ loop of Javascript is tripping you up, don’t be fooled! It is nothing more than a refactoring of an otherwise lengthier version of the loop. So, the order of that loop looks like this:

for (i = 0; i <= 100; i++)

for – initializes the loop (equivalent to ‘while’ in ruby)

i = 0 – same as in ruby initializing a variable to zero before the loop. It says, we have a variable called ‘i’ and it equals 0 right now.

i <= 100 – same as in ruby (while i <= 100) says, as long as the value is under this number continue with the loop party bruh.

i++ – same as in ruby where we have i += 1 anytime you see a ++ in ruby after a variable it is a shorthand way of saying increment this number by 1. There are other kinds of incrementing and decrementing too though, by 5 or 10 or however much your heart desires my dear friend.

wow-cool

See that? Not so bad! Like I said previously, the logic of programming is something that you get to take with you whenever you pick up a different language. Of course, the benefit of different languages is what they are built for and what they are capable of performing, but the logic is all the same – stick to the principles that you already know and focus on the syntax and it will come to you a lot faster than you may think!

Until next time friends!

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s