-
Notifications
You must be signed in to change notification settings - Fork 1
/
Peer Evaluation
199 lines (166 loc) · 7.32 KB
/
Peer Evaluation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
## Group exercise
4 People / group
## Objectives
- Learn to work in group
- Learn to complete a project so it can be delivered to a client
## Instructions
- Invent a company together and think of four pages that the company needs.
- Divide those pages amongst the group and each design one page.
- Once you are all finished, join those pages together into one page (page below page)
- Publish the result with a github repository (call it `name-of-your-business`)
- Make sure everyone in the group has a repository of the website
- Explain your company in the readme of the repo and put a link to the company 'website' in there
- Add a parallax image header [Example](https://demo.athemes.com/themes/?theme=Sydney)
- Add google maps pinned on the location of your company somewhere on the onepager
- Try to make your website responsive (if you haven't already)
- Mention your phone number somewhere on the onepager, if you click it should (try to) call you
## Assessment
You will do some peer evaluation. Every group will evaluate one other group using the checklist below.
**Your group will also need to add at least one requirement.**
## Adding your own requirement(s)
1. Change this file (directly on github or fork this repo)
2. Add the requirement(s) at the bottom
3. Notify the group on ryver
## What makes a good requirement?
A good requirement for this list is something that people should have been doing already and that we now explicitly write down. It should not be things that would be nice to have, but things that are essential for every self respecing website in <INSERT CURRENT YEAR>.
## Doing the evaluation
1. Create a file in this folder
2. Copy the requirements below into it
3. Tick the right boxes
4. Commit/push the change
## Requirements
### Perfection is not a detail
- [ ] All buttons and links work
(sendbutton in form 405 error, non existing phone number, social media links go to homepage, not your page)
- [X] All elements work and are complete (menu, lists, images, ...)
- [X] Everything on the page has a function, a reason to be there
(Title in footer does not represent the content; Products >< about, history, gallery, contact)
- [X] No dead links
(send button in form)
- [X] English and dutch are not mixed
- [X] No spelling errors
- [X] No grammar errors
- [X] The website is deployed somewhere
- [X] Everything is relevant (no image of a barber on the website of a baker)
### Content
- [X] Openinghours (if needed)
- [X] Address (if needed)
- [X] Google maps
- [X] Clickable email
- [ ] A working form (you can use https://formspree.io)
(send button 405)
### Text life matters aka typography is real
- [X] Some words are bolded
- [ ] Some words are italic
- [X] Some words have a different color
- [X] We aren't using a default font, cause it's not 2004
- [X] Contrast is not too low
(Cookies in header and icon can be hard to see, depending on screen size)
- [X] Typographic hierachy is correct
- [X] Text has a clear intro, middle, conclusion
(short text-blocks, not really clear but ok)
- [ ] Intro, middle, conclusion is style correctly
N.V.T.
- [X] Headline font is a headline font
- [X] Body text font is a body text font
- [X] The text on the page has a good flow
### Style
- [X] Black is almost black but not #000
- [ ] White is almost white but not #fff
(white footer and form is #fff)
- [X] The website is not an ugly color mess
- [X] The styling is consistent
- [X] It is not four totally different pages thrown together
- [X] Everything works even if you are colorblind
(color-scheme looks literally like shit but it works)
### Not everyone has free 4G aka speed matters
- [ ] Pictures are not too heavy
(3 pictures > 8mb)
- [X] Pictures are not pixelated
### A company wants to be found/SEO
- [X] All the keywords this company wants to be found on are on the page
- [X] Page has an H1 tag
- [ ] Page has keyword meta tags
(Keywords are in desciption not in keywords and are SEO, search engine, opitmisation... not cookie related)
- [X] Page has a title with the keywords in
- [X] Page loads fast
### Keep your workspace clean
- [X] No unused files in the repo
(contact.html ?)
- [X] All files have a good, clear name
- [X] Good folder structure
- [X] The CSS folder does not have an image folder
- [X] Not too many files in the root folder
### Git(hub) is what you make it
- [ ] All commits use the correct format (if applied this commit will...)
(50% are good)
- [X] A github description has been filled in
- [ ] A github website has been filled in
(no environment/deployment)
- [ ] Github topics have been filled in
### Readme but also writeme
- [X] No license text in the readme, put it in a seperate file
- [X] But a license is defined
- [ ] And it is included in the readme by name or a quick summary
- [X] The readme says who made it
- [X] The readme says why they made it
- [X] The readme explains what this repo/project is
- [ ] The readme explains why it is on github
- [ ] The readme links to the preview
- [X] The readme contains a nice image
- [X] The readme does not contain the readme/license of dependencies, libraries, templates
- [X] If needed they are included in the repo and are mentioned in the readme
- [X] The readme has a markdown title
- [X] The readme is divided in sections
- [X] The readme is fun to read
- [X] The readme looks good
- [X] The readme is clear, even for someone that has no idea what is going on
### I'm So Meta, Even This Acronym
- [ ] Social media sharing meta tags are correct
- [X] Keywords meta tag
(keywords about seo)
- [X] Description meta tag
(contains keywords, no desciption)
- [X] Title of the page is included
- [X] Favicon is included
- [X] Responsive meta tag is included
- [X] Charset is defined
- [X] Author is defined
### Data is the new oil
- [ ] (Google) analytics
### Perform all the tests
- [X] Lighthouse
- [X] W3C validator
- [X] Monkey test
### Putting the antics back in semantics (but only for the html)
- [X] The html is semanticly correct
(comments between sections are clear, classes itself a bit less)
- [X] Navigation is in a nav
- [X] Lists use list tags
- [X] H tags are used to signal importance
- [X] No div is used where another element is available
- [X] No span is used where another element is available
(A <span> element used to color a part of a text)
- [ ] No inline styling is put on any element
(style in header image and google maps snippet)
- [ ] Id's are only used once
(history, product used multiple times)
- [X] The same 'type' of elements have the same classes
- [x] All images have an alt attribute and a title
(some have no title or alt, most are ok)
### Just kidding CSS deserves some love too
- [X] CSS follows the DRY principle
(.history:firstletter x4 -> .firstletter x1)
- [X] The CSS does not contain conflicting selectors (multiple definition for the same class/id)
- [X] There is no use of !important where it can be avoided
- [X] The page is responsive
### Thermometer goes WHERE???
- [X] Your own style is included after the style of frameworks
- [X] Script tags are put at the end of the body or in the head with async/defer if possible
### Errors are to be avoided
- [X] No http resources are used on an https website
- [X] The console shows no errors
## Learner added requirements
- [X] Use Animation/Transition
- [X] Add a logo
- [X] Use an icon (font awesome,etc.)