• Stars
    star
    106
  • Rank 325,871 (Top 7 %)
  • Language
  • License
    MIT License
  • Created almost 5 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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.

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
    • Use user input to contact a 3rd party API for data
    • Add the data from the 3rd party API to the page
  • 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

  1. 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
  1. Fill out Project Description Template in your own git repo and push to github
  2. 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
  1. 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.

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

More Repositories

1

mac-setup

This repo contains info on all the apps / tools / settings I use on my Mac.
469
star
2

meower

A basic twitter clone built to demonstrate the full stack.
JavaScript
222
star
3

react-ts-starter

A bare-bones vite + react + typescript starter template with eslint + prettier, vitest + @testing-library and react-router
TypeScript
208
star
4

travel-log

A full stack application to store / list places you have traveled.
JavaScript
198
star
5

listd

listd is a Full Stack App that will allow users to create, share and watch lists of YouTube channels. This app is being built LIVE on Twitch https://twitch.tv/codinggarden
TypeScript
190
star
6

intro-to-typescript

TypeScript
142
star
7

faqs

Welcome to the Coding Garden Frequently Asked Questions! If you are new here and you have a general question, it's very likely I've answered it already.
142
star
8

miniature-umbrella

A url shortener created live on stream in 3133.7 seconds.
JavaScript
139
star
9

inventory-app

JavaScript
115
star
10

entropychat.app

A discord clone made by the Coding Garden Community.
JavaScript
103
star
11

trello-clone

JavaScript
97
star
12

learn-to-code-resources

82
star
13

fresh-spots

A Deno Fresh Full Stack App for sharing lists of places to visit
TypeScript
80
star
14

guest-map

A map application where users can leave messages with their location.
JavaScript
54
star
15

troll-garden

JavaScript
54
star
16

vue-firestore-reddit-clone

Vue
47
star
17

mars-weather-api

JavaScript
41
star
18

coding-improv

JavaScript
39
star
19

vue-3-appstravaganza

Vue
38
star
20

live-chat-manager

A dashboard that allows me to manage incoming chat messages from YouTube and Twitch.
JavaScript
35
star
21

sproutkit

Apps and Components for Twitch Overlays
Vue
34
star
22

frontend-framework-showdown-2020

Build the same Image Search App with Vanilla JS, React.js, Vue.js, Svelte and more!
TypeScript
34
star
23

auth-for-newbs

Vue
34
star
24

twitch-bot

A general purpose twitch bot that will work with multiple channels. (Work in Progress...)
JavaScript
32
star
25

next-travel-log

TypeScript
27
star
26

now-config

JavaScript
26
star
27

react-typescript-guestbook

A guestbook application built with React + TypeScript + React Router + ESLint + Prettier + Material UI + React Hook Form + Easy Peasy
TypeScript
26
star
28

intro-discord-bot

JavaScript
24
star
29

types-of-websites

JavaScript
23
star
30

community-forum

JavaScript
23
star
31

css-challenges

HTML
23
star
32

amazon-price-scraper

JavaScript
22
star
33

higher-order-functions

These are the materials/exercises for the live stream.
JavaScript
22
star
34

intro-dot-net-core-web-api

C#
22
star
35

api

An API for the Coding Garden YouTube / Twitch channel.
JavaScript
22
star
36

news

21
star
37

intro-react-hooks-todo

JavaScript
20
star
38

intro-react-todo

JavaScript
20
star
39

discord-manager

JavaScript
20
star
40

snap-garden

Realtime ephemeral image sharing + maps.
JavaScript
19
star
41

morning-tea

Links to news I discuss on my morning tea stream.
JavaScript
19
star
42

learn-deno-v1.0.0

TypeScript
18
star
43

live-chat-window

JavaScript
17
star
44

101ways-to-deploy-react

JavaScript
16
star
45

react-pixel-art-maker

A simple 8x5 pixel art maker grid. Built with React.
JavaScript
14
star
46

gme-stonks

JavaScript
14
star
47

auth-for-newbs-v2

JavaScript
14
star
48

feathers-chat-svelte

FeathersJS Chat Client built with Svelte
HTML
14
star
49

frontend-framework-showdown

All the code for my frontend framework showdown stream.
TypeScript
13
star
50

deploy-with-now-v2

JavaScript
13
star
51

chess-board

JavaScript
13
star
52

type-one-in-chat

JavaScript
13
star
53

ez-pizza-api

A simple library for interacting with the Dominos Pizza API.
JavaScript
12
star
54

build-simple-jquery

JavaScript
12
star
55

puny.li-url-shortener

A simple Full Stack URL Shortener
HTML
12
star
56

message-board-server

JavaScript
12
star
57

vue-3-hacker-news-client

Vue
12
star
58

SeedlingDrop

JavaScript
12
star
59

tryday-friday

PHP
12
star
60

stonk-ticker

JavaScript
12
star
61

choosing-a-full-stack-framework

TypeScript
11
star
62

message-board-client

Vue
11
star
63

landscaping

This repo is used to track suggestions and ideas from the community for coding garden streams.
11
star
64

dramatic-sound-board

A sound board with dramatic hits, swells, rises, loops and songs.
HTML
11
star
65

twitch-team-shoutout-bot

A bot that detects when a team member has entered the twitch chat and sends a shout out message.
JavaScript
10
star
66

colorado-covid-vaccine-map

JavaScript
10
star
67

coding.garden

The Coding Garden website.
Svelte
10
star
68

things-you-should-learn-before-learning-react

CSS
10
star
69

is-it-new-years-day

A site that tells you if it is new years day or not.
JavaScript
9
star
70

thankfulfor

JavaScript
9
star
71

community-forum-db

JavaScript
9
star
72

vox

JavaScript
9
star
73

AMA

JavaScript
9
star
74

yt-caption-downloader

Download all captions (subtitles) for all videos on a given youtube channel.
TypeScript
9
star
75

vue-vs-react

JavaScript
8
star
76

variety-show

JavaScript
8
star
77

twitch-map-check-in

JavaScript
8
star
78

rgb-led-matrix

Control an Arduino + RGB LED Matrix with Twitch Chat!
JavaScript
8
star
79

vue-todo

Intro to Vue.js: Build a Todo App
HTML
8
star
80

twitch-vote-overlay

JavaScript
8
star
81

stream-overlay-alerts

JavaScript
7
star
82

svelte-appstravaganza

Several small apps built with svelte.
JavaScript
7
star
83

happiness-is

JavaScript
7
star
84

twitter-ml

JavaScript
7
star
85

devpardy

A local 3 player jeopardy app. Based on Vue.js and Electron.
Vue
7
star
86

cj-eye

https://cj-eye.now.sh/
JavaScript
7
star
87

embtr

A simple website / scraper to get embeddable website preview cards.
JavaScript
7
star
88

SeedlingDropV2-RevengeOfTheNewts

JavaScript
7
star
89

youtube-live-chat-api

JavaScript
7
star
90

autocomplete-ui-showdown

TypeScript
7
star
91

learning-to-hack

TypeScript
7
star
92

yt-auto-chapters

JavaScript
7
star
93

pkmn-codes

JavaScript
6
star
94

tdd-game-of-life

JavaScript
6
star
95

video-filter

JavaScript
6
star
96

hit-counter

JavaScript
6
star
97

nature-image-api

JavaScript
6
star
98

vue-state-components-props

This is the code for my live stream.
Vue
6
star
99

down-the-rabbit-hole

6
star
100

front-end-opoly

JavaScript
6
star