Front-end of Web Development up to week 6 of 12

Enough of my wax poetic. Here’s a brief overview of what I’ve learned in the last 6 weeks (half of my journey through the 12-week program at MakerSquare) from the front-end side of web development while at MakerSquare. I will next focus on back-end side and then a comparison between the two.

Front-end web development typically considers the visual, design, and interactive portions of a website or application, with a wink to to the hidden background running of database and server management. While at MakerSquare, I’ve learned how HTML, CSS (SASS and SCSS), and Javascript all work together to create a website, and how one can use nearly all these languages to itself to create a website. This was an incredible concept to me since I believed that a website must consist of both types of front-end and back-end software compromises. For example, Flip Stewart (one of our instructors at MakerSquare) taught us how AngularJS javascript framework and Firebase (online app and API for storing & syncing data) unites to provide a three-way data binding of HTML, Javascript, and Firebase backend. That’s the only pieces of software you need (pretty much).

This is the progression of knowledge I’ve learned:frontend

Obviously, one could argue the order but this how I saw my knowledge mountain progress. Without the prior component, I don’t think I would have understood as clearly. I know I’m just a newbie at this, but the vast amount of open source software and how it has allowed me to expand my knowledge of data abstraction is astounding.

As pa`rt of my culmination of knowledge, I built a simple language translator with a chatroom to speak in this alien, constructed language called Elian, which I plan to explain more in-depth at another point in time.

To explain the figure above more clearly, HTML was the skeleton, CSS was the skin (with SASS/SCSS being specialized tools that helped apply the skin), and Foundation/Bootstrap were the robots applying more beauty and curvaceous features. Javascript and jQuery worked jointly to apply life and movement to my special humanoid. Jasmine was my diagnostic tool to test the features of my creation. AJAX and Node.js were specialized auxiliary features integrated also. All this aggregates into the union of YGAF and eventually fleshing the humanoid as a fully-fledged and working application!

AngularJS is a MVC framework using HTML, CSS, and Javascript. The Model, View, and Controller are an all-in-one package with HTML templates presenting the View while the Model and Controller application logic are combined with Javascript language.

Advertisements

Leave a Reply

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