Project 1 - HTML, CSS, JS, and Git

Your task

This is a very small assignment to get you accustomed to writing HTML, CSS, and JS, and to practice using git.

This is a pretty open-ended assignment. We’re not really looking for a particular set of features. We just want you to play around and get more comfortable with this stuff. Have fun with it!

if you don’t have one, create an account on GitHub.
- if you already have an account, you don’t need to make a new one.
you should have received a GitHub invitation link in your email. click it!
- now you should have access to your proj1 repo.
git clone it to your computer.
- if you don’t have git installed, GitHub has tutorials for that.
edit the index.html and style.css files to make a simple page introducing yourself (see below).
edit the script.js file to add some interactivity (see below).
while you work, try out staging your changed files (git add) and committing them (git commit -m "message").
- if you add a new file (like an image or something), don’t forget to git add it!
when you’re happy with your site (or when you’re sad but done):
1. update the README.txt to include your name and username and any information you think will be useful to the grader; and then
2. git push origin master to submit it.

You can also use git push origin master at any time to ensure that there’s a safe copy of your project on the GitHub servers, or to transfer your code between computers (by pushing it from one and pulling it on the other).

Notes

your browser’s inspector console will often point out issues with your page, but not all issues…
- …so be sure to use the HTML and CSS validators (linked from the materials page).
- you can use either the “file upload” or “direct input” modes, since your page is not accessible on the internet.

Your HTML

Make your page at least a screen or two of information about yourself. Talk about your CS interests, hobbies, plans for the future, pets, whatever. Nothing edgy or political, please. Enough of that on the internet already. Good lord.

the slides on HTML show the basic structure of every HTML file.
split your page’s <body> into a few major sections (like <header>, <main>, and <footer>).
- you can even split <main> into <section>s if that makes sense.
be sure to use <p> tags on your paragraphs.
use some <a> tags to link to various things.
- the target="_blank" attribute can be used to make the link open in a new tab/window, like so:
```
  <a href="http://some.other.site/" target="_blank">Click me!</a>
```
use appropriate headers where it makes sense (like on this page, each section starts with an <h2>).
do not use <style> in the <head>, and do not use the style="..." attribute anywhere.
- if you want something to look different, put a class or ID on it and style it in the CSS.
useful elements to look up and play with:
- <figure> and <figcaption> for making figures
- <img>, <video>, and <audio> for multimedia
- tables of info using <table>, <thead>, <tbody>, <tr>, <th>, and <td>…

Your CSS

You should have several rules - the page should not look like the default appearance at all. But try to make something that looks nice-ish. No 1997 GeoCities pages please.

the slides on CSS show how to link the CSS file into your HTML file.
a fun way to write your CSS is to do it interactively in your browser’s inspector.
- copy the rules out of the inspector into your CSS file, or your changes will be lost when you reload!!
style the links so they look better.
- have a look at the CSS slides - the one about pseudoclasses talks about styling links.
use classes and IDs to style the elements on your page.
- unless it makes more sense to style e.g. all the h2s the same way.
This is an aside. See how it’s floating over here on the right?
try playing around with the float property to see if you can get the text to wrap around something. like… that aside over there! →
- you may have to use something called a clearfix to make things stop wrapping.
you can style the <body> element’s max-width property so your page doesn’t get stupidly wide.
you can style the <html> element to put a background behind the <body> if you like.
fun properties to play with (look them up):
- border, padding, and margin - super crucial important ones
- color and background - basic coloring
- font-family - no more Times New Roman ok
- font-size - percentages are a common unit to use with this
- text-align, text-decoration, font-weight, and font-style - more text stuff
- border-radius - don’t go TOO crazy.
- text-shadow and block-shadow - oh no. what have I done.

Your JS

This assignment isn’t really about JS, but just to dip your toes in the water…

the slides on JS show how to link an external script file into your HTML file.
the inspector’s console is SUPER useful for trying out snippets of JS. use it!!!
write a JS function makeThing which adds something to the page.
- in your HTML, put an id attribute on some element to become the “container” for the new elements.
- use document.createElement() to create some element. A paragraph? An image? Who knows.
- you can put some stuff in it using its innerHTML property, or set its attributes with setAttribute.
- then use document.getElementByID() to grab the element you put in your HTML and use its .appendChild() method to put your new element inside.
- load your page, go into the inspector, and try calling your function like makeThing().
  - did it work? :)
now make a button with this HTML:
```
  <input type="button" id="make_thing" value="Make Thing!">
```
- back in your JS, make a window.onload event listener.
  - Inside it, add a click listener to that make_thing button which calls makeThing().
- now when you click that button, a thing should be inserted. over and over and over.

for fun: try pasting this stupid thing in your inspector console and then click all over your page:

for(var v of document.all)
  v.onclick = function(e) { e.target.parentNode.removeChild(e.target) };

Submission and Grading

Project submissions will only be accepted through GitHub. If you are having trouble using git, please get in touch sooner rather than at 11:58 PM on the due date.

The project is due at midnight on the due date, but there is some wiggle room there. (We can see the time that you pushed to GitHub.)

You can turn it in for late credit until midnight on the day after the due date. You’ll get 10% off your grade.

Grading rubric:

[5] README.md file has been updated
[5] No inline style attributes or <style> elements
[15] All needed files are submitted
- If you add an image, or another CSS or JS or HTML file, be sure to add and commit it.
- A good way to test this is to git clone your repo into a fresh directory and open it there.
[75] You Tried ⭐️
- It’s free points, people
- If it’s obvious you didn’t really put any effort into it, the grader will use their discretion.