with class attributes to identify sections for specific styling.
• Additional points for using an advanced feature for any of the above elements.
• Validate your HTML Syntax using the W3C Markup Validation Service (Links to an external site.) and correct any errors.
CSS
• Create at least 6 unique CSS declaration blocks (that start with a { and end with })
• Create at least 12 unique CSS rules across the 6 declaration blocks (rules end in a semicolon (;))
• Create a set of CSS style rules that apply to every page in your site
• Use CSS to change the layout the elements on the page (centering images, putting a nav bar at the top or bottom). Basically, you should use CSS to change the location of where an element would normally appear on the page. See this article on CSS Layouts. (Links to an external site.)
• Use CSS to transform the style of text so that it isn’t the browser default
• Use CSS to change the style of hyperlinks. This should include at least one pseudo class (eg. active, visited)
• Use CSS to style repeating navigation elements (e.g. nav link to other pages)
• Use CSS to improve the overall aesthetics of your site. This is subjective, but there are some basic priciples you can use (text isn’t small, colors don’t clash, design is consistent, spelling/grammar, etc.).
Javascript
• Write atleast 2 unique Javascript functions that access HTML elements, modify the page content, and/or create some interactivity.
• Attach a JavaScript event listeners to 2 specific elements and have them change the style and structure of the page (like showing or hiding list items or inverting all of the colors on the site).
Submission
• Submit the link to your Glitch project page on in Assignment 1 on Canvas.
• Fill out and submit the Assignment 1 Cover Sheet
Rubric
Assignment 1 Rubric
Assignment 1 Rubric
Criteria
Ratings
Pts
This criterion is linked to a Learning OutcomeCode runs without any errors displayed in the console
All the Javascript you write should fire as a result of some action on some page on your site, and when it does, it should do its job without complaint, either in an alert dialog or in the browser console.
3.0 pts
Ayyyy!
Your Javascript runs without errors. Isn’t that satisfying?
2.0 pts
Almost
Your Javascript is very close, but runs with a minor error or two.
1.0 pts
Meh.
You wrote some Javascript, but it has fundamental logical errors and would have to be seriously modified for it to run successfully and do the thing you meant for it to.
0.0 pts
Wait, wut?
None of your Javascript runs successfully, or you wrote no meaningful Javascript at all.
3.0 pts
This criterion is linked to a Learning OutcomeCode has appropriate comments
Great submissions will have appropriate code comments describing what your Javascript does. You don’t have to comment every line, but describe what’s going on, especially if YOU or possibly some unknown developer wouldn’t immediately get it.
2.0 pts
Dope!
You have appropriate comments that make your code clear and readable.
1.0 pts
Hmm…
You have SOME comments, but they don’t help a ton with clarity, or there are notable portions of the code that don’t have any comments and could use some.
0.0 pts
I beg ur pardon
Your code has either no comments, nonsensical comments, or comments that lead me to think you’re planning some kind of bank heist.
2.0 pts
This criterion is linked to a Learning OutcomeSubmitted a coversheet with required information
You filled out the handy coversheet describing your assignment, ideally in a way readable by other humans.
3.0 pts
Killing it!
Your coversheet is completely filled out, easy to read, and addresses all fields meaningfully.
2.0 pts
OK, sure
Your coversheet is mostly filled out, mostly intelligible, and/or mostly useful when I use it to assess your assignment.
1.0 pts
Well…
Your coversheet has multiple blank fields, is largely illegible, or generally doesn’t help me understand what you did for your assignment.
0.0 pts
Ooof
Your coversheet is missing, almost entirely blank, or you turned in a restaurant menu by accident.
3.0 pts
This criterion is linked to a Learning OutcomeCode passes HTML validation
Run your HTML through the validator at https://validator.w3.org/Links to an external site.and serve its mighty will.
5.0 to >4.0 pts
YEAH THAT’S HOW WE DO
No errors, and you get the sense that the validator maybe wants to hug you because it sees that so rarely.
4.0 to >1.0 pts
Various shades of “Good” to “I guess”
You have some validation errors. 4 = Just a couple, 3 = a few, 2 = a lot.
1.0 to >0 pts
HOLY
OMG so many errors
5.0 pts
This criterion is linked to a Learning OutcomeIncludes 5 well-structured HTML pages
You came, you saw, you hypertexted-it right there in the jaw.
5.0 to >0.0 pts
1 point per page, y’all
I won’t be cruel, so show me 5 deece pages and we’ll call it good.
0.0 pts
Huh.
You have no pages, or none of them are remotely semantic HTML. Come see me at office hours; we’ll talk about it.
5.0 pts
This criterion is linked to a Learning OutcomeIncludes the required elements
3 points for each of table, list, images, and an additional 2 points for using an advanced feature of any of the above (like a rowspan/colspan, nested list, etc.)
11.0 to >0.0 pts
You did some amount of the things
I’ll give you comments on what you missed and/or could improve.
0.0 pts
You did zero things.
11.0 pts
This criterion is linked to a Learning OutcomeUsed the div and span elements with class attributes
Div and Span are royalty in HTML, and you will treat them as such.
4.0 pts
Yuh-huh!
You used both div and span, with class attributes and everything. Nice.
3.0 pts
Yeah, I’m into it
You used both but maybe forgot a class attribute on one or something.
2.0 pts
Whoooaaaa, we’re halfway there
You used div but not span or span but not div.
1.0 pts
We can rebuild it
You used ONE of either div or span, and didn’t even class it up with a class attribute. Come on, you got this. spans are fun.
0.0 pts
Yowza
On the bright side, you performed the nigh-impossible task of creating an HTML document with no divs or spans. On the less-bright side, that wasn’t the assignment.
4.0 pts
This criterion is linked to a Learning OutcomeUse 5 semantic elements in the HTML of each page
Semantic elements are ones like article, section, header, footer, nav, etc.
3.0 pts
That’s just semantics!
You used at least 5 semantic elements in every page and did so with authority and grace.
2.0 pts
Semantically inclined
You used 5 semantic elements on a couple of pages, or generally used 3-4+, but could have gone deeper. It’s OK. You’ll get ’em next time.
1.0 pts
Dunno about this
You used a small number of semantic elements, or you used most semantic elements incorrectly.
0.0 pts
Goose egg
For you, on this assignment, semantic elements were things that happened to other people. They’re really important. Google em!
3.0 pts
This criterion is linked to a Learning OutcomeCode passes CSS validation
It’s time to make your pilgrimage to the misty mountaintops of the CSS validator at https://jigsaw.w3.org/css-validator/Links to an external site.. Go forth and validate.
5.0 to >4.0 pts
It’s just so beautiful
No CSS validation errors. Please feel a lovely warm glow inside now.
4.0 to >0.0 pts
There were some (hopefully minor?) struggles
Your CSS had a nonzero number of validation errors. More errors means less points. The Great Balance.
0.0 pts
Uh hang on rq
You literally don’t have CSS. Why don’t you love CSS? Google “CSS Zen Garden” for inspiration.
5.0 pts
This criterion is linked to a Learning OutcomeInclude 6 unique CSS declaration blocks
12 points per rule, and 2 more for using a creative cool secret rule that you didn’t learn in class or doing other clever stuff. You should also, at minimum, do these things:
- Transform text style
- Change the style of hyperlinks
- Unique styles for repeating navigation elements
- Use the box model in at least 2 property declarations (e.g. border, padding, margin)
- Additional 2 points for creativity or using a property not covered in class
26.0 to >25.0 pts
Stylin’
You made 12 or more beautiful rules and did all the required thingies. That’s pretty alright.
25.0 to >0.0 pts
You did some things, but maybe not all of the things
You made some rules, but maybe not enough, or maybe you missed a key requirement, or maybe you were just missing that tiny spark of creativity. Or maybe all of the above.
0.0 pts
The garden is wilting.
Seriously, “CSS Zen Garden.” Check it out.
26.0 pts
This criterion is linked to a Learning OutcomeCSS styles are applied to each page
Every page has SOME amount of CSS linked in, and at least one declaration applies to every page.
3.0 pts
Yes!
You did that thing I just described.
0.0 pts
No 🙁
You didn’t do the thing I said.
3.0 pts
This criterion is linked to a Learning OutcomeUsed CSS to change the layout of elements on a page
In at least one case, you meaningfully affected the layout of the page using CSS. (Hint: try “float”!)
5.0 pts
Yeah, for sure
You did the thing! A page was affected by your mighty CSS stylus.
0.0 pts
Aww.
You didn’t affect the layout of any pages with CSS.
5.0 pts
This criterion is linked to a Learning OutcomeOverall site aesthetics
You made some noticeable effort to make things look nice. It’s okay if you’re not a designer – do your best!
2.0 pts
So preeettyyyyyy!
Your site has some visual coherence – I can tell you tried to make it look nice and probably totally succeeded. Design is hard! At least for me.
1.0 pts
OK, I see you
Your site has clear thought put into its design/aesthetics, but you could have pushed a little harder to make it a pleasing experience.
0.0 pts
Um.
Your site doesn’t have much good styling, or you have a lot of grammatical/spelling errors, that kinda thing.
2.0 pts
This criterion is linked to a Learning OutcomeCreated 2 unique Javascript functions that access HTML elements, modify the page content, and/or create some interactivity
Javascript is cool. Bling your site out with some!
10.0 to >9.0 pts
That’s so siiiiick!
You created at least 2 functions that do cool and pleasing stuff and make the site a better experience. Nice, you JS ninja, you.
9.0 to >0.0 pts
JS magic
You wrote some Javascript, and it wasn’t perfect, but darn it if it didn’t do some stuff. This one scales based on how well you did. I’m out of jokes.
0.0 pts
Could you please just
You didn’t have JS, or it’s all broken, or I can see clear evidence that you’re behind the most recent hack on Microsoft’s databases.
10.0 pts
This criterion is linked to a Learning OutcomeUse event listeners for 2 specific elements (5 points each)
You created Javascript functions that fire when events happen on two elements. And BOOM goes the dynamite.
10.0 pts
YASSSS
You created two event listeners, and they do two different things at two different times. It’s like patting your head and rubbing your tummy, but for web development.
5.0 pts
Well, you patted your head
You created one successful event listener, or you have two but they don’t quite work.
0.0 pts
A total nonevent
You don’t have event listeners, or they clearly don’t work at all.
10.0 pts
This criterion is linked to a Learning OutcomeUsed 6 unique CSS declaration blocks
Your CSS across all pages has at least 6 declaration blocks, that you may select efficiently and style powerfully.
3.0 pts
The holy declaration
Six is the number of the declarations, and the number of the declarations shall be six.
0.0 pts
I declare bankruptcy
You don’t have six unique declarations.
3.0 pts