FE409
Front-end Frameworks
Faculty
Vitor Dino
Senior Software Engineer at X-Team
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
This course provides an overview of the latest frameworks and technologies used for a modern front-end setup . Students will compare and contrast options, then make an educated decision on a setup that will be used throughout the remainder of the program.
Learning highlights
- Understand interactive development needs in order to deliver quality
- Understand the latest web frameworks and their role in the development
- Discover how to apply modern techniques from start to finish
- Use code-quality tools to measure and keep consistent style and prevent common bugs
- Apply known design patterns within a framework structure
- Be able to choose and judge a framework based on his/her own acquired experience
Course outline
15 classes
Introduction
Web development life cycle.
Overview of frameworks and tools.
Setting up your IDE.
Package management.
Linting and useful configurations.
Git fundamentals.
Exercise.
Frameworks
Vanilla (no framework).
Why frameworks are useful?
React.
Vue.
Svelte.
Other frameworks.
Exercise.
Testing (JS + React)
Methodologies.
Debugging.
Unit testing.
Writing unit tests.
Exercise
Practice session
Practice session
Deploying
Dev ops.
Webhooks.
Automated deployments.
Hosting.
Github Actions.
Exercise.
Practice session
Practice session
Static and dynamic sites
Overview.
Front-end & Back-end functionalities.
Vite (SPA).
Gatsby (SSG).
NextJS (SSR).
Remix (SSR).
Exercise.
Design tools
Figma for developers.
Common design to development tasks.
Exporting code.
Web design tools.
Exercise.
Documentation
Good practices.
Style guides.
Storybook.
Component libraries.
Migrating Frameworks
Use cases.
Common basis.
Experimentation.
End-to-end automated testing
Playwright.
Framework agnostic.
Common practices.
Practice session
Practice session
Putting all together
Recap.
Project brief.
Picking a front-end tech stack.
Requirements for the setup.
Building and deploying.
Style guide and documentation.
Practice session
Practice session
Final presentation
Final presentation
Course materials
Books
Media
Prerequisites
HTML, CSS and JS knowledge.
Shell basics and GIT as a version control system.
Methodology
Lectures and demonstration format
Group debates where we will discuss problem-solving techniques
A Discord channel will be open to students
Homework presentation at least two days a week
Final project
Grading
Vitor is a frontend developer focused on consultancy and based in Brazil, currently working for Riot Games through X-Team.
He has more than a decade of experience in tech-related fields ranging from interface design, frontend tooling, and web app development in general. Self-taught, early React adopter, Typescript enthusiast, and always curious to learn new things.
See full profileApply for this course
Front-end Frameworks
by Vitor Dino
Total hours
45 Hours
Dates
Mar 17 - Apr 04, 2025
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.