A summer review project to practice Javascript and effects.
- Approx. completion time: 5 hours
- Deliverables: 1 HTML file, 1 CSS file, 2 JS files, images
Create a simple demo application for a company called “File Cloud”—the purpose is to show off a few of the interface’s features.
In the downloadable assets there are Illustrator files for all the icons and logos to be used in the interface, as well as two different mockups.
The Javascript file included in the download is a list of all the files to be used in the interface, it cannot be changed, only linked to in your HTML and used to generate the file list.
The Javascript application should have the following features:
- When the page loads, it should loop over everything in
filesand display them on the screen. - When hovering over a file, a delete button becomes visible, once clicked the file fades out and is removed.
- Across the top is a toolbar that allows sorting the files by type, clicking on each type shows only those files—there’s an “All” button to reset the display.
- Pressing the sign out button reloads the page, refreshing all the data.
For an extra challenge make the website better for all users:
- Make the application fully accessible for keyboard users and screen reader users.
- Make the website super performant, following a performance budget.
- ❏ Javascript has all the features listed above.
- ❏ HTML semantics are carefully considered to match the purpose of the content, not the look.
- ❏ Design matches the provided mockups for all screen sizes.
- ❏ User experience matches the demo videos.
- ❏ Fully browser tested.
- ❏ HTML, CSS & JS properly validated.
- ❏ Has lots of detailed commits.
- ❏ No empty or “Untitled”
<title>tags. - ❏ No extra, unused files in the repository.
- ❏ Folders organized properly.
- ❏ Files & folders follow naming conventions.
- ❏ Code files properly indented.
- ❏ Set up as a hosted GitHub repository with
gh-pages.
- ❏ Includes all the appropriate accessibility features.
- ❏ Fully keyboard accessible.
- ❏ Fully accessible via screen readers like VoiceOver.
- ❏ Validates using the Total Validator.
- ❏ Follows and adheres to a performance budget.
- Javascript effects
- Responsive animated dashboard
- Validators
- Browser testing
- Browser testing checklist
- Launch checklist, Web Dev 3
- Javascript accessibility
- Accessibility
- Accessibility checklist
- Performance
- Performance checklist
- Ask someone else from class if they’re available.
- Create an issue on GitHub Issues inside your repository; tag me,
@thomasjbradley, in the issue and I’ll respond there. I may not be as fast, because it’s the summer, but I’ll definitely respond.