Scribd
Upload
22 views

HTML Stuffs

The document provides instructions for setting up a development environment including installing Visual Studio Code, XAMPP local web server, and completing an HTML quiz. It also lists activities for creating a personal 'about me' webpage using HTML and CSS with various content sections and validation.

Uploaded by

Liên Vũ
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

HTML Stuffs

The document provides instructions for setting up a development environment including installing Visual Studio Code, XAMPP local web server, and completing an HTML quiz. It also lists activities for creating a personal 'about me' webpage using HTML and CSS with various content sections and validation.

Uploaded by

Liên Vũ
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Web Programming

Tutorial 1

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 – HTML Quiz
Try the following test to check how good you are with HTML:

http://www.w3schools.com/html/html_quiz.asp

Actvity 4 – Your “about me” page


Work alone. Create your personal website to describe yourself. 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 TA if
you are sitting alone.

➔ Embed your HTML test score from previous exercise to your page..

➔ 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

You might also like