Lesson 1

Web Overview

This Lesson’s Focus

• How the Web Works?
• What Front-End Web Developers Do?
• What skills do Front-End Web Developers need?
• What makes a good programmer?

At CoderGirl

• Introduction to Your Cohort
• Overview of tools you will be using to learn
• Setup Your Computer

Do On Your Own

Assignment: How The Web Works

Read/Watch:

• Video, Khan Academy - How the Internet Works: HTTP & HTML
• Article, Mozilla: How the Web Works

Do: Draw a diagram or write a paragraph describing the what happens when you type a URL into the address bar of a web browser (like Chrome or Firefox). From entering the URL to the web page loading on your computer. Make sure to include how the Internet knows where to find the files your computer needs and what files get sent to your computer for your browser to load?

Bonus Challenge: in what order the files load in the browser? (FYI: this isn’t something you are suppose to know… google will be your friend) We will talk about this at the MeetUp so be prepared to share.

Assignment: You as a Front End Web Developer!

Read:

• Things I Wish Someone Had Told Me When I Was Learning to Code by Cecily Carver

Do: Front End Web Developer do a lot of things. They leverage skills ranging from problem solving to creativity to persistence to determination to team work to self motivation. What do your experiences or your persona bring to the Front End Web Development World? How will you be able to contribute to a team of diverse developers? Remember even unexpected experiences could contribute to you being a great developer. (Your can use the viking code school link for more of a description on what skills Front-End Web Developer use)

Assignment: HTML, CSS, Javascript

Read:

• Article, Building Block of FrontEnd Development

Description: Draw picture or describe how each of the 3 languages used in Front End Web Development work with each other? What are each of their primary responsibilities and how to they interactive with each other? We will talk about this at the MeetUp so be prepared to share.

Additional Resources

• Khan Academy - Internet 101
• Viking Code School - What a Web Developer Does
• What makes a good web developer by Oreana Rose

Pre-Lesson 2

###Setting Up GitHub for your Online Profile

1. After creating a GitHub account, complete the Hello World exercise from GitHub
2. Next you are going to “fork” your first “repository”…
   • note: “repository” and forking” are a Git term… repository is the collection of files that make up a project and forking means to copy of a version of a project, so you can edit it and make it your own without affecting the original project. For example, image you wanted to use the same layout of a friend’s resume in google docs, you could duplicate or copy the document and put it in your google drive. That way when you edit the document to put in your own information, you won’t ruin your friend’s resume.
   • Complete the Getting Started section in Web Group Project 0
3. Now that you created your own repository on GitHub, you are going to create a local copy on your computer to do work on. This is called cloning a repository.
   • Note: clone is another git term… the repository stored on GitHub is known as a “remote” repository, which means it is the master/public copy stored on GitHub. The local copy is the one on your computer to which you can play around and make edits. Then when you have a good change you can move that change up to the remote repository on GitHub. For example, if you are working on a google document with a group, you might copy the document to your computer to work on individually and when you had all your changes ready for the group to look at, you would add them to the document on google drive. The remote repository on GitHub is like group document on Google Drive in this case.
   • Download: GitHub Desktop
   • Read: Getting started with GitHub Desktop

Home