diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index b34cfcfc3..ea03447fe 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,13 +1,2 @@ -# These are supported funding model platforms - github: CodeYourFuture -patreon: # Replace with a single Patreon username -open_collective: # Replace with a single Open Collective username -ko_fi: # Replace with a single Ko-fi username -tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel -community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry -liberapay: # Replace with a single Liberapay username -issuehunt: # Replace with a single IssueHunt username -otechie: # Replace with a single Otechie username -lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry custom: https://codeyourfuture.io/donate diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml deleted file mode 100644 index 5fe8ffd09..000000000 --- a/.github/ISSUE_TEMPLATE/config.yml +++ /dev/null @@ -1,14 +0,0 @@ -blank_issues_enabled: false -contact_links: - - name: CYF - url: contact@codeyourfuture.io - about: Please report serious issues here. - - name: Join CYF - url: https://codeyourfuture.io/volunteers/ - about: Join CYF here - - name: CYF Slack - url: codeyourfuture.slack.com - about: Come to #cyf-syllabus-tech and chat - - name: CYF Tech Ed - url: https://github.com/orgs/CodeYourFuture/teams/mentors - about: CYF mentors on Github diff --git a/.github/ISSUE_TEMPLATE/pd-assignment.yml b/.github/ISSUE_TEMPLATE/pd-assignment.yml deleted file mode 100644 index c8bd22980..000000000 --- a/.github/ISSUE_TEMPLATE/pd-assignment.yml +++ /dev/null @@ -1,59 +0,0 @@ -name: PD Coursework -description: Assign a piece of PD coursework -title: "[PD] " -labels: [PD, 🏝 Priority Stretch, πŸ‡ Size Small] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to assign this coursework! - - type: input - attributes: - label: Coursework content - validations: - required: true - - type: input - attributes: - label: Estimated time in hours - description: (PD has max 4 per week total) - validations: - required: true - - type: textarea - attributes: - label: What is the purpose of this assignment? - description: Clearly explain the purpose of this assignment and how trainees can evaluate this. - validations: - required: true - - type: textarea - attributes: - label: How to submit - description: State in clear steps how a trainee can submit this assignment. - placeholder: | - Copy the Google doc to your own Google Drive - Complete the work assigned - When you are ready, move your document to your class Drive - validations: - required: true - - type: textarea - attributes: - label: Anything else? - description: | - Links? References? Anything that will give more context - - Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. - - type: markdown - attributes: - value: | - **Thank you so much.** - - Please now complete this ticket by filling in the options on the sidebar. - - 1. Update labels - - priority -- is this coursework key, mandatory, or stretch? - - size -- help trainees plan their time with rough estimation - 2. Add to project backlog - - add to the project named the same as this repo - - fill in custom fields -- priority, size, hours, week -- to match this issue - - Once your ticket is complete, you may like to check it out on the example project board attached to this repo. - This is so you understand how trainees will use your work. diff --git a/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml b/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml deleted file mode 100644 index ac9da906a..000000000 --- a/.github/ISSUE_TEMPLATE/tech-ed-assignment.yml +++ /dev/null @@ -1,88 +0,0 @@ -name: Tech Ed Coursework -description: Assign a piece of technical coursework -title: "<title>" -labels: [Tech Ed, πŸ• Priority Mandatory, πŸ‚ Size Medium, πŸ“… Module 1] -body: - - type: markdown - attributes: - value: | - Thanks for taking the time to assign this coursework! - - To support our trainees with planning and prioritising their own learning journey, we want our coursework assignments to be more informative. - We don't just want to tell them what to do, we want to tell them stuff like: - - why we are doing it - - what it's "for" (problem-solving, debugging, etc) - - how long they should spend on it, maximum - - how to get help - - how to review it with answers - - how to get it reviewed from mentors and peers - - type: input - attributes: - label: Link to the coursework - validations: - required: true - - type : textarea - attributes: - label: Learning Objectives - description: https://common.codeyourfuture.io/common-theme/shortcodes/objectives/ - placeholder: | - <!--{{<objectives}}--> - - [ ] CYF format, task list formatting - <!--{{</objectives}}--> - - type: textarea - attributes: - label: Why are we doing this? - description: Clearly explain the purpose of this assignment - validations: - required: true - - type: input - attributes: - label: Maximum time in hours - description: (Tech has max 16 per week total) - validations: - required: true - - type: textarea - attributes: - label: How to get help - description: State simply how trainees can get help with this assignment - value: | - Share your blockers in your class channel - https://curriculum.codeyourfuture.io/guides/getting-help/asking-questions/ - - type: textarea - attributes: - label: How to submit - description: State in clear steps how a trainee can submit this assignment. - value: | - Fork the repo to your own GitHub account - Make regular small commits with clear messages - When you are ready, open a Pull Request to the CYF repo - Make sure you fill in the PR template provided - validations: - required: true - - type: textarea - attributes: - label: How to review - description: How to get code review and how to self-review - - type: textarea - attributes: - label: Anything else? - description: | - Links? References? Anything that will give more context - - Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. - - type: markdown - attributes: - value: | - **Thank you so much.** - - Please now complete this ticket by filling in the options on the sidebar. - - 1. Update labels - - priority -- is this coursework key, mandatory, or stretch? Pick one. - - size -- help trainees plan their time with rough estimation. Pick one - - topics -- add all that seem relevant to you. - 2. Add a Sprint label to add to the backlog view - - sprint 1,2,3,4 - - Once your ticket is complete, you may like to add it to the example project board attached to this repo. - This is so you understand how trainees will use your work. Nobody has built a board copier yet, so trainees will be doing this step themselves. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index 3f0e90653..000000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,32 +0,0 @@ -<!-- - -You must title your PR like this: - -REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME - -For example, - -London | May-2025 | Carol Owen | Wireframe - -Complete the task list below this message. -If your PR is rejected, check the task list. - ---> - -## Learners, PR Template - -Self checklist - -- [ ] I have committed my files one by one, on purpose, and for a reason -- [ ] I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | PROJ_NAME -- [ ] I have tested my changes -- [ ] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/) -- [ ] My changes meet the [requirements](./README.md) of this task - -## Changelist - -Briefly explain your PR. - -## Questions - -Ask any questions you have for your reviewer. diff --git a/.github/workflows/validate-pr-metadata.yml b/.github/workflows/validate-pr-metadata.yml new file mode 100644 index 000000000..65df06116 --- /dev/null +++ b/.github/workflows/validate-pr-metadata.yml @@ -0,0 +1,19 @@ +name: Validate PR Metadata +on: + pull_request_target: + types: + - labeled + - unlabeled + - opened + - edited + - reopened + +jobs: + validate_pr_metadata: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: CodeYourFuture/actions/validate-pr-metadata@main + with: + give_more_specific_comment_for_earlier_learners: true + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/Form-Controls/README.md b/Form-Controls/README.md index bfcdf6c0b..86f623d89 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -8,44 +8,60 @@ - [ ] Write a valid form - [ ] Test with Devtools - [ ] Refactor using Devtools +- [ ] Use version control by committing often and pushing regularly to GitHub +- [ ] Develop the habit of writing clean, well-structured, and error-free code <!--{{<objectives>}}>--> ## Task -We are selling t-shirts. Write a form to collect the following data: +We are selling T-shirts. Write a form to collect the following data: Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and size. Writing that out as a series of questions to ask yourself: -1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL +1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters. +2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern. +3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? +4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL All fields are required. Do not write a form action for this project. -## Developers must test their work. +## Acceptance Criteria + +### Developers must test their work. Let's write out our testable criteria. Check each one off as you complete it. -- [ ] I have used HTML only. -- [x] I have not used any CSS or JavaScript. +- [ ] I have only used HTML and CSS. +- [ ] I have not used any JavaScript. ### HTML -- [ ] My form is semantic html. +- [ ] My form is semantic HTML. - [ ] All inputs have associated labels. - [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more. +- [ ] I require a valid name. - [ ] I require a valid email. - [ ] I require one colour from a defined set of 3 colours. - [ ] I require one size from a defined set of 6 sizes. -## Resources +### Developers must adhere to professional standards. + +> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? +These practices reflect the level of quality expected in professional work. +They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. + +- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [ ] My code is consistently formatted +- [ ] My page content is free of typos and grammatical mistakes +- [ ] I commit often and push regularly to GitHub + +## Resources - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) - [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - [Lighthouse](https://developers.google.com/web/tools/lighthouse) - [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..587cfa1d2 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,102 @@ <!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8" /> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <title>My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - - + + + + + + Checking Form + + + + +
+
+ +

