1 of 18

Intro to Code Part IV

CodeSLO 2017

2 of 18

Everyone needs to install git

You did get the email, didn’t you???

Git for Windows: https://git-scm.com/download/win

Git for Mac: https://git-scm.com/download/mac

3 of 18

Everyone needs to have a github account

4 of 18

Create or navigate

Open up your command prompt or terminal, or, if you’re using Visual Studio Code try the (amazing) integrated terminal.

Create a directory (folder) for your CodeSLO projects, or navigate to that directory if you already have one.

You can use your GUI if you don’t know how to do this on the command line, but all developers should know at least the command line basics for their OS.

5 of 18

I think we’re a clone now

In the command line, enter the following command:

Git clone https://github.com/matt-codeslo/css-responsive.git intro-to-code-04

This should create a new directory called intro-to-code-04 with some new files inside. Let’s check it out!

6 of 18

Sweet! Now what?

Git is a version control software that is used to store different versions of your programs, which are called repositories, or “repos.”

Let’s create a Github repo for your new files using Github’s web interface.

7 of 18

It’s time we made a commit-ment

We’ve created the repo location, let’s go ahead and copy that from the Gihub web interface.

Now, in Visual Studio Code, let’s check out the git icon over on the left.

8 of 18

What do you mean you don’t use VS CodE?!?

If you’re on a different text-editor, enter the following commands in your terminal or command prompt:

git add . (don’t forget the dot!)

git commit -m “initial commit”

git remote add origin <address your copied from github>

9 of 18

Let’s get pushy

What we’ve done now is to initialize git and create a commit, which is a local repo, stored on our own computer.

Let’s push it to Gitub!

Either select “publish” from the VS Code menu, or enter the following command in your terminal:

git push -u origin master

10 of 18

There’s a lot more to Git

You’ve just gotten a taste of the power and convenience of Git, but learning Git is a deep topic that we can and have taught entire classes about.

This year we’re going to leave that up to Codecademy. See the link in homework!

For now, let’s get to work on our project! Open up index.html in your browser and take a look at what you downloaded.

11 of 18

Responsive design

You’ll want to use different CSS rules for mobile design than for desktop design. When you have a website that reacts to different viewports, that design is said to be responsive.

The heart of responsive design is the media query.

12 of 18

CSS Media Queries

Media queries go in your stylesheet and look like this:

@media (max-width: 600px){

.container{

width:90%;

}

}

13 of 18

Media Queries, cont.

Effectively, media queries allow you to re-write your CSS rules if the viewport is a certain width, or has certain properties.

There are many things you can query on, including width, the orientation of a mobile device, and more. For now, we’re only going to worry about width.

Let’s look at an example.

14 of 18

Using Chrome’s device emulator

Although it’s not as good as testing on an actual device, Chrome’s Devtools gives us a decent emulator for seeing what our pages would look like using different viewports.

Let’s take a look.

15 of 18

Let’s code!

Take a look at our Margaret Hamilton tribute page. It looks kind-of okay on a widescreen device like a laptop, but it isn’t quite as readable on a mobile device. We’re going to fix that.

16 of 18

Responsive Design challenge requirements

  • Page must look good on at least three devices: A laptop, a Galaxy S3 Phone, and an iPad Pro.
  • CSS Rules to optimize might include font-size, container width, image width, and even things like line spacing. Make whatever changes you think are best.
  • Once you’re done, push your changes to a Github repo and enable Gihub pages (in settings on the web interface.)
  • Go to your new site and admire your work!

17 of 18

Homework!

Learn to use Git. This is essential for any developer: https://www.codecademy.com/learn/learn-git

Learn the Windows Command Line if you’re on Windows: https://www.bleepingcomputer.com/tutorials/windows-command-prompt-introduction/

A much better commmand line tutorial if you’re on Mac or Linux: https://www.codecademy.com/learn/learn-the-command-line

18 of 18

Announcements

This was our last class on HTML and CSS specifically, though we’ll continue to use both in this course.

As of next class, we’re moving on to JavaScript. JavaScript is a full-blown programming language, and it’s a very deep topic. We’ll spend the next six classes getting a grasp of the basics, and the last two bringing all our new web development skills to bear on a final challenge.

Coffee and Code is back! Come hack on your projects in good company.