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
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?"
Let's Develop It!
- In small groups, discuss purchasing a domain and decide if you would like to buy one for your website.
- Purchase a domain if you would like to buy one. Your TA will assist you.
- If you purchased a domain, write your domain name on your card and give it to the instructor.
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
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
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
PUBLISH
UPLOAD
PUT
UPDATE
File Transfer Protocol (FTP)
FTP Local Files to Host
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
- Make or find a local folder for your website. (It is common to have all your websites in a folder called Websites.)
- Open Filezilla
- Enter your IP address into Host (199.167.200.163), and your username and password.
- QuickConnect: Are you connected?
- Find your local folder (left side)
- Find the public folder (right side)
- Upload your index.html file
- 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