Difference between revisions of "IU:TestPage"

From IU
Jump to navigation Jump to search
Line 193: Line 193:
 
'''Section 1'''
 
'''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.
 
# 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 2'''
   

Revision as of 13:14, 9 February 2023

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

Course Sections and Topics
Section Topics within the section
Basics of front-end web development
  1. Introduction to HTML, CSS, and JavaScript
  2. JavaScript ecosystem: NPM, bundlers, modern project structure
  3. TypeScript
  4. Form validation
Frameworks
  1. Svelte
  2. React
Code Quality and modern architectures
  1. ESLint
  2. Unit testing, CI/CD
  3. Code structure
  4. Rendering strategies
  5. Meta-frameworks: SvelteKit

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 and Learning Methods within each section
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
Activities within each section
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

  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

  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.

Section 2

Section 3