CSCI-UA.0061 : Spring 2021

For your first assignment you will be spending some time setting up a website that will be used to document your work and serve as your digital portfolio in this class. This page will require you to use your HTML & CSS skills to create a static page that is functional as well as visually appealing. Here’s how to get started!

Step 1: Installing a Local Web Server

This semester we will be working with a number of dynamic web technologies, including JavaScript and PHP. As you may recall from a previous web development class, most of these dynamic techniques are only accessible when they are run on a page being served through a web server (i.e. a page will work fine if you publish it to the i6 server, but if you just double click on the file on your local computer and open it in a browser it appears "broken")

In order to get around this issue you will be installing a "development environment" on your own computer that will emulate a local web server. This technique will give you full access to all of JavaScript's capabilities, even those that require your page to be published to a server. It will also give you full access to a host of back-end scripting environments (Python, PHP, etc) right from your computer.

Here's how to get started:

First, open up your computer's file explorer and navigate to your Documents folder (Mac) or My Documents folder (PC)
In this folder create a new folder called 'MAMP'. Inside of the 'MAMP' folder create another folder named 'webdev'.
Next, visit the MAMP download page at https://www.mamp.info/en/ - click the Download button
Select your operating system and download the MAMP & MAMP Pro package (button on the left side of the screen)
Install MAMP once your download completes
Next, launch MAMP (looks like a small circle with an elephant in the center). A control console will appear, and a browser window may pop up.
Click on the MAMP menu and select Preferences. Then navigate over to "Web Server". Find the area labeled "Document Root" and find a button that looks like a small folder (when you mouse over this button your interface should say 'Select new document root').
Click on this button and navigate to where you want to store all of your files. Find the 'MAMP' folder you created at the beginning of this process and set it as your document root.
Click on the Ports menu and make sure that MAMP is running on port 8888. If for some reason MAMP fails to run you can come back here and change the port number to something else. Any number above 8888 should work unless another program on your computer is using that port (you may need to experiment a little to find a usable port) -- but on most computers port 8888 works just fine.
On PCs running Windows 10 - select the PHP menu and select PHP version 7.2.14. There seems to be an issue with the latest version of PHP, but this slightly older version works.
That's it! Now you can place files into this folder as you would with any other file. These files will be accessible to you via your own personal web server at the following URL: http://localhost:8888 as long as your MAMP server is running on your computer. Note that you may need to change the '8888' value in the URL if you changed the port # when setting up MAMP.

Step 2: Installing an IDE

You can use any plain-text editor to write code for this class. I'll be using Atom, Brackets, Sublime and Nova throughout the semester, but you can use any tool that works for you.

Step 3: Set up your landing page

Now we need to make a "landing page" that will let serve as the first page for your digital portfolio. Create a new file named 'index.html' inside of your 'MAMP/webdev' folder. You can use the following a a bare-bones template to get you started:

<!doctype html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<title>Web Development 2021</title>
	</head>
	<body>
		<h1>Web Development 2021</h1>
	</body>
</html>

Your MAMP home directory should now look like the following:

MAMP
  webdev
    index.html

You should verify that you can access this file using your local webserver (http://localhost:8888) - you should be able to visit your 'portfolio' folder and see your newly created page.

Step 4: Enhance your landing page

Next, update your landing page to include the following features:

A long, horizontal header that display's the title 'Web Development 2021' along the top of the page.
A long, horizontal footer that displays "© 2021 YOUR NAME" along the bottom of the page.
A series of icons / text units that represent each class assignment. These icons should behave as follows:
- Each icon should react to the mouse hovering over them.
- When the page has enough horizontal room (>= 961px) the icons should be spaced into three rows of six icons each.
- When the page has less room (>= 481px and <= 960px) the icons should be spaced into six rows of three icons each.
- When the page has even less room (<= 480px) the icons should be spaced into eightteen rows of one icon each.
Hint: use media queries and the float property to do this. See the course wrap-up for Day 2 and Day 3 for some code samples. You are also welcome to use flexbox or CSS grid to layout your site, if you wish.

Here are a few visuals that show how your page could potentially look. Note that you are welcome to take as many liberties as you wish in terms of layout, images, color choices, fonts, etc. as long as you stick to the basic structure laid out above.

Large layout

Medium layout

Small layout

Note: You will need to resize your browser in order to test all possible layouts. You may also need to zoom in and zoom out using the View -> Zoom In / View -> Zoom Out commands, especially to see the smallest layout.

Step 5: Publishing your site

As part of this class you have been given access to a web server here at Courant to host your site. In order to use this server you will need to obtain a username and password before you can proceed. Here's a quick overview of this process:

If you already have an i6 account from a previous class (Introduction to Web Design, Database Design, Web Programming, etc) and you know your password then you are ready to go!
If this is your first Computer Science class that requires you to build a website then you should have been sent an e-mail with your login information from the CIMS Helpdesk.
If you already have an i6 account from a previous class but you do not remember your password you can go ahead and reset it by visiting this site: https://cims.nyu.edu/webapps/password/reset
If you have any trouble with your password please see me ASAP - do not contact the CIMS Helpdesk!

Next you need to connect with the server so that you can begin to add files to your site. You can do this using a SFTP program such as Fetch (Mac Only) or WinSCP (Windows only). Whatever program you use, be sure to connect using SFTP (as opposed to FTP, which is not secure). If you are using Fetch, here is the opening screen; fill it in as follows but with your own NetID and click "Connect."

SFTP Settings to connect to the i6 server

If you have problems logging into your i6 account, speak with me as soon as possible (and DO NOT contact the CIMS Helpdesk!)

Note for Fetch users on a Mac: When you download the ZIP file for Fetch it will contain a file named NYU_licensing.rtf - open this file to obtain your licensing code which will register Fetch and prevent you from being prompted to purchase it after 30 days.

Once you can log into the server you should see a folder called "public_html" -- double click on this folder to open it up. Any file that you place into this folder will be made accessible via the web server, which means that anything place in here can be viewed using a web browser. For example, if you created a file called "hello.txt" in this folder it would be accessible via your browser at the following URL:

http://i6.cims.nyu.edu/~YOUR_NET_ID/hello.txt

Next you will need to 'synchronize' your development server with the i6 server. You can do this by transferring your entire 'webdev' folder to the i6 server. Then go ahead and test your work by opening up a web browser (Chrome, Firefox, etc) and visiting your site using the following URL:

http://i6.cims.nyu.edu/~YOUR_NET_ID/webdev/index.html

Note: Make sure that your "webdev" folder is stored inside of your "public_html" folder on the server -- files stored outside of the "public_html" folder are not web accessible!

The basic process for publishing your site in the future will be as follows:

Build your projects on your local computer inside of your MAMP/webdev folder
Test it using your local web server (http://localhost:8888/webdev)
When you are happy with your project synchronize your files with the i6 server - the easiest way to do this is to upload your entire 'webdev' folder to the server.

What to Submit

When you’re finished you should submit a ZIP file of your 'webdev' folder as well as the absolute URL to your site to our NYU classes page. Here’s how to do this: