Intro to Code Part IV – Responsive Design Workshop

The Octocat - the Github Logo

In Part Four of our Intro to Code series, we worked with two important technologies: Git, and the CSS rules that allow for responsive design.

Git is version control software and making good use of version control can seriously save your backside in a coding project. What version control does is to allow you to store repositories  or repos that maintain your code in a certain state. Then, if you add a feature that doesn’t work out, you can roll back to an earlier version very easily.

Version control can also be used for sophisticated collaborative efforts via branching, pull requests, and other techniques we won’t be working with in this class.

What we will be doing in class is cloning resources stored on Github and posting our own code to that same site. In fact, we started doing that in this class.

Our work with Git didn’t go super well in class due to some network problems, but once we had it functioning as much as possible we moved onto our hands-on project. Our challenge was to take a web page that had been designed with a laptop screen in mind and then to create the CSS media queries and associated rules necessary to make the site look good on both tablets and smart phones.

To complete this challenge, you’ll need the slides we used in class. In those slides, you’ll find a link to the site where you can clone our challenge project.

The slides talk a bit about using the device emulator in Chrome dev tools. We went over this live in class, but you can learn all about it right HERE.

You can also learn more about how CSS media queries work right HERE.

I’d also recommend taking the Learn Git class at Codecademy.

If you’re not familiar with the command line for your favorite operating system it is probably time to learn that as well. There are good links for this in the slides.

In short, there’s a lot to do this week! That’s web development, though. There is always more to learn.

Feeling overwhelmed? Just take it one thing at a time. For now, just clone the web page from the slide and see if you can complete the responsive design challenge. If cloning the page is throwing you off, you can download it as a zip file from Github instead.

Once you’ve got the challenge complete, head to the Git class. You should be able to complete that in a few hours.

Then, if you’ve still got time and you need to work with the command line, you can start one of those classes.

I hope you’ve enjoyed our introduction to HTML and CSS. As of next class, we’ll be leaving it behind for a while in order to focus on JavaScript but don’t worry, we’ll come back to it it later projects.

Code on!




Leave a Reply

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