1. Introduction

Why this course?

• First of all, you probably want to learn some practical skills.
• Second, you need a Webpage to present your profile/works/personality.
• Third, Web Design helps cultivate your logical thinking and creativity.
• Finally, you still need to practice your English writing skills.

What to learn?

HTML5, CSS, JavaScript(!!!)

HTML5 and CSS are probably more entertaining since you get to see what you create immediately. JavaScript is perhaps a bit more intimidating - After all, computer programming sometimes means a steep learning curve.

But I will be slowing down to make sure that we are all on the same page before moving the yardstick.

What do you need?

• A GitHub account to host your Webpage (see Preparation below). You can use the Web space provided by NTHU, but the Web address may look a bit dumb (for example: http://oz.nthu.edu.tw/~g10xxxxxx).
• Textbook...? No, you can just follow my materials. But there are two textbooks that are digitally accessible in the NTHU library database for your references:

  Murphy et al. (2012). Beginning HTML5 and CSS3: The Web Evolved. New York: Springer.

  Fielding, Jonathan. (2014). Beginning Responsive Web Design with HTML5 and CSS3. New York: Springer.

• A laptop/computer. Feel free to use the computer in C522, but you're encouraged to bring your own laptop for your own convenience and for security reasons.
• MDN Web docs - A complete and detailed guide for Web development.
• W3CSchool - Another good online Web development tutorial.
• JSFiddle - A place for you to experiment different HTML, JavaScript, and CSS codes.
• Google - I'm not kidding.
• The source codes of each lecture example and practice in GitHub.
• Submit your work to NTHU eLearn.
• Meticulous efforts and a tough mindset.

Course Requirements and Policies

Your performance in this course will be assessed with the following criteria (in line with the course syllabus):

• In-class Assignments (60%)
  In each lecture, students will spend some time completing on-site Web design mini tasks. The tasks will be scored immediately. There will be no make-up assignments, so if you miss a lecture, you will also miss the in-class assignments.
• Bilingual website projects (40%)
  The students will have to complete two bilingual website projects at the end of the course on Jun 13, 2026 before midnight. The first project is a personal website at https://xxxxxxx.github.io/personal/ (xxxxxxx is the student’s GitHub account) and the second project is a thematic website at https//xxxxxxx.github.io/writing/ introducing general English reading and writing guidelines with an English article. Both projects must be completed following Course Project Guidelines uploaded to NTHU eLearn.
• AI Policy
  For assignments to be completed on-site, the students will NOT be allowed to use any generative AI. Those who use generative AI to complete the assignments will score a zero. For the two website projects, I remain open-minded to the involvement of generative AI, although I STRONGLY ADVISE AGAINST USING IT, especially before the students are highly familiar with Web programming. Students should be learning ‘how to design a bilingual website’ in this course, rather than ‘how to use AI to design a bilingual website’. If you do not believe that learning makes you better than AI, you can just go with ‘vibe coding’ and do not have to take this course. Even if you use AI to ‘support’ your learning, your bilingual projects will still have to follow the project guidelines. In particular, your websites MUST NOT include anything that is not explained in this course. The students will learn enough skills to design a very professional website in this course.

Preparation Works

• Get a GitHub account to host your webpage. Your account will be part of your GitHub page domain name (https://xxxxxx.github.io, where xxxxxx is your account), so make it count.
• Download GitHub Desktop to manage your Web design projects at GitHub. (Advanced: Take advantage of GitHub's student pack.)
• Get a text editor that can make your Web design process smoother: Sublime Text or Notepad++ (Windows Only).
• Follow the instruction at GitHub Pages to build a "repository" on your GitHub page (Choose "User or organization site" in 1 and "GitHub Desktop" in 2).
• Follow the instruction to clone your repository to your computer, create an index.html file (case sensitive!), and Commit and Publish (Push Origin) to sync the changes to your repository.
• See if you can access to your GitHub page.

More on GitHub

One nice thing about sync your project with GitHub is that GitHub allows you to track the changes you have made. Click on any file in your repository, and you would see the History button in the top-right corner:

That's also the reason why you see + and - signs in your GitHub Desktop whenever you make and save some changes in your local respository:

As you move on, you'll make more and complex changes. And that's why you need to provide a good Summary and Description about the changes you make (this would also be vital in collaborative works):

GitHub has some other very nice and useful features, but know how these things work would be enough for you to work on your own in this course.

The file structure of your repository

Now that you have created your first page in your repository, let's take a moment to dig deeper into the file structure of your repository. It's always a good habit to organize your files logically. People can be lazy, and they would choose to put everything in the same folder. They would then later suffer the mess and I do not feel sympathetic for them :-).

_{Credit: Mark Knobil}

First of all, the local folder (xxxxxxx.github.io) for your repository in your computer is the root directory of the repository. The index.html file in this root directory would always be the default webpage loaded to a Web browser when someone visits your website at https://xxxxxxx.github.io/ (which is thus in fact equivalent to https://xxxxxxx.github.io/index.html). This root directory should be used for your personal website project.

If you create another folder in the root directory of your repository, such as writing for your English reading and writing website, the folder could be accessed via https://xxxxxxx.github.io/writing/, and the default webpage that will be loaded in this folder will still be index.html. Now, you have the following file structure in your repository:

Eventually, you will have to style your website and add interactive functions to it, so you will need folders for these files for styling and interactive functions, which we call css and js for now. The location of these directories has different implications with regard to how they will be accessed in the entire website. First, let's create the two folders inside your root directory, which implies that the files in these two directories will be used globally, rather than by any specific webpage in a specific folder.

If you have any specific styles for your Essay Analysis website, you should then create another css folder inside the writing folder:

Every student should have the same file structure in their repository for this course, and I will only assess the contents in https://xxxxxxx.github.io/ and https://xxxxxxx.github.io/writing/..

It's time to explore!

_{Credit: Gunnar Hildonen}

Before you even start to think about the website you want to design, why not refer to some mesmerizing sites first for some insight?

• ETQ
• Miyaka Kobayashi
• Guillaume Tomasi
• Gakuten Japan
• Jewish Warsaw

Which colors can represent you the best? Which colors do touch your heart the most? Are these colors        visually harmonic? Or this color combination        may not work for you? Feel it: Trending Color Palettes at Coolors.co

And some color combinations are just more efficient for making contrasts: Color Brewer 2

In addition, a good Web design always comes with a proper choice of fonts: What is a good font for headings/sub-headings/contents? How to choose from hundreds of fonts generally offered by Google Fonts?

For the next unit...

For the next unit, you will have to complete the following tasks:

1. Find a website that impresses you the most.
2. Find a website that you think to have a poor design.
3. Send me the link to your Web design project with the English spelling of your Chinese name before the next class, which will be shared in this website.

>> HTML Basics