Fun Skillcrush Responsive Design Activity

As discussed in a previous post I am currently making my way through the second course of my online WordPress bootcamp (Skillcrush), Responsive Web Development.  After learning enough of the basics in the first course to launch a static site (melindagordon.online), I knew that I’d have to finally tackle responsive design next and I was (a bit still am but less so) pretty intimidated.  In the first week Skillcrush introduced a simple exercise that made the topic a lot more approachable for me, and I want to share that with you.

The Skillcrush explanation in a nutshell is that the current approach is to design a site “mobile first.”  Basically create a site specifically for the smallest screen your users will have.  Then, use “break points” representing a jump in screen size like mobile to tablet, tablet to laptop, and laptop to desktop.  You modify your design as needed for the new screen type, translate it to CSS, and then stick it at the end of your existing CSS for mobile.  Set that segment of your CSS to kick in only when the user’s screen size hits a specified break point.  Rinse and repeat.

If you want to know what I am talking about just minimize your browser window so it looks the size of your smartphone, then stretch it out and watch things happen (assuming you are looking at a responsive site of course).

Anyway so to make their point clear they had us to do an activity where we divided the web page into different colored blocks and then change the blocks to a different set of colors for each of the major breaking points.  Very simple but also very cool for a newbie to get to see.  Here is my example:

Mobile

mobile

Tablet:

tablet-safe

Laptop:

laptop-safe

See how the “site” goes from one column, to two columns, to three?  This is something I had seen many times before with actual websites but stripping out the content and just looking at the colors made it seem a lot less scary – hope it does for you too!

Advertisements

General Assembly: Intro to JavaScript

generalassembly-open-graph-safe

I spent the majority of my Saturday this weekend at an Introduction to JavaScript workshop at the General Assembly campus in Seattle.  Taken from the General Assembly website: “General Assembly is a pioneer in education and career transformation, specializing in today’s most in-demand skills. The leading source for training, staffing, and career transitions, we foster a flourishing community of professionals pursuing careers they love.”

This was my first time at General Assembly Seattle.  It is in the heart of downtown, in a older marble hallway style downtown building with a security guard, very different from the nearby hipster Galvanize space.  However, once you actually get up to the third floor and you are in the General Assembly offices…pretty much the same.  Basically a hybrid of startup and community college.

gaintrotojs-safe

The workshop I attended was 6 hours, from 10 am – 2 pm, with a 30 minute break for lunch.  The workshop costs $120 but I bought it around Black Friday/Cyber Monday for 50% off.  I have done a few intro JS courses online and attended a free 1 hour Intro to JS course at Galvanize but this is the first in person course I have paid for.  My goal was to use it as a barometer for what I had learned so far and hopefully cement some of my previous learning.

How did it go?  Well I pretty much lucked out.  It seems that often these things are led by a student at the school or recent graduate, which has its benefits, but we happened to have an instructor with both a formal computer science and math education plus a full career as a programmer/manager of programmers at Microsoft.  The best part of the workshop was the incredibly in depth answers he was able to give us no matter what question we asked.  It was awesome!  I am going to poke around for opportunities that are similar to office hours with experienced programmers because I thought it was a really valuable experience.  I would definitely have paid just to sit in a classroom with that guy for 6 hours and ask general questions.

If you are curious about what we covered here are the buzz words for you:

  • Flowcharts
  • Pseudo-code
  • History and future of JavaScript
  • Data Types
  • Variables
  • Operators
  • Conditionals
  • Functions
  • Arrays
  • Loops
  • Objects

Find that list intimidating?  I did too.  Take any intro to JavaScript you can find online (even a YouTube video) and you’ll get an overview of each of those words.  Do that enough times and it isn’t scary anymore 🙂

Galvanize: Intro to JavaScript

galvanize-safe

Tonight I went to a free Introduction to JavaScript course courtesy of Galvanize Seattle.  Free for everyone, not me in particular, just in case you thought I had that kind of pull in this town 🙂

This is my third visit to the Seattle Galvanize campus.  The first time I popped in during an art walk hoping they’d let me take a look around (they didn’t)  and the second time I went to an info session for their Web Development Immersive.  I realize they do these free sessions for business reasons and not just out of the kindness of their hearts, but I still think it is a really cool thing for the community and I am happy to take advantage of it.

As expected we learned the very, very basics of JavaScript, but what wasn’t expected was the level of support in the room – the community evangelist (I think that is the right title) was there to give us an intro and there was also an instructor and three student helpers.

We walked away with a scrappy but fun rock, paper, scissors application and knowledge of some basic syntax and variables.  Also there was free coffee and snacks.  If you are in Seattle go check out one of their many free events!  Galvanize has campuses in other U.S. cities so if you are in Austin, Phoenix, New York, etc. you could also check them out.