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 that's exactly why you're here, to step out of your comfort zone, and that's why I'm teaching this course in Chinese (the materials are still in English, though).

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 in GitHub.
• The source codes of each developmental stage of the course demo website in GitHub.
• The source codes of every quiz in GitHub.
• The Corpus of Contemporary American English: https://www.english-corpora.org/coca/
• Meticulous efforts and a tough mindset.

Course Requirements

Your performance in this course will be assessed with the following criteria:

• Assigned Tasks (40%)
  On every Thursday, students will spend one hour watching pre-recorded lecture videos with supplementary materials. After watching the lecture videos, students might be assigned to complete some Web-design or writing-analysis tasks. The tasks must be completed before each deadline (usually on every Thursday before midnight). Late submission or plagiarized contents will NOT be accepted.
• Bilingual Personal Website (40%)
  Students have to build a bilingual personal website with the Web design skills they learn in this course. The personal website (https://xxxxxxx.github.io) must be completed on Jan 9, 2023, which will be assessed based on its aesthetic features, English and Chinese writing quality as well as completeness. Templates cannot be used to build the bilingual personal website, and no plagiarism is allowed, or the project will NOT be graded.
• English Essay Analysis Website (20%)
  Students are also required to follow the course guidelines (https://nthutychen.github.io/analysisdemo/) to build a website focusing on a structural analysis of an expository English essay selected from The New York Times. The English essay analysis website (https://xxxxxxx.github.io/analysisdemo/) must be completed on Jan 9, 2022 (i.e., three weeks after the last lecture), which will be assessed based on its consistency with the course demo website as well as the guidelines instructed to complete the analysis.

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, 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 analysisdemo for your , the folder could be accessed via https://xxxxxxx.github.io/analysisdemo/, 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 analysisdemo folder:

Now, let's add another three folders in the root directory for your personal website, code examples, and the progress of building the essay analysis website:

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/personal/ and https://xxxxxxx.github.io/analysisdemo/..

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