The Front-End
Developer Series

Kick Off and Website Launch


Slides are at: http://susanmetoxen.com/curriculum/gdi-feseries-kickoff-plus

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Housekeeping
  • Slack Channel
  • Introduce TAs
  • Help each other
  • Have fun

Introductions

Tell us about yourself.

  • What is your name?
  • Why are you interested in the Front-End Developer Series?
  • What type of website would you like to publish?

The plan for today

Cover the requirements to obtain the FE Series Certificate

Meet the teachers

Set up your website hosting for class

  • Step 1: Purchase a domain
  • Step 2: Set up your website hosting
  • Step 3: Set the nameservers (DNS)
  • Step 4: Publish your website (FTP)

Last thing on the agenda....

CELEBRATE!

You will be on the World Wide Web

What is a Front-End Developer

  • Front-End Developers work on the client side of a website. They use HTML, CSS and Javascript to make the part of the application that the user interacts with.
  • Back-End Developers work on the server and the database that stores the records used by the website.
  • Full-Stack Developers work on both the front-end and the back-end of a website.

Certificate Requirements

To obtain the certificate at the end of the program you must:

  • Take all classes in the series
  • Make a well-organized website demonstrating use of HTML, CSS, and Javascript, published under your own domain, with the code residing on Github.
  • Apply for the Certificate

At the end of the series we will have a graduation ceremony and add you to our FE Series Graduate webpage

Meet the Instructors

  • HTML and CSS: Tessa Kriesel
  • Javascript: Amy Gebhardt
  • Git: Tamara Temple

Classes in the Series

  • Intro to HTML & CSS
  • Kick-Off and Website Publishing
  • Intermediate HTML & CSS
  • Fall in Love with Git
  • Advanced HTML & CSS
  • Intro to Javascript
  • Intermediate Javascript
  • Optional: Bootstrap

Toast and Tech

We provide support for your learning at weekly Toast and Tech Meetups.

  • Meet at the Canteen at 6:30PM on Tuesdays
  • Hosted by Tamara Temple

What type of website do you want to make?

It is your decision

  • Portfolio or Resume Website
  • Business or Organization
  • Hobby or Area of Expertise

Discussion Groups: What type of website do you want to make? Share with the students in your group

Website Publishing
(Ship It)

By the end of this session, you will:

  • Be able to manage your local and remote files and be able to publish (FTP) your files to the world.
  • Be comfortable with purchasing domains and hosting services.
  • Have a website published on the World Wide Web!

Free Hosting

Sponsored by Girl Develop It Minneapolis

  • Full Service Hosting Plan
  • Allows for PHP/mySql Backend
  • Create email addresses
  • Add-on Domains
  • Valued at $99 per year
  • One year of hosting

It ain't easy...

"I'm not telling you it's going to be easy - I'm telling you it's going to be worth it."
― Art Williams

Domains

Buying a Domain

Your address on the world wide web

  • How to choose a domain name
  • Make sure you own your domain name
  • Most domains are $12-14 per year

"Should I buy privacy services for my domain?"

Where to buy a domain

Let's Develop It!

  1. In small groups, discuss purchasing a domain and decide if you would like to buy one for your website.
  2. Purchase a domain if you would like to buy one. Your TA will assist you.
  3. If you purchased a domain, write your domain name on your card and give it to the instructor.

Hosting

What is website hosting?

  • Web Hosting is the server space on the Internet where you store your HTML, CSS, and other files.
  • When you make a website and want other people to see it, you will need to publish it to a web hosting service.

Pop quiz

Where are your LOCAL files?

On your computer

Where are your REMOTE files?

On the server at your hosting plan.

Local Files to Server Ftp process

Nameservers

Linking Domain to Host

Your hosting and domain name may not come from the same company. The nameservers link your domain to your hosting.

  • Domain Name: MyCoolWebsite.com
  • IP Address: 199.167.200.163
  • Name Server: ns1.gdiminneapolis.com
hostgator nameservers

Domain Name Servers (DNS)

  • Connect your domain to your hosting
  • Propagating DNS

Let's Develop It

  • Sign into the account where you purchased your domain
  • Set your nameservers to:

    ns1.gdiminneapolis.com

    ns2.gdiminneapolis.com

Publishing

PUBLISH

UPLOAD

PUT

UPDATE


File Transfer Protocol (FTP)

FTP Local Files to Host

FTP

How does your site visitor find your website files?

index.html or index.php

User enters: GDIMinneapolis.com

The browser looks for:

http://gdiminneapolis.com/index.html or http://gdiminneapolis.com/index.php

Pop quiz

What file does the server look for when the user enters: MyCoolWebsite.com/start
?

MyCoolWebsite.com/start/index.html

public_html

  • On the remote server, you will publish your files to a folder called, "public_html".
  • This is the default file location

File Transfer Protocol or FTP

  • We use FTP to transfer files from our local host (our own computer) to the remote server, at the hosting provider.
  • For this class we will use FileZilla to FTP.

Alternatives to FileZilla

  • Dreamweaver (text editor integrated)
  • CyberDuck

Website Folders and Files

It is very important to be organized and follow conventions for folder and file structure.

  • Keep your websites in a folder called, "sites" or "websites"
  • Put it is your Documents folder or wherever you keep your Folders.
  • Use dashes between words. No spaces.

Let's Develop It

  1. Make or find a local folder for your website. (It is common to have all your websites in a folder called Websites.)
  2. Open Filezilla
  3. Enter your IP address into Host (199.167.200.163), and your username and password.
  4. QuickConnect: Are you connected?
  5. Find your local folder (left side)
  6. Find the public folder (right side)
  7. Upload your index.html file
  8. Check to see if your files are live

Celebrate!

You are on the World Wide Web!

cPanel Walkthrough: MyCoolWebsite.com/cpanel

  • Change your password
  • Remote Files
  • Email
  • Add-on Domains
  • Sub-domains
  • HTTP Passwords
  • phpMyAdmin

Next Steps

  • Front-end developer series
  • Make websites for your friends and favorite organizations
  • Make websites for your hobbies or start a blog
  • Come to Toast and Tech
  • Post your coding questions on Slack


What ideas for next steps do you have?

Thank you!

Thank you so much for particiating in a GDI Minneapolis class! Please take a moment to fill out the class evaluation.


Evaluation Tool