Web Programming
Tutorial 1
To begin this tutorial, please download tut01-starter.zip from the course website.
When you finish, zip all your deliveries to submit to this tutorial’s submission box. The
zip file’s name should follow this format: tclass_sid.zip where tclass is your tutorial
class name (e.g. tut01, tut02 etc.) and sid is your student’s ID (e.g. 2101040015).
Activity 1 – Editor setup
We are going to use Visual Studio Code as the main programing tool.
Follow this link to download: https://code.visualstudio.com/download and install.
(You don’t need to install any extension for HTML and CSS coding)
Activity 2 – Web server setup
Although we’re going to use Node.js web server later, it is beneficial for you to try out a
web server now. And XAMPP is an easy way to setup a functional web server on your
personal computer. Follow this link to download XAMPP:
https://www.apachefriends.org/download.html
Install only the Apache web server, MySQL and phpMyAdmin, please uncheck all
other options as they’re not necessary and will take up your computer’s space. In this
tutorial, you’ll only use Apache, but later on you will need MySQL and phpMyAdmin.
After installing XAMPP, please use XAMPP’s control panel to Start and Stop the
Apache server. Test your web server by opening https://localhost or http://localhost on
your browser. You can find the local website’s document root at C:\xampp\htdocs by
default.
Activity 3 – CSS selector exercises
(10 mins) In the css_selector_exercise folder, open index.html in a browser and
write CSS selectors for the 8 requirements in there. Note your answers down to a .txt
file in this folder to submit along with other activities.
Delivery: css_selector_answers.txt
Activity 4 - CSS Box Model
(15 mins) Given boxes.html inside boxes folder. In the same folder, create boxes.css
to make the appearance below:
The padding of the outer box is teal with a
width of 50 pixels.
The border of the inner box is pink with a width
of 50 pixels.
The background color of the inner box is
salmon with a width and height of 200 pixels.
The overall box has total dimensions of 400
pixels by 400 pixels.
Delivery: boxes folder with boxes.css file.
Activity 5 – Your “about me” page
Work alone. Create your personal website to describe yourself on the installed Apache
web server (so that you can access your personal website by visiting https://localhost).
Try to use your full HTML & CSS knowledge and be creative about the content of this
page.
You can create a single page or multiple pages. Here are some suggestions:
➔ The page should have a header (possibly with a navigation bar for user to
navigate to different pages of your website), the main section and a footer
section at the bottom.
➔ Your personal info (name, birthday, hometown, etc.), a picture of yourself (if any),
a short description of yourself in 5 sentences (emphasize important words in bold
or italic texts).
➔ Your achievements, education, work...
➔ A list of courses you are taking this semester at FIT. Use proper lists (unordered
<ul> or ordered <ol>) where suitable.
➔ Use proper headers to divide your contents.
➔ Your 3 favorite movies, books, or TV shows (with thumbnails) in order. Make at
least one link to an interesting site about that TV show/movie/book, such as its
IMDB page. The link should be triggered when users click on thumbnail or title.
➔ Cite your favorite quote (don’t forget to name the author).
➔ Something about one of your neighbors (people sitting next to you) or your tutor if
you are sitting alone.
➔ Link to your social network accounts (better with icons).
➔ Use section <section> or article <article> appropriately to group content.
Make sure to validate your HTML on validator.w3.org. Zip your website and submit it
on this tutorial’s submission box.
Delivery: about_me folder with added all source code.
