Assignments

Project 00: Further Enlightenment'
Due: Friday 2/28 10:00am

Submission Name: See below for instructions

Sample of different CSS styles and site layout: http://homer.stuy.edu/~jadw/site/

Project Overview
- This is an extension of w05_subject.
  - If you would prefer to change the subject of this website, you may.
- You’re going to turn your subject specific page into a larger web site! At a minimum, your site should have the following files:
  - A main landing page:
    - This page should explain what your site is about, a general overview of the subject.
  - A page for each section from your original subject page
    - This means you should have at least 3 such pages.
    - You should add more detail to each section.
  - A single css file used by all your pages.
Implementation Specifics
- The list at the beginning of your subject html page should turn into a horizontal or vertical menu where each list item is a link to the respective page.
  - You should put this list inside a nav element.
  - The position, layout, coloring etc of the menu should be all done using css.
  - The navigational menu should indicate in some way what page is currently being viewed.
  - The navigational menu should also contain a link to the main landing page.
- All image sources should be image files instead of links.
- The entire project (html files, css, images) should be in a subfolder of your public_html folder called site. With the following required parts:
  - index.html: The main landing page for your site.
  - All other html files, and your css file.
  - images/: a further subfolder containing all the image files used by your site.
  - Here is an example of what the structure of your site folder should look like:
    ~/public_html dw$ tree site/ site/ ├── images │ ├── img0.png │ ├── img1.jpg │ ├── img2.png │ └── img3.gif ├── index.html ├── mystyle.css ├── p0.html ├── p1.html └── p2.html
Evaluation

You will be evaluated on the following:
- Technical aspects
  - appropriate use of html and css
  - correct directory structure
  - correct use of public_html for publication as well as submission in your GitHub repository.
- Styling
- Content
- You must be the author of all the content, html and css for your website. You cannot use any web authoring tools that automatically generate html or css code.
- Do not include any javascript.
Further Resources

You will want to go back over the HTML and CSS links from the previous 2 assignments. You may also find the following resources helpful:
- CSS Box model
- CSS layouts
Test Prep 00: Answering
Due: Friday 2/14 10:00am

Submission name: w07.txt

You can find all the submitted test questions here: https://github.com/mks22-dw/thesource/tree/main/test0

Pick 4 of the short answer questions to complete. At the beginning of each question you answer, include the question number above. Since this will be a mix of command line instructions, html and css, put your answers in a plain text file.

You are encouraged to work on more problems to prepare for the exam. You should also take a look at the multiple choice questions. I have not vetted all the questions, so there may be mistakes.

Important Notes:
- You can see sample html and css here: https://github.com/mks22-dw/thesource/tree/main/web
- Even though they are present on the notes slides, you can ignore the following concepts:
  - div and span elements
  - The overflow css property

Due: Thursday 2/13 10:00am

Submission name: test00.txt

Write Possible Test Questions

Write three potential test questions.

The first two should be multiple choice questions with 4 options.
The third one should be a more open-ended question.

Put all questions, and the answers in a plain text file. Use this format:

#|
MC Question:
Skill:
Options:
Answer
|#

#|
MC Question:
Options:
Skill:
Answer
|#

#|
Open Ended Question:
Skill:
Description

Possible solution:
|#
ANSWER GOES HERE

Here is a filled in Example:

#|
MC Question:
What is the air speed of an unladen swallow?
Skill: 9001
Options:
A) 2 mph
B) 20 mph
C) 200 mph
D) African or European?

Answer: D
|#

#|
MC Question:
Who you gonna call?
Skill: 9001
Options:
A) Transformers
B) Ghostbusters
C) Thundercats
D) Teenage Mutant Ninja Turtles

Answer: B
|#

#|
Open Ended Question:
Skill: 9002
What is 1 in binary?

Possible solution:
|#
1

Test Skills

