diff --git a/levels/level-0.md b/levels/level-0.md index 1189fa5..961daa9 100644 --- a/levels/level-0.md +++ b/levels/level-0.md @@ -2,11 +2,11 @@ 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. +> 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,30 +16,31 @@ 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 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))". +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 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 420232e..0c3aac3 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,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. 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. @@ -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 @@ -42,3 +57,12 @@ 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: + +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.