CSE 154

Getting Your Student Website Published

You've done all of this work to make some pretty neat web sites and programs... but now /what?

Every student has their own website managed by UW's Shared Web Hosting platform.

You can add to your webspace anything written the languages we've learned this quarter, including projects in HTML/CSS, JS, PHP, SQL, etc.

Here's mine! (outdated)

Why set up your own website?

You can stand out among a sea of applicants for jobs with an online resume/portfolio

You can show off your web programming work to friends, family, and even future employers! Also it's free while you're a UW student :)

You can have a public repository of class/side projects you've done throughout college

• Side web dev projects, art/design, blog, photo albums, etc.
• Hackathon projects
• Note: You may not publish any assignment solutions online (we included the creative projects so that you can have something you can publish by the end of the quarter)

Things I've Used My Website For

Landing page (content that I couldn't otherwise fit on a resume)

Online Resume (demonstates web development skills and provides employers with links to relevant projects)

Teaching materials (e.g. a past CSE 154 section website)

Various side projects/APIs I want to share with others and/or need a server for

First Steps: Activating Shared Web Hosting

Visit https://itconnect.uw.edu/connect/web-publishing/shared-hosting/activating-shared-web-hosting/ for a comprehensive guide to manage your student website on the Shared Web Hosting platform

Activating Shared Web Hosting (Continued)

Activating Shared Web Hosting (Continued)

Subscribe to "Dante/Vergil Account" and "Student Web Publishing"

Method 1: Using FileZilla to Transfer Local Files to your Student Web Space

FileZilla is a free program for Mac, Windows, and Linux which will allow you to easily upload and transfer local files to the internet.

1. Installing and Starting FileZilla

First, install FileZilla (choose the Download FileZilla Client option, not the server option).

Once installed, start the application. You should see something like this when it loads:

2. Connecting to vergil Student Server

Use the information provided on the Generic Connect Settings page to connect to your student webspace (vergil) in FileZilla:

2. Connecting to vergil Student Server

Once you have connected successfully, you will see a directory structure on the right column of FileZilla:

The left (with a "Local site" dropdown) shows all of your files on your local computer, and the right (with a "Remote site" dropdown) shows all of your files on your student webspace.

3. Transferring Your Files Using FileZilla

To publish files to your public student url, simply drag and drop folders/files from local to remote.

Make sure any files you want to be accessible by the public are put in the public_html folder, not student_html (more information on the differences between these two folders here).

Check that your files are now accessible by going to:

https://students.washington.edu/netid

replacing "netid" with your UW student netid. For example, my website is accessible at

https://students.washington.edu/medskm

Note that for any server-side code (e.g. PHP) you don't need to do anything to run it! It works as soon as you upload it to the shared web hosting space.

Method 2: Using ssh to Access your Student Web Space

Secure Shell (SSH) allows a user to connect to a server remotely and open up a command-line terminal to run commands, scripts, or edit files. If you know how to use a terminal, this tends to be faster than SFTP (and is overall a good tool to know).

1. Connecting with SSH on the Command Line

If on Windows without Bash (Windows 10): You'll need to install a terminal that allows you to ssh (e.g. PuTTY). Then follow the same instructions as below.

In a terminal window, run the following command to connect to a server via SSH, replacing "netid" with your UW netid:

ssh netid@vergil.u.washington.edu

Example of logging into SSH (use CTRL+D to quit session):

Use ls to list your files in the current directory (note you no longer are in the local directory when in an ssh session) and cd to change directory (anything you edit in the public_html folder will be seen immediately on your public student website)

1. Connecting with SSH on the Command Line (Continued)

Tip: I have a bash alias for ssh-ing into different servers. To do this on your own computer, add the following line as an alias:

You can then just type vergil in the terminal to ssh quickly. Here is a starting .bashrc file if you don't have one, with the alias command included on line 135 (among a few other aliases you may find helpful). You can create/edit your .bashrc which should be located at ~/.bashrc.

2. Transferring Files with SCP on the Command Line: Local to Remote

SSH lets you log into the student server and navigate/edit files from the terminal. However, you cannot access your local files while in an ssh session.

To transfer files from your local computer to the server, use the scp command on the command line:

scp sourcefile netid@vergil.u.washington.edu:destination

Command Line (local)

The first argument is the path of the file you want to transfer relative to what current directory you are in - destination is the location on the server that you want to transfer the sourcefile to (use . for destination to transfer to the home directory, which is where you go each time you ssh into the server).

To transfer an entire folder to the server, add -r after scp and replace sourcefile with the folder name.

2. Transferring Files with SCP on the Command Line: Remote to Local

If you know the path of a file/folder in your student website and want to transfer it to your local computer, just swap the argument order:

scp netid@vergil.u.washington.edu:sourcepath .

Command Line (local)

In this case, since your local directory system, the last . results in copying the file(s) located at sourcepath (on vergil) to the current directory.

2. Transferring Files with SCP: Example of Transferring a Local Folder to Remote

The following is an example of sending foo.html (in my current directory) to my student webspace (ran locally):

2. Transferring Files with SCP: Example of Transferring a Local Folder to Remote

The following is an example of sending creative-project (a folder of files in my current directory) to my student webspace (ran locally):

2. Transferring Files with SCP: Example of Transferring a Remote File to Local

The following is an example of sending bar.html (a file in my student public_html directory) to my current local directory (ran locally):

A Note: What's this Git thing?

Why Learn Git?

Git essentially is a "Google Drive" for your code, where you can upload files to a git repository and access/update these files between different computers (or even between local and remote file systems, which is helpful to quickly pull current code into your student website without manually transferring files)

As a web developer, you will find Git most valuable for:

• Keeping track of code
• Working on programming side projects (e.g. hackathons) with peers
• Adding to your resume

Ultimately, you should learn Git if you plan to continue any sort of development, and there are a great number of tutorials out there to help.

Here's a good tutorial and a reference cheatsheet I'd recommend for getting started.

Tips for an Online Resume (and Applying for Web Programming Internships)

Online Resume Tips

You all have enough experience in the different languages we've covered to add these to your resume

You all have enough experience to apply for web programming internships or project "contracts"

As a web developer, you now have a lot of tools in your toolset to support your resume

Things to Consider When Applying for a Web Development Role

What area do you feel more comfortable with? Do you see yourself working ~8 hours a day writing/debugging front-end code? Back-end code? Both?

Remember to list your skills such that you'd be confident talking about them to a potential employer during an interview

Some particularly helpful skills/experience to have today include:

• Using public APIs in creative/useful ways
• Writing/documenting your own API
• Proficiency in SQL (or even no-SQL)
• Client-side and server-side input validation (shows you're user-focused and can think ahead about edge cases)
• Any web tools that demonstrate an interest in solving problems using what you know (e.g. a calculator for a specific domain of problems, a website that allows users to play/solve puzzles, a todo-list application for users where they can log with a username and password)
• Various JS libraries/frameworks (Node.js, React, Backbone.js, Rx.js, etc.)

Adding to Your Portfolio - Project Ideas

You already have some cool work you can publish with your Creative Projects!

If you wrote a personal web page for one of your creative projects, you can iterate on that

If you enjoy the process of designing and customizing your own website, you can expand on what you've learned in this class and explore new HTML5, CSS3, and JavaScript features you could add to your website

If you're not as confident about web design, you can start with open-source HTML/CSS templates/components like Bootstrap (make sure to change it enough to make it your own style).

Side Project Ideas

Write a Chrome extension!

• These are tricky to learn at first, but are well worth the time - once you learn them, you can find ideas to automate everything you do on the internet
• During my internship this summer at Expedia, I started a side project after experiencing and observing a common pain-point for employees (learning all of the 1000+ acronyms used for different projects/teams/etc.) The extension I wrote allowed employees to click the extension button, enter some acronym, and immediately see the meaning results (super helpful during important meetings) and was ultimately distributed company-wide.
• An example and another example of small extensions I've written (you can publish your own!)

Explore public APIs and use one in a creative way (or use multiple together). Examples include:

• Spotify API
• Game of Thrones API
• Trivia API
• Google Maps API
• Facebook/Twitter APIs

Write a web page or application for a holiday gift for family/friends

Side Project Ideas (Continued)

If you like/are studying...

... Pokemon

• Write your own Pokemon API (Pokemon stats, information between different games, move descriptions, etc.)
• Write a webpage that lets a user take care of their own Pokemon, Tamagatchi-style (cookies and sessions would be helpful here!)

... Biology

• Write a web application that teaches biology concepts through CSS/JS animations (example, example)
• Write a web page with a text area input and processes DNA/RNA/Amino Acid sequences (and or converts between each)
• Write an API that sends facts about animals/plants/other biology domains in JSON format

... Chemistry

• Write an interactive periodic table web page (e.g. clicking a chemical symbol pops up a module with more information)
• Write an application that balances chemical equations
• Write an application that calculates molecular weights of different compounds

Side Project Ideas (Continued)

... Linguistics

• Write a web page that translates English input into some other language/variation using your own code or a public API (example (YodaSpeak) API
• If you've taken CSE 143 and/or have experience with writing grammars, write a webpage that randomly generates sentences in that grammar
• Write a web app that replaces common grammar errors in a text area input (JS) or file (PHP)
• Implement this and this and this.

... Data

• Use a public API to process some cool data set and display it on your page using a data visualization library (e.g. d3.js)
• Write your own API for clients who want to do the above

... Art

• Build a portfolio of your artwork/photography/film, etc. (I'd recommend looking at other art portfolios online - there are some really amazing ones
• For musicians, write a portfolio of any music you've written
• Write a program that automates things for artists/musicians or provides helpful tools (e.g. music score analysis)
• Do something with a web audio API

Side Project Ideas (Continued)

If you like/are studying...

... Teaching/TAing

• Write a section website with weekly recaps
• Visualize different topics using CSS/JS (e.g. for CSE 14X TA's, a little linked list or stack animation)

... Math

• Write a calculator webpage for different domains in math (e.g. calculus, algebra, linear algebra)
• Write a page that solves your math homework for you using JS

... Video Games

• Try to find a public API for your favorite video game/console and use the data in a way that is helpful/interesting to you
• Write your own online board/card/video game in JS and publish on your student space so your friends can play. For cards, this API may be helpful.

Side Project Ideas (Continued)

If you like/are studying...

... Sports

• Write a website that keeps track of your favorite sport/sports team stats

... Cooking

• Build an online recipe website, letting users create accounts and view/add their favorite recipes
• Use a recipe/food-related API to filter foods that meet dietary restrictions
• Write a program that calculates calories of different foods and serving sizes
• Randomly generate recipe ideas given a collection of ingredients

Where to Start Learn New Web Programming Technologies

There are tons of languages/tools/libraries/frameworks being introduced/extended on the web today. It's easy to be overwhelmed/think you're way behind in your programming experience, but over time you'll realize what is popular today will be out of date tomorrow.

Being able to learn new libraries/frameworks quickly is key and comes with practice :) It will not be worth your time to learn them all.

A good tip is to follow a couple of blogs/feeds and stay up to day with 1-2 articles a week, just so that you have a sense of where things are and what recent things have happened (I find HackerNews to be my favorite source of programming-related news and tools... and I wrote a Chrome Extension for that :))

Example Web Programming Libraries/Frameworks to Explore

Some ideas (I've starred the ones I've used in industry)

• jQuery* - One of the most commonly-used JavaScript libraries with helpful DOM/AJAX/UI functions (fairly easy to learn with 154 knowledge, and will make your life a lot easier)
• TypeScript - Provides types in JS (much easier to handle common JS errors)
• Node.js - A server-side version for JavaScript (you can use Node.js instead of PHP, with pros/cons for both)
• d3.js - Data visualization library for JavaScript (moderately-easy to learn)
• Rx.js* - Reactive programming in JS (moderately-easy to learn)
• React - A popular component-based JS library (moderate difficulty to learn, mostly due to setting it up on your computer)
• Backbone.js with Marionette.js* - A JS MVC framework (lets you easily create single-page web apps)