Checking Form:

+ +
+ + + +
+ +

+ +
+ + + +
+ +

+ +
+ + + +
+

+
+ + + +
+

+ +
+
+ + \ No newline at end of file diff --git a/GitHomeworkTest b/GitHomeworkTest new file mode 160000 index 000000000..fe49af364 --- /dev/null +++ b/GitHomeworkTest @@ -0,0 +1 @@ +Subproject commit fe49af3642d527c11ca7b2374cbdb56682575ed8 diff --git a/HOW_TO_REVIEW.md b/HOW_TO_REVIEW.md deleted file mode 100644 index 39222358f..000000000 --- a/HOW_TO_REVIEW.md +++ /dev/null @@ -1,66 +0,0 @@ -# Everyone reviews code at CYF - -[![Code Review Flow](code-review-flow.png)](https://curriculum.codeyourfuture.io/guides/reviewing/) - -https://curriculum.codeyourfuture.io/guides/reviewing/ - -Mentors and participants all review code, and collaborate on improving code quality. We are all helping each other to talk, write, and think about code more clearly. - -We are not reviewing code as if we were to merge this PR into production; we are opening a technical conversation for the purpose of insight and development. - -## Key points: - -1. Ask questions instead of making statements: - - **YES:** "Is there another element you could use to group a set of fields in a form? Why might someone use a different element in a form?" - **NO:** "Use fieldset not divs" - -2. Encourage simplicity, clarity, and precision: - - **YES** "There are 15,0000 files in this changelist. Which files should be reviewed?" - **NO** "It doesn't matter; I can try to figure out what you meant." - -3. Respect everyone's work and time: - - **YES** "I think there's some more to do here. Thanks for sharing where you're up to. Can I help you complete this?" - **NO** "This is rubbish. Try harder." - -## Getting your pull request reviewed - -We're using GitHub Labels in our Code Review process. In order for a volunteer to review a pull request, a participant will need to add a "Needs Review" label to it. - -To add a label to a pull request: - -- Open the pull request -- In the right sidebar, click Labels, then select the label you'd like to add - for example: "Needs Review" - -Take a look at our code review process from beginning to end. Let us know if you have any questions or need help! -![Code Review Flow](code-review-flow.png) - -## Labels for feedback - -Reviewers, please add labels (provided) to the PR once you've reviewed. This helps to focus the participant on the areas they should work on, and gives an overview for mentors on what the whole cohort needs to work on. - -## Solutions - -### Where to find solutions? - -You can find the solutions for the module on the `solutions` branch. - -### Solutions branch - -The solutions branch typically contains: - -#### Sample solutions - -Solutions are example answers not the only correct answers. - -#### Common responses guides. - -Everyone is invited to contribute commonly encountered problems, mistakes, misunderstandings, and mental-model errors to our common responses documents. - -Use these resources to inform your code review, get unstuck, and improve your understanding. - -## Guides - -https://curriculum.codeyourfuture.io/guides/reviewing/ diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..aa85ec80b 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -1,38 +1,55 @@ # Wireframe -![Wireframe](./wireframe.png) - -Using the provided wireframe and resources, write a new webpage explaining: - -1. What is the purpose of a README file? -1. What is the purpose of a wireframe? -1. What is a branch in Git? - -There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. - ## Learning Objectives - [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a title, summary, and a link +- [ ] Create three articles, each including an image, title, summary, and a link - [ ] Check a webpage against a wireframe layout - [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) - [ ] Use version control by committing often and pushing regularly to GitHub +- [ ] Develop the habit of writing clean, well-structured, and error-free code +## Task +![Wireframe](./wireframe.png) + +Using the provided wireframe and resources, write a new webpage explaining: + +1. What is the purpose of a README file? +1. What is the purpose of a wireframe? +1. What is a branch in Git? + +The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted. + +There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work. + ## Acceptance Criteria - [ ] Semantic HTML tags are used to structure the webpage. - [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including a title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. - [ ] The webpage is styled using a linked .css file. - [ ] The webpage is properly committed and pushed to a branch on GitHub. +- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. +- [ ] The page footer is fixed to the bottom of the viewport. +- [ ] The page layout closely match the wireframe. + +### Developers must adhere to professional standards. + +> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? + +These practices reflect the level of quality expected in professional work. +They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. + +- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [ ] My code is consistently formatted +- [ ] My page content is free of typos and grammatical mistakes +- [ ] I commit often and push regularly to GitHub ## Resources - [Wireframe](https://www.productplan.com/glossary/wireframe/) - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) - [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) +- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) diff --git a/index.html b/index.html index 80aa49666..255dd89e3 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,102 @@ - - - - - Coursework - - - -

