Seedling School
01 - Frontend Project
For your first project, you will build a frontend website with HTML, CSS and JavaScript. The website will communicate and integrate with a 3rd party Web API.
Goals
These are the required goals for the project. Every project should at least meet these goals.
- General
- Demonstrate your ability to build basic multi page frontend websites
- Demonstrate your ability to deploy a website to the web so anyone can access it
- Demonstrate your ability to debug code with the chrome / firefox dev tools
- Demonstrate your ability to manage a project with a tool like trello or github projects
- Demonstrate your ability to create wireframes and implement those wireframes
- Demonstrate your ability to complete a project to MVP (Minimum Viable Product) within 1.5 weeks
- Demonstrate your ability to use a REST API tool to test requests to a 3rd party API
- HTML
- Demonstrate your ability to create html pages that link to each other
- Demonstrate your ability to use semantic HTML tags
- Demonstrate your ability to use accessible alt tags
- JavaScript
- Demonstrate your ability to take in user input
- Demonstrate your ability to make API requests with front-end JavaScript
- Demonstrate your ablity to handle CORS requests / errors
- Demonstrate your ability to use and manipulate data from a 3rd party web API
- Demonstrate your ability to handle errors gracefully
- Demonstrate your ability to traverse and manipulate the DOM (Document Object Model) with Vanilla JS (No frameworks like Vue or libraries like jQuery)
- Demonstrate your ability to select elements in the DOM
- Demonstrate your ability to modify elements in the DOM
- Demonstrate your ability to add elements to the DOM
- CSS
- Demonstrate your ability to use a CSS Framework (see a list of CSS Frameworks here) to create responsive and adaptive layouts
What you will build
Your website should have 2 HTML pages.
- 1st Page - Landing Page
- Title of the project
- Description of the project
- What it is
- Why you built it
- How people can use it
- Link to your github / portfolio site
- Link to the 2nd page (Application page)
- 2nd Page - Application Page
- Will take in user input
- For example
- Search form
- Settings check boxes
- For example
- Use user input to contact a 3rd party API for data
- Add the data from the 3rd party API to the page
- Will take in user input
- Your website will be deployed to a service like netlify, surge, heroku, github pages or now.sh so that others can access / use it
Example Project Ideas
- Allow user to enter stock names and view a realtime chart of stock price
- Same idea, but with crypto
- Use a Nutrition API too allow a user to enter the contents of their pantry to get nutritional information
- Use a Movie API to allow a user to search for Movie descriptions / posters
- Use an Image API to allow a user to search and favorite images (favorites stored in local storage)
- Use a News API to search for news articles
- Use a places / restaurant API to list restaurants near a user
- Use the ISS API to show the current location of the ISS on a map
- Use a Rocket Launch History API to allow the user to see if a rocket was launched on a specific day
- A trip planner
- Use ride share API to calculate ride cost
- Use a places search API to find hotels in a given place
- Use a places search API to find things to do in a given place
- Allow the user to save a list of things to do in the browser (localstorage or indexdb)
- Use a game stats API to allow the user to search for top gamers of a given game
How to Participate
- Copy the Project Description Template into your own git repo
- Copy the description from here
- Do not fork or clone this repo.
- Create your own repo on github named after your application
- Fill out Project Description Template in your own git repo and push to github
- Open an issue on this repo with a link to your project description
- Link to the description file
- Paste your 2 - 3 sentence description
- Link to the API you plan to use
- Leave a comment on the issue as to the current state of your project
- Submitted / Description under review
- Project Started
- Need a lesson on a topic
- Need Help with a Bug
- Project Deployed
- Waiting for Code Review
- Waiting for Feedback
See the Code Review Checklist and UI Review Checklist to know what I'll be looking for.
Example 3rd party web APIs to use
NOTE: you will want to find an API that does not require OAuth / authentication, and is completely open or only requires an API key.
-
Weather API
-
News / Articles API
-
Movie API
-
Picture API
-
Wikipedia API
-
Nutrition API
-
Recipe API
-
Nasa API
-
Trading API
-
Crypto Currency API
-
Hotel API
-
Watson API
-
Pokemon API
-
Game Stats API
-
See a full list of many different Free / Open Web APIs you can use:
In Scope
You can use 3rd party javascript / css libraries for:
- Data Visualization
- Maps
- pdf renderer
- Icons
- Fonts
Out of Scope
You should not have any of these things in your project, (To help with consistent project feedback / project feasiblity):
- User Login
- Custom Backend API (Like express / django etc.)
- Custom Backend Database (Mongo, MySQL)
- Firestore / firebase
FAQ
- What is deadline for submissions?
- No deadline, but try to complete your project with 1.5 weeks from the time you start.
- The community will be checking for new issues / comments on a regular basis, so you can start this project at anytime.
Stretch Goals
Not required, but if you want to go above and beyond:
- Use a web browser API like geolocation, battery / device, gamepad etc.
- Use a linter (eslint)
- Mobile first approach
- SEO friendly tags
- UI Animations
- Docker
- Build process with babel / webpack / gulp / scss / less etc.
- Use PostCSS for cross browser compatibility
- Use plain CSS with Flexbox / grid instead of a CSS Framework
- Settings persistence in the browser with Local Storage or IndexDB
- Hard coded username / password checked against local storage
- Structure your javascript code in an MV* pattern (No 3rd party libraries)
- Use a state management pattern in your JavaScript code (No 3rd party libraries)
- Multiple pages with DOM manipulation (SPA) instead of multiple html files.
- Document JavaScript with JSDoc
- E2E testing
- PWA
- Any constraint you want to put on yourself to get better at a particular technology
- Only ES5 (No ES6+ features)
- Functional Programming
- IE9 compatibility
- etc.
- 100% lighthouse score
- Use a CI / CD pipeline
If you think of more stretch goals, feel free to open a pull request to update this list.
TODO: (For CJ on stream)
- Create an Overall Project Rubric to use for consistent reviews and self guidance