lab icon

CSCI 1210

Essentials of Web Development


Lab 0

Today, we'll take a look at the software tools that we'll be using for this class: Visual Studio Code (VSC) and FileZilla. Click on the link to the left to access this lab.

Lab 1

Today's lab will walk us through setting up your external drive for this class. We're going to create a folder whose name is the same as the one on the server, to make it easier to navigate in FileZilla. It will named (for example, my ETSU id is ramseyjw, so my folder would be named Nested inside that folder will be subfolders named homework and labs.

Then, we'll create a simple web page, using some basic HTML elements, like <p> (paragraph), <h1> (heading 1), and <ul> (unordered [bulleted] list - don't worry, we'll talk about that)

Lab 2

More about setting up our work environment, some basic HTML, and uploading files to the server

Lab 3

Lists and a bit of advice

Lab 4

We're going to explore some of the features of GIMP to optimize a couple of pictures for the web. I will walk you through image optimization using the Gnu Image Manipulation Program (GIMP)

Then, starting with page 2, we'll make an ordered (numbered) list of hyperlinks. Finally, we'll embed the optimized pictures on our web page, make sure it's displaying correctly, upload our files to the server, and correct any errors that crept in along the way

Lab 5

This lab will test some of what you've learned thus far. This time, you'll start by creating a new folder, lab5. Then you'll download a starter file, lab5starter.html. You'll complete the HTML file (instructions are embedded), then create an external CSS file to style it. Having completed all that, you'll upload your files to the server and check them for errors. Sounds like fun!

Lab 6

Today, we're going to create a table and work more with CSS to see how it can be used to modify our pages' styling

Lab 7

In this lab, we will create a template file for our future assignments. We'll also learn about favicons and how to include them in your site. Finally, we'll recreate a page, getting more practice with CSS

Lab 8

In this lab, we will use some of the semantic HTML elements we've talked about as well as use the CSS float property to create a two-column display

Lab 9

In this lab, we will work with the float property, use some HTML 5 semantic elements, pseudo-classes, create a color palette... aaaaaand...learn a little about Linux!

Lab 10

This lab will explore some more CSS. We'll take a completed HTML file and style it to look the way we [I, ] want...

Lab 11

In today's lab, we're going to play a little with PHP (instead of HTML). We'll also apply a font from the Google Fonts API to our project

Lab 12

In this lab, we're going to complete a form using material from last week's lecture. You will be given a set of starter files, including lab12.html, form.css, processing.php (the script file that will process the form information when you click 'Submit), and some images. The instructions for completing the CSS are embedded in the 'form.css' file. The instructions for completing the form are embedded in the 'lab12.html' file as comments. Be sure to read the instructions carefully and ensure that all of the attributes' values are exactly what the instructions say for them to be. Otherwise, your form won't work

Lab 13

A popular 'attention-getter' for web sites is called a Hero Page. This is a landing page that provides the user with an idea about the site's raison d'etre, its reason for existing and guides him or her into the site proper