IU:TestPage
Frontend Web Development
- Course name: Frontend Web Development
- Code discipline: CSE122
- Subject area: Software Engineering
Short Description
This is a practice-oriented course that introduces students to the essentials of modern front-end web development. It starts from the very basics of web technologies, assuming no experience other than any general-purpose programming language. It is structured in a way that covers a wide variety of topics and technologies without going too deep into any of them. The course starts by introducing HTML, CSS, and JavaScript, then covers JavaScript and its ecosystem in more depth (since it is foundational to the rest of the course). After that, we move on to frameworks (in particular, Svelte and React) and how to write modern web apps using them. Lastly, we cover how to ensure quality in modern web apps, as well as different architectural patterns such as server-side rendering and meta-frameworks.
Prerequisites
Prerequisite subjects
- CSE101 – Introduction to Programming I
Prerequisite topics
- Basic programming skills
Course Topics
| Section | Topics within the section |
|---|---|
| Basics of front-end web development |
|
| Frameworks |
|
| Code Quality and modern architectures |
|
Intended Learning Outcomes (ILOs)
What is the main purpose of this course?
The main purpose of this course is to enable students to develop web frontends using modern tools and techniques by having hands-on experience derived from industry-standard practices.
ILOs defined at three levels
Level 1: What concepts should a student know/remember/explain?
By the end of the course, the students should be able to ...
- List the 3 programming languages used in building frontends and explain the purpose of each of them
- Explain the benefits of using a static typing system
- Describe the idea behind frontend frameworks and their purpose
- List the different tools used in ensuring code quality
- Explain the different rendering strategies and elaborate on the pros and cons of each
Level 2: What basic practical skills should a student be able to perform?
By the end of the course, the students should be able to ...
- Build an interactive website with basic user input forms
- Make use of 3rd-party JavaScript libraries in their code
- Design TypeScript interfaces that represent their data types
- Build simple user interfaces from ready-made designs
Level 3: What complex comprehensive skills should a student be able to apply in real-life scenarios?
By the end of the course, the students should be able to ...
- Produce production-ready bundles and automate their deployment to the internet
- Choose an appropriate architecture for the appropriate use-case
- Test their code using different techniques (unit, integration, visual) and libraries (Jest, Testing Library, Cypress)
- Use static analysis tools to catch possible bugs early on
Grading
Course grading range
| Grade | Range | Description of performance |
|---|---|---|
| A. Excellent | 85-100 | - |
| B. Good | 70-84 | - |
| C. Satisfactory | 55-70 | - |
| D. Fail | 0-54 | - |
Course activities and grading breakdown
| Activity Type | Percentage of the overall course grade |
|---|---|
| Assignments | 50 |
| Course Project | 50 |
Recommendations for students on how to succeed in the course
Participation is highly recommended. Conversations in class add a lot of value on top of the provided material.
Finish the assignments on time. Each topic depends on the previous one and this course is practice-oriented, so completing the practice tasks on time is essential for understanding the next topic.
Invest some time on expanding your knowledge and deepening your understanding beyond what’s directly given in class. Resources are provided, so use them.
Resources, literature and reference materials
Open access resources
- Mozilla Developer Network:
- Can I use …? Support tables for frontend technologies:
- Frontend Developer Roadmap:
- Fireship YouTube channel:
- The Net Ninja YouTube channel:
- You Don’t Know JS book:
Closed access resources
- Maximilian Schwarzmüller courses on Udemy:
- Fireship Pro courses:
- Frontend Masters:
Software and tools used within the course
- Visual Studio Code:
- Node.js:
- Firebase:
Teaching Methodology: Methods, techniques, & activities
Activities and Teaching Methods
| Teaching Techniques | Section 1 | Section 2 | Section 3 |
|---|---|---|---|
| Problem-based learning (students learn by solving open-ended problems without a strictly-defined solution) | 1 | 1 | 1 |
| Project-based learning (students work on a project) | 1 | 1 | 1 |
| Modular learning (facilitated self-study) | 1 | 1 | 1 |
| Contextual learning (activities and tasks are connected to the real world to make it easier for students to relate to them) | 1 | 1 | 1 |
| Task-based learning | 1 | 1 | 1 |
| Learning Activities | Section 1 | Section 2 | Section 3 |
|---|---|---|---|
| Lectures | 1 | 1 | 1 |
| Lab exercises | 1 | 1 | 1 |
| Individual Projects | 1 | 1 | 1 |
| Discussions | 1 | 1 | 1 |
| Presentations by students | 1 | 1 | 1 |
| Group projects | 0 | 1 | 1 |
| Cases studies | 0 | 0 | 1 |
Formative Assessment and Course Activities
Ongoing performance assessment
Section 1
| Activity Type | Content | Is Graded? |
|---|---|---|
| Individual Assignments | 6 assignments, 1 of which is optional, each on the content of the lab right before it. | 1 |
Section 2
| Activity Type | Content | Is Graded? |
|---|---|---|
| Individual Assignments | 6 assignments, 1 of which is optional, each on the content of the lab right before it. | 1 |
Section 3
| Activity Type | Content | Is Graded? |
|---|---|---|
| Individual Assignments | 6 assignments, 1 of which is optional, each on the content of the lab right before it. | 1 |
Final assessment
Section 1
- The final assessment takes the form of group project presentations for the course project they worked on throughout the semester. Every student in the group is expected to be able to justify the design decisions and explain what any part of the code does (to ensure fair distribution of load). The project is expected to incorporate all the best practices covered in lectures and labs and must be approved by the instructor before the students begin working on it.
Section 2
Section 3
The retake exam
Section 1
- The retake uses the same criteria as the group project, except that it is individual rather than in groups. Its grade counts as the grade for the entire course, not just the final assessment. If there is no approved excuse (such as medical) for retaking the course, the maximum grade possible is B.
- P7. Activities and Teaching Methods by Sections
- Table A1: Teaching and Learning Methods within each section
- Table A2: Activities within each section
Section 2
Section 3