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
andstyle.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!
- if you add a new file (like an image or something), don’t forget to
- when you’re happy with your site (or when you’re sad but done):
- update the
README.txt
to include your name and username and any information you think will be useful to the grader; and then git push origin master
to submit it.
- update the
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.
- you can even split
- 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>
- the
- 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 thestyle="..."
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
h2
s the same way.
This is an aside. See how it’s floating over here on the right?
- unless it makes more sense to style e.g. all the
- 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’smax-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
, andmargin
- super crucial important onescolor
andbackground
- basic coloringfont-family
- no more Times New Roman okfont-size
- percentages are a common unit to use with thistext-align
,text-decoration
,font-weight
, andfont-style
- more text stuffborder-radius
- don’t go TOO crazy.text-shadow
andblock-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 withsetAttribute
. - 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? :)
- in your HTML, put an
- 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 thatmake_thing
button which callsmakeThing()
.
- Inside it, add a
- now when you click that button, a thing should be inserted. over and over and over.
- back in your JS, make a
- 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.