# Frontend

This specialism course is focused on setting you up to land a Frontend Developer job. We go deeper into building frontend applications, design and popular frameworks that you'll meet in your career such as React.

## Modules

| Name                                                                                       | Weeks |
| ------------------------------------------------------------------------------------------ | ----- |
| [Collaboration via GitHub](/course-content/shared-modules/collaboration-via-github.md)     | 1     |
| [Using AI in Development](/course-content/shared-modules/using-ai-in-development.md)       | 1     |
| [Advanced JavaScript](/course-content/frontend/advanced-javascript.md)                     | 4     |
| [React](/course-content/frontend/react.md)                                                 | 5     |
| [Specialist Career Training](/course-content/shared-modules/specialist-career-training.md) | 2     |
| [Agile Teamwork](/course-content/shared-modules/agile-teamwork.md)                         | 1     |
| [Final Project](/course-content/frontend/final-project.md)                                 | 5     |

Total: 19 weeks

## Learning Goals Overview

### [Collaboration via GitHub](/course-content/shared-modules/collaboration-via-github.md)

* [ ] How to write a good commit message and submit easy to understand PRs
* [ ] Understand why we use branches and the different types
* [ ] Practice using branches and handling changes between local and remote
* [ ] Understand what a merge conflict is and how to resolve them
* [ ] How to save temporary changes without committing them (ie. git stash)
* [ ] How to "remove" commits using reset (soft vs hard), revert, cherry-pick and rebase
* [ ] Be prepared to collaborate successfully using GitHub on your final project
* [ ] How to use git tags and semantic versioning
* [ ] Know the main git workflows (feature-branch, gitflow, forking) and when to use each

### [Using AI in Development](/course-content/shared-modules/using-ai-in-development.md)

* [ ] Use AI to support your development tasks such as refactoring and reviewing code.
* [ ] Explore prompting techniques to understand complex code, code snippets and tough technical concepts.
* [ ] Evaluate AI-generated code for correctness, expected outcomes, security and maintainability.
* [ ] Use AI to support learning new programming languages, frameworks and tools.
* [ ] Identify and integrate AI into appropriate parts of the software development workflow.
* [ ] Describe ethical, legal and risk considerations of using AI in professional software development.
* [ ] Explore the possible futures of how AI is changing the role and expectations of developers in the industry.

### [Advanced JavaScript](/course-content/frontend/advanced-javascript.md)

* [ ] Retrieve and work with data from remote servers
* [ ] Process and display complex data in user-friendly interfaces
* [ ] Create responsive web applications that react to user input
* [ ] Build complex websites in a scalable and maintainable way

### [React](/course-content/frontend/react.md)

* [ ] Understand when and why to use React to build modern web applications
* [ ] Build user interfaces using reusable, component-based architecture
* [ ] Manage data and interactivity using props, state, and hooks
* [ ] Handle user input, forms, and events in React applications
* [ ] Load and display data from external APIs
* [ ] Structure complex, multi-page applications with routing and shared state
* [ ] Understand what a Component Library is, along with the pros and cons
* [ ] Build, deploy, and share a production-ready React app using Next.js

### [Specialist Career Training](/course-content/shared-modules/specialist-career-training.md)

> ⚠️ "Learning goals" section is empty in `shared-modules/specialist-career-training`

### [Agile Teamwork](/course-content/shared-modules/agile-teamwork.md)

* [ ] Understand conceptual differences between Agile, Scrum & Kanban
* [ ] Understand what Scrum looks like in day to day life as a developer
* [ ] Understand how to interact with Scrum ceremonies (e.g. standup, planning, estimating/prioritising, retrospectives)
* [ ] Practice skills used by developers such as understanding requirements, breaking down technical tasks, and common workflows for reviewing, testing and deploying.
* [ ] Understand how these skills and practices impact and support agility
* [ ] Be able to organise a very well structured project in collaboration with other developers for the final project

### [Final Project](/course-content/frontend/final-project.md)

* [ ] Collaborate effectively in a team setting
  * [ ] Read and extend/improve other peoples code
  * [ ] Give and receive constructive PR feedback
  * [ ] Plan, communicate and coordinate technical tasks / solutions upfront before implementation
* [ ] Develop self-guided learning skills (e.g. learn to read documetation for a new tool or API)
* [ ] Interpret a problem statement and specs/wireframes/prototypes into buildable requirements
* [ ] Break down bigger problems into smaller, actionable written tasks
* [ ] Work in iterative sprints and achieve deadlines
* [ ] Ask for help effectively and at the right time (e.g. describing problems to mentors, asking online, and knowing the power *and* limitations of using AI)
* [ ] Deploy a completed project you are proud to showcase on your portfolio


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://program.hackyourfuture.dk/course-content/frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.