August 1, 2016

The Finley Code #2: Building a webpage is like transcribing a solo!

The Finley Code #2: Building a webpage is like transcribing a solo!

Week 2 of Html and CSS is officially done (just with week 2 not learning about the intricacies of Html and CSS, that is on-going;) and we have now started into the world of Javascript, but JS will come in a later post. For now HTML and CSS.

Portfolio building and musical transcription

Our first homework assignment found us designing a portfolio page all from scratch by following image examples from the course. We were tasked with creating three pages:

  1. An about me page - including a bio and profile picture
  2. A portfolio page - using images and banners over the image
  3. A contact page - using forms

Since it was built from scratch it was quite an experience tweaking little things to get the intended result. The whole process probably took over 30 hours and it really reminded me of the process I go through when learning a new cover song or transcribing a solo. The process is very methodical.

  1. When transcribing you start by identifying the key, the form and chord structure. Much like in Html, you start by laying out and structuring your Html with a header, body, footer, figuring out what colors and fonts you want to use essentially building your form or outline.
  2. Transcribing and writing down the melody lines are like filling in your Html structure with content, the meat and potatoes if you will (lingo used in the music world for the 3rd and 7th of a chord).
  3. Listening for the style of the player, adding your own flare, and practicing the whole solo with the record is like adding your CSS to your Html to give it style, make it unique and see it through to completion.

It it all about trial and error and discovery. With the mistakes you make as long as you learn from them you grow.

One solo I have transcribed that is so tasty is Wynton Kelly's solo on Miles Davis' Freddie Freeloader. See the Youtube clip below and his solo starts around 0:44.

You can see my portfolio site as submitted and deployed on Heroku. Nothing fancy but truly a ground up build.

Heroku

The site is hosted by Heroku, which is a deployment application that is free and really easy to use. However, the only interaction I have had with it is through the Terminal and Git (remember Git?) so it is a slight learning curve, but not much.

Fun in CSS

As discussed before there are basic elements in Html like a header or img or a (anchor link) all of which can receive stylings within the CSS sheet. However, you can also add interesting properties on top of these in the form of a:new property state. These are called Pseudo classes. They are used to define a special state of an element. So for example if you have a link you can change the properties of that link when you hover over it or when it is visited etc. Mozilla and W3Schools have great resources discussing all of the pseudo classes available and what their properties are.

A few that can be added to our link example are as follows:

:link = this will style your link while in its static state
:visited = this will style your link after the link is clicked
:hover = this will style your link while the cursor hovers over the link
:active = this will style your link when you click and hold the mouse on the link

It is important to note the order of these LVHA (link, visited, hover, active) because if they are not put in this order some may not work.

See the CodePen below that shows all of these pseudo classes in action:

See the Pen bZxJPx by Nigel Finley (@Nfinleymusic) on CodePen.

Media queries

Ever wonder how websites shrink to fit your tablet or phone? It is dictated by @media screen (max-width: _value_) property that lives at the bottom of your CSS. This allows for all of the properties to fit multiple different types of screen, like a tablet or mobile phone. Our next homework assignment involves making our portfolio page responsive. See what kind of responsiveness I implemented HERE. Click and drag your browser window making it smaller and larger to see the effect (right click and open the developer tools and see if you can find the media queries).

Bootstrap

So after building the portfolio site just using Html and CSS aka the 'hard way', we learned about Bootstrap which is a Html, CSS and Javascript framework built by Twitter that basically has a giant library of preset Html classes that have certain CSS styles and allow for built in Javascript animation. Things include pre-made navigation bars with drop down menus, or an easy way to put in grids into your page. Building a basic site just got a lot easier.

Now off to work on my second homework assignment part 2, building a portfolio page using Bootstrap.

More to come on the journey ahead.

Shout Outs