🧐 CYF Coursework Disposable Branch Previews

-
-
    -
  1. -

    Project 1: Wireframe

    -

    - Mentors: - open the assignment in a tab -

    -
    2. -
  2. -

    Project 2: Form Controls

    -

    - Mentors: - open the assignment in a tab -

    -
    3. -
-
- - - + + + + + + Checking Form + + + + +
+
+ +

Checking Form:

+ +
+ + + +
+ +

+ +
+ + + +
+ +

+ +
+ + + +
+

+
+ + + +
+

+ +
+
+ + \ No newline at end of file diff --git a/practical_guide.md b/practical_guide.md new file mode 100644 index 000000000..90537cd76 --- /dev/null +++ b/practical_guide.md @@ -0,0 +1,58 @@ +## Clean Code and Smart Commits: A Practical Guide + +### 1. Formatting code consistently + +- In VS Code, right-click anywhere in the editor and choose "Format Document" from the context menu. + +- You can also use the shortcut: + - Windows/Linux: `Shift + Alt + F` + - macOS: `Shift + Option + F` + +- More details: https://code.visualstudio.com/docs/editing/codebasics#_formatting + +--- +### 2. Enabling automatic formatting + +- Open your VS Code settings (user or workspace settings). + - Guide: https://code.visualstudio.com/docs/getstarted/settings#_creating-user-and-workspace-settings +- Search for `editor format` +- Set `editor.formatOnSave` and `editor.formatOnPaste` to true + +This ensures your code stays clean without needing manual formatting each time. + +--- + +### 3. Committing files often, in meaningful groups + +Creating small, focused commits improves both your workflow and team collaboration. + +Why this matters: +- **Clarity**: Each commit tells a clear story (one feature, one fix, one change). +- **Debugging**: Easy to find and undo the commit that caused a bug. +- **Collaboration**: Teammates can review and understand changes faster. +- **History**: Project log becomes a readable timeline, not a messy dump. +- **Safety**: Progress is saved in safe, logical stepsβ€”less risk of losing work. + +#### Appraoch 1: Using VS Code + +- In the Source Control panel, stage individual files instead of all changes. +- Commit only what is staged. +- Watch this video (around 12:50): https://www.youtube.com/watch?v=z5jZ9lrSpqk&t=705 + +#### Approach 2: Using Git commands + +1. Stage a changed file (`git add`) + +e.g.: To stage a modified file named `index.html` +``` +git add index.html +``` + +2. Commit the staged changes: (`git commit`) + +e.g.: To commit the staged changes with a short commit message +``` +git commit -m "Fix syntax error" +``` + +- Additional resource: [W3School Git Tutorial](https://www.w3schools.com/git/default.asp?remote=github)