CS4640 - WebPL

POTD 1: Static Web Page

Due 26-May-2022, 1pm EST (no late submission, no extension)

Purpose:

Hands-on experience with HTML and CSS
Understand responsive web design and apply it to improve the usability of the web page
Get ready to work on homework assignment

For this exercise, we will work on a static web page. We'll stop periodically, and do exercise one step at a time with discussion between steps. There's a lot going on in this activity. Let's see how much we can complete. The more you do, the more experience you have!

You may work alone, with your project partner(s), or with another student in this course.

You have two options: (from last meeting's activity — Planning website, design web page)

Create your personal website or web page (if you choose this option, you should do it individually)
- Previously, you did an activity on planning your website. You may use your plan as an initial design. Alternatively, you may choose to create a new plan.
- You may do the following tasks, which eventually will lead to a somewhat similar layout of the page. You may create an HTML file from scratch or use the provided template.
- You may choose to explore and experience with HTML to design your own page and layout.
Create a static page of a website of your choice or user interface(s) of your CS 4640 project

Note: This activity is meant to get you started with static web page. You are not required to have a complete, ready to publish web page. However, you are encouraged to try hosting the page on a public server. This helps to verify that your deployment environment is set up properly and your web resource is accessible.

Refer to Basic web deployment (XAMPP or GCP) to deploy and test your web page.

Tasks: HTML and CSS

Design your web page — you are recommended to draw the UI without coding or implementation
Transform your drawing into an HTML file
- Create an HTML file ( .html not .htm )
  - A few design decisions:
    - If you decide to use this HTML file as the main/first page of you site, save it as index.html
    - If you would like to have another HTML file named index.html (client-side) redirect to this HTML file, name this file with something else (let's refer to it as your-web-page.html). Include the following <meta> tag in the <head> section of this index.html.
```
  <meta http-equiv="refresh" content="0; url=url-to-your-web-page" />
```
    Q: What exactly is index.html for?
- Add content in your HTML file
Create a folder styles inside a folder where you save your HTML file. This will be where you store all of your .css files.
Create a CSS file, let's call it main.css
Because every web browser has its own default styles for different elements, the same web page may appear differently. To ensure cross-browser compatibility, CSS resets have become widely used.
- The idea of CSS resets is to replace a predefined style of every common HTML element with a unified style for all browser.
- Generally, the reset removes any sizing, margins, paddings, or additional styles and toning these value down.
- To use the reset, include them at the top of your style sheet (reminder: CSS cascades from top to bottom). This is to ensure that those styles are read first; and as a result, all of the different web browsers are working from a common baseline -- and then your own styles are applied to the page.
Now, let's borrow one of the currently available resets, meyerweb. Copy the reset and paste it at the top of your main.css file.
Add <link> element to the <head> section of your HTML file.
```
  <link rel="stylesheet" href="styles/main.css">
```
Now, let's add style to your page. Create a class that will serve as a container for your elements, set margin, padding, and width

Tasks: Create a responsive view

Assuming the viewport has been set using a <meta> tag.

Create a grid view
- Make sure that the padding and border are included in the total width and height of the elements by adding the following CSS rule
```
* {
  box-sizing: border-box;
}  
```
Define columns width. Typically, we want a responsive grid-view with 12 columns. Therefore, each column's width is 100% / 12 = 8.33%.
Add a breakpoint, use @media (a media query is a CSS technique introduced in CSS3) rule to include a block of css property only if a certain condition is true
- Design for mobile first. Add the following CSS rule
```
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}  
```
  Alternatively, we may decide to handle all screens smaller than 768px the same way; e.g., each column should have a width of 100%.
```
@media only screen and (max-width: 768px) {
  /* For mobile phones and tablets: */
  [class*="col-"] {
    width: 100%;
  }
} 
```
- Add CSS rules to adjust screen bigger than 768px (for example, desktop)
```
@media only screen and (min-width: 768px) {
   ... rules ...
} 
```
- Optional: add CSS rule to hide portions of content when the screen is smaller than 600px (phones: 576px, tablets: 768px, desktops: 992px, large desktops 1200px)
```
@media only screen and (max-width: 600px) {
  #fadeshow {
    display: none;
} 
```
Apply the grid system to the web page

You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!

Refer to Basic web deployment (XAMPP or GCP) to deploy and test your web page.

Grading rubric

[Total: 10 points]: Done (or provide evidence of your attempt, full or reasonable effort)

(5 points) — Providing evidence of your attempt, minimal effort
(0 point) — No evidence of your attempt

Submission

Log in to Collab, then upload all your files (.html and .css) to POTD 1 on Gradescope.
Make sure you connect your partner(s) to your group on Gradescope so that everyone receives credit
Each team submits only one copy

Making your submission available to instructor and course staff is your responsibility; if we cannot access or open your file, you will not get credit. Be sure to test access to your file before the due date.