Predeparture Assignment
Due Sunday 5/19 at 11:59pm
Modern web development is both a broad and deep subject. Having a baseline understanding of HTML and CSS is table stakes to begin talking about modern web development. These two subjects inform how every web page's content is structured and styled. Our focus in COMP426 focuses on client-side web page interactivity, server-side architecture, and the communication of clients and servers via HTTP APIs. In order to focus our time on topics which are more difficult to self-teach, you should complete the following readings on basic HTML and CSS before arrival.
HTML and CSS On-line Textbook
The pre-arrival readings are assigned from the free, online book Interneting is Hard: https://internetingishard.com. You are assigned the first 8 sections of the book before the course begins in Copenhagen. These sections will bring you to the point of being able to put together a basic static web site. The remaining 6 sections of the book will be assigned while the course is in session.
After reading and taking notes on each chapter, you should complete the Guided Reading Questions (GRQs) assigned on Gradescope. The GRQs for the first 8 sections are due by May 19th at 11:59pm Eastern Standard Time. You are permitted to use your notes and to refer back to the textbook as needed while completing the GRQs.
TypeScript 101 (and JavaScript 101)
If you took COMP110 when it was offered in Java, or did not take COMP110 at all, you are encouraged to spend some time reviewing current COMP110 slides. Over the past two years COMP110 has transitioned from Java to TypeScript. TypeScript is a dialect of JavaScript that offers static type checking. For modern web development on large scale JavaScript projects, TypeScript offers much a much better developer experience and is the language of choice in most new web application development. If you have no prior TypeScript experience, please review the fundamentals by going through the slides of COMP110 lectures and videos through lecture 12.
Code Editor: VSCode
We recommend will use the Visual Studio Code text editor. Please download and install the latest copy of VSCode. Even though the book suggests Atom, please be sure you are comfortable carrying out the various tasks such as creating files, navigating the file system, and so on.
Pre-departure Project
The course project we will develop while abroad is a travel blog for you to journal your experiences. The end product will be interactive and you will be able to manage it through a content management system you build.
Your goal before going abroad is to arrive at a simple, static design for your site and some sample content. As you progress through the chapters of this book you will add more sophistication to your web site in terms of the HTML elements you use and the CSS styling techniques you apply.
This stage of the project serves a dual purpose:
To familiarize yourself with the fundamental technologies underlying web content and styling (HTML and CSS)
To begin learning about the city of Copenhagen and planning your journey abroad
Kris' example site can be found here: https://kris-travel-notes.netlify.com/index.html - you are free and encouraged to design the visual look and feel of your site however you prefer.
In our meeting on April 27th we will discuss this project, how to clone it on Github, how to publish it on Netlify, and how to submit for grading on Gradescope.
The minimum requirements for your predeparture static site are as follows:
Technical Requirements
- From scratch HTML and CSS (no frameworks like Bootstrap)
- At least 3 HTML pages (Chapter 2)
- Blog post listing page (can be your home page)
- Todo list page
- About you page
- Make use of the following tags somewhere on site (Chapter 2):
h1
h2
p
ol
li
p
span
a
(chapter 3)link
div
img
(chapter 3)
- Must use a single CSS file shared between pages (Chapter 4)
- Must use a global CSS reset (Chapter 5)
- Must specify more than one rule's
margin
andpadding
properties in CSS (Chapter 5) - Must use more than one class selector and style rule (Chapter 6)
- Must use at least one
div
tag that is styled via a class selector (Chapter 6) - Must use at least one descendant selector (Chapter 6)
- Must use psuedo-classes to style link
:hover
(Chapter 6) - Top menu bar for navigating between pages (must layout with
flexbox
) (Chapter 8)
Content Requirements
- One blog post introducing your travel blog
- A list of 10 TODOs on your wishlist page
- An about you page with a bio and a
float
ed photo of yourself (Chapter 7)
Submission
Once you have completed your static site, commit your work and push it. Check your Netlify site to be sure it's working as you expect it to. Submit it on Gradescope.