Skill	Minimal Competency	Developing Competency	Competency	Mastery
26. Using The Command Line Interface	Understands the purpose of the command line and can identify information present in the default bash prompt.	Can navigate the file hierarchy using `cd`, `ls` and `pwd`.	Can view and modify files using `cp`, `mv`, `cat`, and `less`.	Can effectively use the command line to navigate the file system, including using command line and keyboard shortcuts.
27. Using a Web Server	Can use `public_html` to serve a single web page.	Can use `public_html` to serve multiple web pages.	Can use `public_html` to serve multiple connected pages with media resources using relative paths.	Can write python programs that dynamically generate web pages via `public_html`
28. Writing web pages with HTML	Can write HTML element tags for at least 2 different elements.	Can use the required html tags to make a minimally valid HTML document.	Can create HTML pages that contain the required tags, hyperlinks and multiple other HTML elements and use attributes correctly.	Can create HTML pages that use elements like `div` and `span` to organize content and provide links to CSS styling files.
29. Styling web pages with CSS	Can use CSS to modify a single element using in-line styling.	Can use CSS in the head of a webpage to modify multiple elements.	Can use CSS in an external file to provide multiple style options for multiple elements.	Can use CSS to modify the layout of a webpage.

Work 06: Stuylin' and Profilin'
Due: Wednesday 2/12 10:00 am

Submission Name: hello_style.css

Skills For Friday’s Exam: 26, 27, 28, 29

CSS Time

Create a css file called hello_style.css in your web repository. This will be a style file used on your webpage for hello.html (from work_04).
- In this file you must set at least one css property for each element in hello.html (except for head and anything in head).
- This file should have at least one example for each of the properties in this table.
- Add your css file to the html file hello.html.
Notes About Working From Home
- Your home computer is probably not set up as a webserver, this is fine, but it means you’ll have to work a little differently than at school. First off, you will need a text editor and a web browser. I suggest pulsar as your text editor. You must use a plain text editor, so something like word or google docs is NOT acceptable.
- Open your HTML and CSS files in your text editor, this is where you will edit them.
- Also open your HTML (not the CSS, it will be included via the HTML file) in your web browser. Open it via the Open File option in the File menu of your browser. The address bar will start with: file:/// followed by the path to your HTML file.
- As you edit your CSS, reload the HTML file in the browser. You may need to do a force reload (on firefox, that’s ctrl-shift-r)
Work 05: Enlighten Us
Due: Monday 2/10 10:00 am

Submission Name: subject.html

Helpful resources:
Make a web page for something about which you are knowledgeable (could be anything, an academic subject, sport, music, theater, movie, comic …). The page should not be an exhaustive report on the subject, but provide some information in a coherent framework. Your page should include the following parts:
- A main title/heading
  - heading element: <h1>
- A table of contents made of an unordered list.
  - list element: <ul> and <li>
  - You should have at least 3 sections listed.
- Sections of text that correspond to each element in the table of contents.
  - Each section should start with a <h2> tag.
  - The text for each section should be in a <p> tag.
  - Each section should contain at least one link: <a>
  - Feel free to add pictures: <img>
    - You may modify the size of the image using the width and/or height attributes.
Notes:
- You may be tempted to do things to modify the look of your page. Do not. Focus on the structure of the page, for that is what HTML is designed to do. We will work on making pages look fancy using CSS, at which point you can go nuts
Work 04: Hello Again
Due: Friday 2/7 10:00 am

Submission Name: hello.html

Helpful resources:
- Table of common elements from notes
- I’ve also included links to documentation for each tag you need to use below.
- Best practices for writing html from notes
- The default text editor (which works well for html) on the school computers can be opened using $ xed.
Write a real Web Page

Write a simple html file, properly formatted (which means include the non-visible html tags like DOCTYPE html head and body), that uses the following elements (you can include others if you’d like):
- heading: <h1>
- anchor (link): <a>
- list: <ul> and <li>
- image: <img>
Submission Notes

Make sure your page is in your public_html directory on your school computer and added to your github repository as well. If you work on this from home, you’ll need to get your work into public_html at school. How can you do that? Via the command line of course! scp stands for secure copy and can be used to send files over the internet using the ssh protocol.
1. Open your terminal program (extra tip for those using gitbash below).
2. Use cd to navigate to the directory that contains your file.
3. Use scp to send the file.
  - $ scp FILE USERNAME@homer.stuy.edu:public_html/ Will upload FILE into your public_html directory.
  - Example: $ scp hello.html dw@homer.stuy.edu:public_html/
  - If this is the first time you are using scp or ssh to connect to homer (which it probably is), you will get a warning that starts with: The authenticity of host 'homer.stuy.edu (149.89.150.100)' can't be established., respond to the question with yes.
  - Next you will be prompted for your password.
  - Then the file will be transferred.
