From cde06bba019aa498a5db2f1a16ecb8e018ae323f Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+Grajales-K@users.noreply.github.com> Date: Sun, 26 Apr 2026 20:25:03 +0100 Subject: [PATCH 1/6] docs: update deployment criteria for TV Show project Updated the success criteria to clarify that students should only deploy to Netlify once they reach Level 500. This change helps students avoid exhausting their Netlify build credits during the earlier stages of the project --- levels/level-0.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/levels/level-0.md b/levels/level-0.md index 1189fa5..6d2a020 100644 --- a/levels/level-0.md +++ b/levels/level-0.md @@ -3,10 +3,10 @@ The goals of level 0 are to: * Create a GitHub repository with the starter scaffolding in-place. * Deploy it to Netlify. -* Make sure whenever you push changes your Netlify site will be updated. +* Make sure whenever you push changes, your Netlify site will be updated. > [!WARNING] -> Unlike other projects at CYF, you are not going to _fork_ this project, you're going to create a repository from a template repository. +> Unlike other projects at CYF, you are not going to _fork_ this project; you're going to create a repository from a template repository. ## Create your repository @@ -16,11 +16,12 @@ The goals of level 0 are to: 4. Do not enable `Include all branches` 5. Click the final green button `Create repository from template` -## Deploy your site +## Deployment to Netlify is only required upon reaching Level 500. -1. Follow [the instructions to deploy your site to Netlify](https://curriculum.codeyourfuture.io/guides/deployment-netlify/). -2. Configure your site for auto-deployments. -3. Ensure your Netlify site is named exactly `cyf-USERNAME-tv.netlify.app` where `USERNAME` is your GitHub username. +1. To conserve build credits, only deploy your site after reaching Level 500. +2. Follow [the instructions to deploy your site to Netlify](https://curriculum.codeyourfuture.io/guides/deployment-netlify/). +3. Configure your site for auto-deployments. +4. Ensure your Netlify site is named exactly `cyf-USERNAME-tv.netlify.app` where `USERNAME` is your GitHub username. ## Get set up on your laptop @@ -28,7 +29,7 @@ The goals of level 0 are to: 2. Open your repository in VS Code 3. Open the `index.html` page in Chrome 4. Make sure in Chrome you can see the text "Got 73 episode(s)" in red. If you can't, something has gone wrong. -5. Edit `index.html` to include your name and github username in the page title instead of "(My Name (My GitHub username))". +5. Edit `index.html` to include your name and GitHub username in the page title instead of "(My Name (My GitHub username))". ## Push your changes @@ -41,5 +42,5 @@ The goals of level 0 are to: You have completed level 0 when: - [ ] You have a GitHub repository called `Project-TV-Show` which is not a fork of this repo. - [ ] The `index.html` page on your GitHub project contains your name and GitHub username. -- [ ] Your project is deployed to Netlify at `cyf-USERNAME-tv.netlify.app`. +- [ ] Your project level-500 is deployed to Netlify at `cyf-USERNAME-tv.netlify.app`. - [ ] Your deployed project has your name and GitHub username in its title. From a10e80ecf2779a0d91c90f88fc77af660ebcd84a Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+Grajales-K@users.noreply.github.com> Date: Sun, 26 Apr 2026 20:34:14 +0100 Subject: [PATCH 2/6] Update Level 500 guidelines and requirements Added best practices for Git branching and deployment. Encouraging students to use feature branches for Level 500 and deploy only after final merge to optimize Netlify usage. --- levels/level-500.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/levels/level-500.md b/levels/level-500.md index 420232e..cf4c5ac 100644 --- a/levels/level-500.md +++ b/levels/level-500.md @@ -5,6 +5,7 @@ For level 500, you should switch back to your original codebase. You should have merged someone else's level 400 implementation. Once again, compare their implementation to yours. Think: + 1. How is it different? 2. What do you prefer about your implementation? 3. What do you prefer about their implementation? @@ -12,6 +13,16 @@ Once again, compare their implementation to yours. Think: Have a discussion about your answers to these questions. In class, together you should give a 3 minute talk about your conclusions. +--- + +### Technical Workflow + +**Best Practice: Use Feature Branches** +To maintain a clean workflow, follow these steps for Level 500: +* Once you have merged Level 400 and are satisfied with the changes, **create a new branch** (e.g., `feature/level-500`) to continue your development. +* After completing all Level 500 requirements on this branch, merge it into your main branch. +* **Only then** should you deploy your final site to Netlify to ensure your build credits are used for the completed version. + ## Refactoring Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features. @@ -25,14 +36,14 @@ Level 500 is about adding a front-page which lets users select (and find) shows ### Requirements 1. When your app starts, present a listing of all shows ("shows listing") - 1. For each show, you must display at least name, image, summary, genres, status, rating, and runtime. + 1. For each show, you must display at least the name, image, summary, genres, status, rating, and runtime. 2. When a show name is clicked, your app should: 1. Fetch and present episodes from that show (enabling episode search and selection as before) 2. Hide the "shows listing" view 3. Add a navigation link to enable the user to return to the "shows listing" 1. When this is clicked, the episodes listing should be hidden 4. Provide a free-text show search through show names, genres, and summary texts -5. Ensure that your episode search and episode selector controls still work correctly when you switch from shows listing to episodes listing and back +5. Ensure that your episode search and episode selector controls still work correctly when you switch from shows listing to the episodes listing and back 6. During one user's visit to your website, you should never fetch any URL more than once. #### Screenshot of minimal version From d7be000610279bc7b2f0ce5381628cca247e5029 Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+Grajales-K@users.noreply.github.com> Date: Tue, 28 Apr 2026 20:54:39 +0100 Subject: [PATCH 3/6] docs: update Level 0 to use GitHub Pages and move Netlify to Level 500 --- levels/level-0.md | 35 +++++++++++++++++++++-------------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/levels/level-0.md b/levels/level-0.md index 6d2a020..94efe80 100644 --- a/levels/level-0.md +++ b/levels/level-0.md @@ -2,8 +2,8 @@ The goals of level 0 are to: * Create a GitHub repository with the starter scaffolding in-place. -* Deploy it to Netlify. -* Make sure whenever you push changes, your Netlify site will be updated. +* Deploy it to **GitHub Pages**. +* Make sure whenever you push changes, your live site will be updated. > [!WARNING] > Unlike other projects at CYF, you are not going to _fork_ this project; you're going to create a repository from a template repository. @@ -16,31 +16,38 @@ The goals of level 0 are to: 4. Do not enable `Include all branches` 5. Click the final green button `Create repository from template` -## Deployment to Netlify is only required upon reaching Level 500. +## Deployment to GitHub Pages -1. To conserve build credits, only deploy your site after reaching Level 500. -2. Follow [the instructions to deploy your site to Netlify](https://curriculum.codeyourfuture.io/guides/deployment-netlify/). -3. Configure your site for auto-deployments. -4. Ensure your Netlify site is named exactly `cyf-USERNAME-tv.netlify.app` where `USERNAME` is your GitHub username. +To keep your project visible from the start without exhausting Netlify build credits, we will use GitHub Pages for the initial levels. + +1. On GitHub.com, navigate to your repository's **Settings** tab. +2. Click on **Pages** in the left-hand menu. +3. Under **Build and deployment**, ensure "Deploy from a branch" is selected. +4. Select your `main` branch and the `/ (root)` folder, then click **Save**. +5. Your site will be live at `https://YOUR_USERNAME.github.io/Project-TV-Show/` (it may take a minute to appear). +6. For a detailed walkthrough, follow the [Official CYF Deployment Guide](https://curriculum.codeyourfuture.io/guides/deploying/ghpages/). + +> [!TIP] +> Deployment to **Netlify** is only required upon reaching **Level 500**. This helps conserve build credits during the development phase. ## Get set up on your laptop -1. Clone your repository -2. Open your repository in VS Code -3. Open the `index.html` page in Chrome +1. Clone your repository. +2. Open your repository in VS Code. +3. Open the `index.html` page in Chrome. 4. Make sure in Chrome you can see the text "Got 73 episode(s)" in red. If you can't, something has gone wrong. 5. Edit `index.html` to include your name and GitHub username in the page title instead of "(My Name (My GitHub username))". ## Push your changes 1. Commit your changes to your `index.html` to your git repository (with a clear commit message). -2. Push your changes to your GitHub repository. Make sure they show up on GitHub. -3. Ensure your updated site has been deployed to Netlify. +2. Push your changes to your GitHub repository. +3. Check your GitHub Pages URL to ensure the changes are live. ## Completion criteria You have completed level 0 when: - [ ] You have a GitHub repository called `Project-TV-Show` which is not a fork of this repo. - [ ] The `index.html` page on your GitHub project contains your name and GitHub username. -- [ ] Your project level-500 is deployed to Netlify at `cyf-USERNAME-tv.netlify.app`. -- [ ] Your deployed project has your name and GitHub username in its title. +- [ ] Your project is successfully deployed to **GitHub Pages**. +- [ ] Your deployed project has your name and GitHub username in its title. \ No newline at end of file From 559a208bb225bb28159d763fb3f74dce57b5132b Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+Grajales-K@users.noreply.github.com> Date: Tue, 28 Apr 2026 21:17:10 +0100 Subject: [PATCH 4/6] docs: add final Netlify deployment steps and feature branch instructions to Level 500 --- levels/level-500.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/levels/level-500.md b/levels/level-500.md index cf4c5ac..d5ba017 100644 --- a/levels/level-500.md +++ b/levels/level-500.md @@ -21,7 +21,9 @@ Have a discussion about your answers to these questions. In class, together you To maintain a clean workflow, follow these steps for Level 500: * Once you have merged Level 400 and are satisfied with the changes, **create a new branch** (e.g., `feature/level-500`) to continue your development. * After completing all Level 500 requirements on this branch, merge it into your main branch. -* **Only then** should you deploy your final site to Netlify to ensure your build credits are used for the completed version. +* **Important:** Test your changes thoroughly on GitHub Pages before moving to the final deployment. + +--- ## Refactoring @@ -29,6 +31,8 @@ Feel free to change anything in your codebase which you think will make it easie Have your partner review any changes you have, and make sure they understand them. +--- + ## Adding new functionality Level 500 is about adding a front-page which lets users select (and find) shows from your shows list. @@ -53,3 +57,26 @@ Note: Provided your project meets the above requirements, it can **look** howeve Here is one example layout. ![Screenshot of a website with a drop-down list with the show "Breaking Bad" selected](example-screenshots/example-level-500.jpg) + + +--- + +## Final Step: Professional Deployment to Netlify + +> [!IMPORTANT] +> **Only proceed with this step once all the requirements above are fully functional and tested on your GitHub Pages site.** > This is your final "production" deployment. + +To complete the project, we will move from GitHub Pages to **Netlify** to practice using a professional hosting platform. + +### How to deploy to Netlify: + +1. **Log in:** Go to [app.netlify.com](https://app.netlify.com/) and log in with your GitHub account. +2. **Add a new site:** Click on **"Add new site"** and select **"Import an existing project"**. +3. **Connect GitHub:** Choose GitHub as your provider and select your `Project-TV-Show` repository. +4. **Site Settings:** - Ensure the branch to deploy is `main`. + - Leave "Build command" and "Publish directory" empty. + - Click **"Deploy Project"**. +5. **Customize URL:** - Go to **Site configuration** > **Site details** > **Change site name**. + - Change it to: `cyf-USERNAME-tv.netlify.app` (replacing `USERNAME` with your GitHub username). + +For more details, refer to the [Official CYF Netlify Guide](https://curriculum.codeyourfuture.io/guides/deployment-netlify/). \ No newline at end of file From 1bbbffa894156dc862369ae56b27133d1bc780a5 Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+Grajales-K@users.noreply.github.com> Date: Mon, 11 May 2026 23:18:40 +0100 Subject: [PATCH 5/6] fix: remove duplicate info, the link contain all info needed --- levels/level-0.md | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/levels/level-0.md b/levels/level-0.md index 94efe80..961daa9 100644 --- a/levels/level-0.md +++ b/levels/level-0.md @@ -18,17 +18,10 @@ The goals of level 0 are to: ## Deployment to GitHub Pages -To keep your project visible from the start without exhausting Netlify build credits, we will use GitHub Pages for the initial levels. - -1. On GitHub.com, navigate to your repository's **Settings** tab. -2. Click on **Pages** in the left-hand menu. -3. Under **Build and deployment**, ensure "Deploy from a branch" is selected. -4. Select your `main` branch and the `/ (root)` folder, then click **Save**. -5. Your site will be live at `https://YOUR_USERNAME.github.io/Project-TV-Show/` (it may take a minute to appear). -6. For a detailed walkthrough, follow the [Official CYF Deployment Guide](https://curriculum.codeyourfuture.io/guides/deploying/ghpages/). +Follow the [CYF GitHub Pages Deployment Guide](https://curriculum.codeyourfuture.io/guides/deploying/ghpages/). > [!TIP] -> Deployment to **Netlify** is only required upon reaching **Level 500**. This helps conserve build credits during the development phase. +> Deployment to **Netlify** is only required upon reaching **Level 500**. Using GitHub Pages until then helps conserve build credits during the development phase. ## Get set up on your laptop From 9b08d5d568ac3c7c64011529f08ea7abf06f83e5 Mon Sep 17 00:00:00 2001 From: Karla Grajales <85898762+Grajales-K@users.noreply.github.com> Date: Tue, 12 May 2026 00:05:57 +0100 Subject: [PATCH 6/6] fix: removed redundant info. --- levels/level-500.md | 20 +++----------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/levels/level-500.md b/levels/level-500.md index d5ba017..0c3aac3 100644 --- a/levels/level-500.md +++ b/levels/level-500.md @@ -61,22 +61,8 @@ Here is one example layout. --- -## Final Step: Professional Deployment to Netlify +### Final Step: Professional Deployment to Netlify: -> [!IMPORTANT] -> **Only proceed with this step once all the requirements above are fully functional and tested on your GitHub Pages site.** > This is your final "production" deployment. +To complete the project, we will move from GitHub Pages to **Netlify** to practice using a more advanced hosting platform. -To complete the project, we will move from GitHub Pages to **Netlify** to practice using a professional hosting platform. - -### How to deploy to Netlify: - -1. **Log in:** Go to [app.netlify.com](https://app.netlify.com/) and log in with your GitHub account. -2. **Add a new site:** Click on **"Add new site"** and select **"Import an existing project"**. -3. **Connect GitHub:** Choose GitHub as your provider and select your `Project-TV-Show` repository. -4. **Site Settings:** - Ensure the branch to deploy is `main`. - - Leave "Build command" and "Publish directory" empty. - - Click **"Deploy Project"**. -5. **Customize URL:** - Go to **Site configuration** > **Site details** > **Change site name**. - - Change it to: `cyf-USERNAME-tv.netlify.app` (replacing `USERNAME` with your GitHub username). - -For more details, refer to the [Official CYF Netlify Guide](https://curriculum.codeyourfuture.io/guides/deployment-netlify/). \ No newline at end of file +Follow the [Official CYF Netlify Deployment Guide](https://curriculum.codeyourfuture.io/guides/deployment-netlify/) for your project.