01_HTML_1_Tutorial

Uploaded by

truongnmse172935

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

7 views

01_HTML_1_Tutorial

Uploaded by

truongnmse172935

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 8

COSC2430 - Web Programming

HTML 1

Please note:
- You can start the tutorial by opening the Visual Studio Code (VSC) on your lab computer or
on your laptop.
- We have recommended some important chrome extensions and visual studio code
extensions in the lecture so make sure you install them to maximise your learning
experience.
- Try your best to finish all the tutorial questions within the lab time as your tutor will go
through the solutions of these questions at the end.
- It's ok if you need more time as long as you can finish these tutorials by yourself by the end
of each week. This is important as doing these questions is a good practice to prepare you for
the upcoming assessments and project.
- If you are stuck with any question, please feel free to reach out to ask your friends sitting
next to you, your neighbours or your tutor.

Exercise 1: Make your own personal website using only HTML

As a web developer, having a personal website serves as an extension of your resume,
allowing you to showcase your skills and experience in a more interactive and visually
appealing way. By creating your own website, you can demonstrate your technical abilities
and creativity through the design, layout, and functionality of your site.

In summary, creating a personal website as a web developer can help you:

● Showcase your technical abilities and creativity
● Highlight your projects and portfolio
● Stand out from other job candidates
● Demonstrate your commitment to web development.

Note: later on, you can use this personal website to help you to find teammates with similar
skill sets and mindsets. Two birds and one stone!

So let’s make your own resume website!

Ideally, a basic personal website should have:

● Your photo
● Your name (Full name & Nickname)
● Your title
● Short description of yourself (1 or 2 sentences).
● Hobbies
● Passion
● Skill sets (IT/SE or Web Development related).
○ Number of stars based on your confidence.
● [Optional] Your social network links with appropriate icon images.
● Anything else you would like to have in your personal website.
○ To make your website stand out from others.
○ To show your creativity.

For extra information, you can create multiple html files for that and all of them will be linked
via anchor tags on the homepage (index.html). Or if you want to keep it simple then you can
just create one single HTML page for your website which is good enough.

Please make good use of all the HTML tags we have learned in the lecture, like h1, h2, h3,
img, p, a, ul, ol, br, hr, etc… You are allowed to use other HTML tags in the MDN website as
you like to enhance the website.

Tool links:
- Image retouch and resize: https://www.befunky.com/create/resize-image/
- Crop image circle (for your profile avatar): https://crop-circle.imageonline.co/
- Free web hosting for images: https://imgbox.com/
- Emoji list: https://getemoji.com
- Free beautiful icon images: https://www.flaticon.com/

The resource/reference to learn HTML:

- MDN (Mozilla Developer Network) is widely considered one of the best websites to
learn HTML (and web development in general):
https://developer.mozilla.org/en-US/docs/Web/HTML
- HTML Reference IO: https://htmlreference.io/
- Comprehensive Reference Devdoc.io: https://devdocs.io/html/
- HTML Cheatsheet:
- http://www.simplehtmlguide.com/cheatsheet.php
- https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf (from Stanford
University)

Here is the example of Tom:

HTML element break down:

It might look a bit plain and basic right now! Once we learn more about CSS then we can
make it fancy and beautiful! So practising the basic HTML tags is important in this tutorial!
Exercise 2: Push it live using Github Pages for the world to see!

After finishing your awesome website, you realise it is still on your local computer so no one
can see this masterpiece!

Don’t worry! We got you covered! The website will go live with Github Pages!

For step by step instructions, please follow the link here: https://pages.github.com/

Since this is your personal website, make sure to choose the “User or organization site”
option to see the appropriate instructions.

If you are not too familiar with Git commands then you can install Github Desktop like
instructed to help you push the index.html to the github repo.

Make sure you have a Github account for this exercise!

By the end of this exercise, your personal resume website should be hosted on this url:
https://username.github.io

Woohoo! Make a website and go live in one day! Great job!

Exercise 3: Join the COSC2430 HTML Personal Website
Competition with your live resume!

You are making a great website! How do you know it is good enough? Or you want to earn
some activity points which accumulate for the free buffet vouchers later on?

We will vote for the best personal website using PollUnit! Please join this link:
https://pollunit.com/polls/dervdnvq-zdntjlhsn4osw

Likewise, you can scan this QR code to join the competition:

To join the competition, you need to:

1. Add a new option to add your website to the competition.

2. For the title, you can put your name or website name.
3. For the file, please upload the full screenshot image of your website.
4. For the subtitle, please put studentID so I know who the winners are later on.
5. In the link, please put in the live github page url of your website for the audience to
see it in action.

Voting is anonymous, so please feel free to vote for any website(s) you like!

You can vote for other websites you like as well. By the next week's lecture (Monday), Tom
will finalise the top 3 winners with the most votes for some activity points. He will also select
one extra winner by one his preference. So 4 winners in total! Hopefully, we will do this for
every tutorial so you can have some motivation to work hard on your web development skill!
Exercise 4: Copy HTML Artist

Please open this fun “wait but why” homepage website: https://waitbutwhy.com/homepage

Using chrome inspector to inspect all HTML elements of the homepage of this website.

Your task is to figure out a way to copy/clone the whole homepage of this website to your
local HTML file which can be opened locally or via Live Server extension on your VSC.

Congrats, you have finished your first HTML tutorial!

As you get more practice, this process of coding will become easier, but you will still make
mistakes here and there. Feel free to be wrong and try again as tutors are there to help!

Extra reading links:

- The Absolute Minimum Every Software Developer Absolutely, Positively Must Know
About Unicode and Character Sets.
- Difference between the HTML5 emphasis vs italicise tags.
- Hyperlink Wiki Game.