4. You can test that the transfer was successful by loading your webpage in a browser.
5. You can also do this processs in reverse to copy the file from school to your home computer.
  - $ scp USERNAME@homer.stuy.edu:public_html/FILE ./ Will download FILE into your current directory (./).
  - Example: $ scp dw@homer.stuy.edu:public_html/hello.html ./
    If you’re using gitbash, the easiest way to make sure you’re in the correct directory is to right click on the directory in your GUI and select “Open in gitbash”. This should open a new Gitbash terminal and immediately set your working directory correctly.
Work 03: Hello
Due: Wednesday 2/5 10:00 am

Submission Name: hello.html

Make a Web Page
- Create a file called hello.html. Try using some of the following html elements in this file:
  - heading: <h1>
  - anchor (link): <a>
  - list: <ul> and <li>
  - image: <img>
- Put this file in your public_html directory. If successful, you should be able to access the page at http://homer.stuy.edu/~YOUR_USERNAME/hello.html
- Upload this file to your github repository as well.
Work 01: Commanding Authority
Due: Friday 2/2 10:00 am

Submission Name: w01_commands.txt

Create your work repository

All Assignments will be submitted via GitHub classroom. Labs and projects will have their own assignment links, all homeworks should be submitted in the homework repository. Create your homework repository by following the appropriate link:
- Period 9 GH Classroom link: https://classroom.github.com/a/A7KVeMuv
- Period 10 GH Classroom link: https://classroom.github.com/a/xcmaMfow
Create a directory structure

On school computers, create the following directory structure starting in your home directory.
```
 $ tree marvel/
 marvel/
 ├── heroes
 │   ├── avengers
 │   │   ├── black_widow.txt
 │   │   └── hulk.txt
 │   └── xmen
 │       ├── storm.txt
 │       └── wolverine.txt
 └── villains
     ├── hydra
     │   └── red_skull.txt
     └── thanos.txt

 5 directories, 6 files
```
- In a plain text file, write down the exact sequence of commands you used to do this, putting each command on its own line. Upload that file to your github repository.
Work 01: Highway to the Danger Zone
Due: Monday 2/03 10:00 am

Unfortunately, I will be out today, but have no fear! You can continue getting used to the command line by following theses easy steps:
1. Open up the terminal on your computer.
  - If you’re at home, you can do the following to get a terminal:
  - MacOS: You should already have a program called terminal, search for it on your computer and open it. It will look very much like the terminal program on the school computers.
  - Windows: Download and install gitbash. It will provide you with a program that will also work very much like the terminal on the school computers.
  - ChromeOS (I only just discovered this and have not tested it out yet). Looks like you can enable a terminal if you follow the instructions here: https://chromeos.dev/en/productivity/terminal
2. Read the first two chapters (~~Basics~~ and ~~Manipulating Files~~) in Learn Enough Command Line to Be Dangerous. As you read you will learn about a number of command line features and utilities, some of which you used while playing bashcrawl. Try things out! If you feel like you’ve ended up in a strange place in the terminal you can always try the following:
  - $ cd: This will change you into your home directory, useful if you run cd too many times and you don’t know where you are anymore.
  - CTRL-c: This should immediately quit the current active command, useful if it seems like the terminal is no longer responding.
  - Quit the terminal program: If all else fails, start anew!
Work 00: Getting to know you
Due: Thursday 1/30 10:00 am
1. Please fill out the student info form found here: https://forms.gle/F92MtZNBsgV3WwWv7
2. You will need a GitHub account in order to submit work for this class. If you don’t have one already, go to https://github.com/ and create one.

Due: Friday 2/28 10:00am

Submission Name: See below for instructions

Project Overview

Implementation Specifics

Evaluation

Further Resources

Due: Friday 2/14 10:00am

Submission name: w07.txt

Important Notes:

Due: Thursday 2/13 10:00am

Submission name: test00.txt

Write Possible Test Questions

Test Skills

Due: Wednesday 2/12 10:00 am

Submission Name: hello_style.css

Skills For Friday’s Exam: 26, 27, 28, 29

CSS Time

Notes About Working From Home

Due: Monday 2/10 10:00 am

Submission Name: subject.html

Helpful resources:

Due: Friday 2/7 10:00 am

Submission Name: hello.html

Helpful resources:

Write a real Web Page

Submission Notes

Due: Wednesday 2/5 10:00 am

Submission Name: hello.html

Make a Web Page

Due: Friday 2/2 10:00 am

Submission Name: w01_commands.txt

Create your work repository

Create a directory structure

Due: Monday 2/03 10:00 am

Due: Thursday 1/30 10:00 am