├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ └── project-submission.md ├── .gitignore ├── CODE_REVIEW_CHECKLIST.md ├── CSS_FRAMEWORKS.md ├── LICENSE ├── PROJECT_DESCRIPTION_TEMPLATE.md ├── README.md ├── UI_REVIEW.md └── package.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | patreon: CodingGardenWithCJ 2 | custom: ['https://coding.garden/support'] 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/project-submission.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Project Submission 3 | about: Template for Project Submission 4 | title: " Project Submission" 5 | labels: initial submission 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Project Name / Title 11 | 12 | > Give your project a good descriptive name 13 | 14 | ## Your Name / Title 15 | 16 | > What should we call you? 17 | 18 | ## Project Description 19 | 20 | > Describe your project in 2 - 3 sentences. (Copy from your Project Description in your github repo) 21 | 22 | * Link to your github repo / project description file: 23 | 24 | ## What 3rd Party Web API do you plan to use? 25 | 26 | * Link to the API documentation here: 27 | 28 | ## Which of the following describes you: 29 | 30 | * [ ] YouTube Subscriber 31 | * [ ] Twitch Follower 32 | * [ ] Patreon Patron 33 | * [ ] Superchat Donor 34 | * [ ] Streamlabs Donor 35 | * [ ] Coding Garden Moderator 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /CODE_REVIEW_CHECKLIST.md: -------------------------------------------------------------------------------- 1 | # Code Review Checklist 2 | 3 | ### README 4 | 5 | * [ ] Readme includes instructions for running the project locally 6 | 7 | ### HTML 8 | 9 | * [ ] Consistent Indentation 10 | * [ ] Includes meta viewport tag for mobile devices 11 | * `` 12 | * [ ] CSS Links and Font Links are in the head of the document 13 | * [ ] JavaScript files are linked at the bottom of the page OR at the top with an onload function OR at the top with a defer attribute 14 | * [ ] Uses semantic tags where available 15 | * header, time, main, nav, article, section etc. 16 | * See this article for more: https://html.com/semantic-markup/ 17 | * [ ] Title / Header links back to home page 18 | * [ ] No extra elements. Only includes the necessary elements to make things work. 19 | 20 | ### JavaScript 21 | 22 | * [ ] Consistent semicolon usage. Either do or do not. There is no inbetween. 23 | * [ ] Consistent quote usage. Either `'` or `"`, don't mix. 24 | * [ ] Consistent indentation. 25 | * [ ] Reasonable max line length. Wrap / reformat code when it gets too long. 26 | * [ ] Variable / Function names are clear and concise. 27 | * [ ] No abbreviations. 28 | * [ ] Variable / Function naming convention is consistent. 29 | * camelCase or PascalCase or snake_case 30 | * [ ] Strings used more than once are in a variable. 31 | * API_URL etc. 32 | * [ ] Functions are as few lines as possible. Code reads like a sentence. 33 | * [ ] Function names dictate intent. 34 | * [ ] Nested loops avoided where possible. 35 | * [ ] Functions take in a reasonable number of parameters. Ideally 3 or less params. Otherwise, use an options object. 36 | * [ ] No extra variables. 37 | 38 | ### CSS 39 | 40 | * [ ] Consistent indentation 41 | * [ ] Consistent naming convention 42 | * [ ] Uses app specific prefix where necessary 43 | * [ ] No duplicate styles. Re-use where applicable. -------------------------------------------------------------------------------- /CSS_FRAMEWORKS.md: -------------------------------------------------------------------------------- 1 | # CSS Frameworks 2 | 3 | There are a lot of CSS frameworks out there and this is by no means an exhaustive list. Checkout the project on github to get an idea of popularity and how maintained it is. Also, look at the project documentation and make sure it makes sense to you. 4 | 5 | * [Bootstrap](http://getbootstrap.com/) 6 | * [Bootswatch, free bootstrap themes](https://bootswatch.com/) 7 | * [Bulma](http://bulma.io/) 8 | * [Bulmaswatch, free bulma themes](https://jenil.github.io/bulmaswatch/) 9 | * [Materialize CSS](http://materializecss.com/) 10 | * [Foundation](http://foundation.zurb.com/) 11 | * [Pure CSS](http://purecss.io/) 12 | * [Material Design Lite](https://getmdl.io/started/) 13 | * [Semantic UI](http://semantic-ui.com/) 14 | * [Baseguide](http://basegui.de/) 15 | * [Siimple](http://siimple.juanes.xyz/) 16 | * [Skeleton CSS](http://getskeleton.com/) 17 | * [Turret CSS](http://turretcss.com/) 18 | * [uikit](https://getuikit.com/) 19 | * [Tailwind CSS](https://tailwindcss.com/) 20 | 21 | > If there is another CSS framework that you think should be listed here, please open a pull request. 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Coding Garden with CJ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /PROJECT_DESCRIPTION_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Project Name / Title 2 | 3 | > Give your project a good name like: MyPantry or BestNews instead of project-01 4 | 5 | ## 2 - 3 Sentence Project Description (Elevator Pitch) 6 | 7 | > In 2 to 3 sentences, describe what your project is, how people will use it 8 | 9 | ## What is your motivation for creating this project? 10 | 11 | > Enter your motivation for this project 12 | 13 | ## How will users interact with your web site? 14 | 15 | > Describe the user interaction involved, e.g. search form, settings check boxes, a series of steps to get some results etc. 16 | 17 | ## What 3rd Party API(s) will you integrate with? 18 | 19 | * Link to the API documentation here 20 | 21 | ## Tech Stack 22 | 23 | * CSS Framework you will use - or no framework 24 | * Any 3rd party JS libraries like maps, data viz etc. 25 | 26 | ## Will you try to implement any stretch features? 27 | 28 | * 29 | 30 | ## What will be your process? 31 | 32 | * What project management tool will you use? 33 | * How often will you commit your code? 34 | * How will you test your web site? 35 | * How will you design the layout of your website? Will you use a wireframing tool? Will you draw it on paper? -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Seedling School 2 | 3 | ## 01 - Frontend Project 4 | 5 | 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. 6 | 7 | ## Goals 8 | 9 | These are the required goals for the project. Every project should _at least_ meet these goals. 10 | 11 | * General 12 | * Demonstrate your ability to build basic multi page frontend websites 13 | * Demonstrate your ability to deploy a website to the web so anyone can access it 14 | * Demonstrate your ability to debug code with the chrome / firefox dev tools 15 | * Demonstrate your ability to manage a project with a tool like trello or github projects 16 | * Demonstrate your ability to create wireframes and implement those wireframes 17 | * Demonstrate your ability to complete a project to MVP (Minimum Viable Product) within 1.5 weeks 18 | * Demonstrate your ability to use a REST API tool to test requests to a 3rd party API 19 | * HTML 20 | * Demonstrate your ability to create html pages that link to each other 21 | * Demonstrate your ability to use semantic HTML tags 22 | * Demonstrate your ability to use accessible alt tags 23 | * JavaScript 24 | * Demonstrate your ability to take in user input 25 | * Demonstrate your ability to make API requests with front-end JavaScript 26 | * Demonstrate your ablity to handle CORS requests / errors 27 | * Demonstrate your ability to use and manipulate data from a 3rd party web API 28 | * Demonstrate your ability to handle errors gracefully 29 | * Demonstrate your ability to traverse and manipulate the DOM (Document Object Model) with Vanilla JS (No frameworks like Vue or libraries like jQuery) 30 | * Demonstrate your ability to select elements in the DOM 31 | * Demonstrate your ability to modify elements in the DOM 32 | * Demonstrate your ability to add elements to the DOM 33 | * CSS 34 | * Demonstrate your ability to use a CSS Framework (see a list of CSS Frameworks [here](./CSS_FRAMEWORKS.md)) to create responsive and adaptive layouts 35 | 36 | ## What you will build 37 | 38 | Your website should have 2 HTML pages. 39 | 40 | * 1st Page - Landing Page 41 | * Title of the project 42 | * Description of the project 43 | * What it is 44 | * Why you built it 45 | * How people can use it 46 | * Link to your github / portfolio site 47 | * Link to the 2nd page (Application page) 48 | * 2nd Page - Application Page 49 | * Will take in user input 50 | * For example 51 | * Search form 52 | * Settings check boxes 53 | * Use user input to contact a 3rd party API for data 54 | * Add the data from the 3rd party API to the page 55 | * Your website will be deployed to a service like netlify, surge, heroku, github pages or now.sh so that others can access / use it 56 | 57 | ## Example Project Ideas 58 | 59 | * Allow user to enter stock names and view a realtime chart of stock price 60 | * Same idea, but with crypto 61 | * Use a Nutrition API too allow a user to enter the contents of their pantry to get nutritional information 62 | * Use a Movie API to allow a user to search for Movie descriptions / posters 63 | * Use an Image API to allow a user to search and favorite images (favorites stored in local storage) 64 | * Use a News API to search for news articles 65 | * Use a places / restaurant API to list restaurants near a user 66 | * Use the ISS API to show the current location of the ISS on a map 67 | * Use a Rocket Launch History API to allow the user to see if a rocket was launched on a specific day 68 | * A trip planner 69 | * Use ride share API to calculate ride cost 70 | * Use a places search API to find hotels in a given place 71 | * Use a places search API to find things to do in a given place 72 | * Allow the user to save a list of things to do in the browser (localstorage or indexdb) 73 | * Use a game stats API to allow the user to search for top gamers of a given game 74 | 75 | ## How to Participate 76 | 77 | 1. Copy the Project Description Template into your own git repo 78 | * Copy the description from [here](https://raw.githubusercontent.com/CodingGarden/seedling-school-01-frontend-project/master/PROJECT_DESCRIPTION_TEMPLATE.md) 79 | * Do not fork or clone this repo. 80 | * Create your own repo on github named after your application 81 | 2. Fill out Project Description Template in your own git repo and push to github 82 | 3. [Open an issue on this repo](https://github.com/CodingGarden/seedling-school-01-frontend-project/issues/new) with a link to your project description 83 | * Link to the description file 84 | * Paste your 2 - 3 sentence description 85 | * Link to the API you plan to use 86 | 4. Leave a comment on the issue as to the current state of your project 87 | * Submitted / Description under review 88 | * Project Started 89 | * Need a lesson on a topic 90 | * Need Help with a Bug 91 | * Project Deployed 92 | * Waiting for Code Review 93 | * Waiting for Feedback 94 | 95 | > See the [Code Review Checklist](./CODE_REVIEW_CHECKLIST.md) and [UI Review Checklist](./UI_REVIEW.md) to know what I'll be looking for. 96 | 97 | ## Example 3rd party web APIs to use 98 | 99 | > NOTE: you will want to find an API that does not require OAuth / authentication, and is completely open or only requires an API key. 100 | 101 | * Weather API 102 | * News / Articles API 103 | * Movie API 104 | * Picture API 105 | * Wikipedia API 106 | * Nutrition API 107 | * Recipe API 108 | * Nasa API 109 | * Trading API 110 | * Crypto Currency API 111 | * Hotel API 112 | * Watson API 113 | * Pokemon API 114 | * Game Stats API 115 | 116 | * See a full list of many different Free / Open Web APIs you can use: 117 | * https://github.com/public-apis/public-apis 118 | * https://apilist.fun/collection/free-apis 119 | * https://duckduckgo.com/?q=free+web+apis&ia=software 120 | * https://www.google.com/search?hl=en&q=free%20web%20apis 121 | * https://www.programmableweb.com/apis/directory 122 | 123 | ## In Scope 124 | 125 | You can use 3rd party javascript / css libraries for: 126 | 127 | * Data Visualization 128 | * Maps 129 | * pdf renderer 130 | * Icons 131 | * Fonts 132 | 133 | ## Out of Scope 134 | 135 | You should not have any of these things in your project, (To help with consistent project feedback / project feasiblity): 136 | 137 | * User Login 138 | * Custom Backend API (Like express / django etc.) 139 | * Custom Backend Database (Mongo, MySQL) 140 | * Firestore / firebase 141 | 142 | ## FAQ 143 | 144 | * What is deadline for submissions? 145 | * No deadline, but try to complete your project with 1.5 weeks from the time you start. 146 | * The community will be checking for new issues / comments on a regular basis, so you can start this project at anytime. 147 | 148 | ## Stretch Goals 149 | 150 | Not required, but if you want to go above and beyond: 151 | 152 | * Use a web browser API like geolocation, battery / device, gamepad etc. 153 | * Use a linter (eslint) 154 | * Mobile first approach 155 | * SEO friendly tags 156 | * UI Animations 157 | * Docker 158 | * Build process with babel / webpack / gulp / scss / less etc. 159 | * Use PostCSS for cross browser compatibility 160 | * Use plain CSS with Flexbox / grid instead of a CSS Framework 161 | * Settings persistence in the browser with Local Storage or IndexDB 162 | * Hard coded username / password checked against local storage 163 | * Structure your javascript code in an MV* pattern (No 3rd party libraries) 164 | * Use a state management pattern in your JavaScript code (No 3rd party libraries) 165 | * Multiple pages with DOM manipulation (SPA) instead of multiple html files. 166 | * Document JavaScript with JSDoc 167 | * E2E testing 168 | * PWA 169 | * Any constraint you want to put on yourself to get better at a particular technology 170 | * Only ES5 (No ES6+ features) 171 | * Functional Programming 172 | * IE9 compatibility 173 | * etc. 174 | * 100% lighthouse score 175 | * Use a CI / CD pipeline 176 | 177 | > If you think of more stretch goals, feel free to open a pull request to update this list. 178 | 179 | ## TODO: (For CJ on stream) 180 | 181 | * [ ] Create an Overall Project Rubric to use for consistent reviews and self guidance 182 | -------------------------------------------------------------------------------- /UI_REVIEW.md: -------------------------------------------------------------------------------- 1 | # UI Review 2 | 3 | * [ ] Fonts choices are consistent 4 | * [ ] Body font is good for reading 5 | * [ ] Loading indicators are shown when there is background processing (API requests, calculations etc.) 6 | * [ ] Page responds nicely to different screen sizes 7 | * [ ] Images resize accordingly 8 | * [ ] Images maintain aspect ratio 9 | * [ ] Columns break at smaller screen sizes 10 | 11 | 12 | # Stretch (Not required, but nice to have) 13 | 14 | * [ ] Elements in a list fade out when leaving and fade in when appearing -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "01-frontend-project", 3 | "version": "1.0.0", 4 | "description": "Instructions and Checklists for the Seedling School - Frontend Project 1", 5 | "keywords": [], 6 | "author": "CJ R. (https://w3cj.now.sh)", 7 | "license": "MIT" 8 | } 9 | --------------------------------------------------------------------------------