After Work Liquor & Learn: Front End Development

After Work Liquor & Learn: Front End Development

ZGM Calgary recently held our first Liquor & Learn event covering the topic of ‘Front End Development’. ZGM Developers, Iris Wong and Conlan Seder, used their witchcraft and wizardry development skills to blow our team away (i.e. went through the different languages that make up front end and what each of them do).

They did their best to describe HTML5, CSS3, SASS and Javascript in a way that everyone could understand. HTML is the markup language that functions as the website’s skeleton. CSS and SASS are stylesheet languages that flush out that skeleton to give it some style. Javascript is a programming language that controls the behavior and interactivity of the site, among other things. Put it all together and you get magic. The presentation finished up with a quick demonstration showing how you can build a skeleton out of HTML5 and flush it out with little or no content with CSS3/SASS to create different shapes and colors. Click through below to see how this come to life:

<section class="container">
<div class="person">
  <div class="head">♥‿♥</div>
  <div class="body-upper">
    <div class="arm-left"></div>
    <div class="body-chest"></div>
    <div class="arm-right"></div>
  </div>
  <div class="censored">CENSORED</div>
  <div class="body-lower">
    <div class="leg-left"></div>
    <div class="leg-right"></div>
  </div>
</div>
  <div class="twu-luv"></div>
  <div class="person">
  <div class="head">♥‿♥</div>
  <div class="body-upper">
    <div class="censored-top">CENSORED</div>
    <div class="arm-left"></div>
    <div class="body-chest"></div>
    <div class="arm-right"></div>
  </div>
  <div class="censored">CENSORED</div>
  <div class="body-lower">
    <div class="leg-left"></div>
    <div class="leg-right"></div>
  </div>
</div>
</div>

See the Pen XbXPGZ by ZGM (@zgm) on CodePen.

By giving fellow ZGMers a better understanding of what front end is, how it works, and what is possible, our digital team hopes that it will transform into even more projects using the cutting edge technology and ultimately more engaging websites for clients. Win-win!

Are you interested in starting your own front end development? Check out Code Academy to try it yourself!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>