From 7ad42e2caedc5b5811611465adf864af1382c3c6 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] 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 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. docs: update Level 0 to use GitHub Pages and move Netlify to Level 500 docs: add final Netlify deployment steps and feature branch instructions to Level 500 fix: remove duplicate info, the link contain all info needed fix: removed redundant info. --- levels/level-0.md | 27 ++++++++++++++------------- levels/level-500.md | 25 +++++++++++++++++++++++-- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/levels/level-0.md b/levels/level-0.md index a670df3..42e681e 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. ## Fork your repository @@ -11,30 +11,31 @@ The goals of level 0 are to: 2. Fork the repo to your account 3. Do not enable `Include all branches` -## Deploy your site +## Deployment to GitHub Pages -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. +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**. Using GitHub Pages until then 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 forked the GitHub repository called `Project-TV-Show` into your account. - [ ] 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 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 diff --git a/levels/level-500.md b/levels/level-500.md index 4dfed28..0c0e4f2 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 reviewed and 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,12 +13,26 @@ 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. +* **Important:** Test your changes thoroughly on GitHub Pages before moving to the final deployment. + +--- + ## Refactoring Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features. Make a branch and pull request for yourself, and then have your partner review, making sure they understand the changes made. +--- + ## Adding new functionality Level 500 is about adding a front-page which lets users select (and find) shows from your shows list. @@ -25,14 +40,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 @@ -43,6 +58,12 @@ 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) +### Deployment to Netlify + +To complete the project, we will move from GitHub Pages to **Netlify** to practice using a more advanced hosting platform. + +Follow the [Official CYF Netlify Deployment Guide](https://curriculum.codeyourfuture.io/guides/deployment-netlify/) for your project. + ## Submission Once you have finished your level 500 it is ready to submit.