← All projects/3 - The fundamentals

3 - The fundamentals

Learning Goals

Knowledge

Understand what is responsive design
Understand the basics of animation
Understand the mechanisms CSS offers to animate
Understand how forms work in HTML
Understand what are CSS pre-processors
Understand what is Sass
Understand what are front-end/UI frameworks
Understand what is Bootstrap
Understand what is a programming language
Understand what is Javascript
Understand how can Javascript work with and without the browser
Understand what data types are
Understand what conditional statements are
Understand what are loops and iterators
Understand what are functions, parameters, return values and related concepts
Understand what is ES6
Understand the concept of transpilation
Understand what is the DOM
Understand why the DOM is only available in browsers
Understand what event listeners are
Understand the timing functions in Javascript
Understand the importance of validating forms
Understand what is a Web API
Understand how to get information about Web APIs
Understand what is a Single Page Application (SPA)
Understand what User Experience is
Understand what are micro-interactions
Understand different productivity techniques

Skills

Be able to create a responsive website
Be able to use CSS Flexbox and CSS Grid to create responsiveness
Be able to create animations with CSS
Be able to create and style a form
Be able to use HTML5 native validation for forms
Be able to create Sass code and compile it into CSS
Be able to "watch" files with Sass
Be able to learn and use a front-end/UI framework
Be able to use variables and other basic constructs of Javascript
Be able to do operators with different data types in Javascript
Be able to execute conditional statements in Javascript
Be able to use loops and iterators to create lists
Be able to use functions in Javascript
Be able to make use of ES6 features
Be able to transpile ES6 code
Be able to select elements form the DOM and change them with Javascript
Be able to iterate through collections of DOM elements
Be able to add event listeners to DOM elements
Be able to create animations by manipulating element classes
Be able to create a timer for a an action
Be able to create a form that gets processed by Javascript when submitted
Be able to create proper validation for forms and display the errors to the user
Be able to use the location and history Web APIs
Be able to use the localStorage Web APIs
Be able to create a SPA with pure Javascript
Be able to define a set of actions to improve the UX of a project
Be able to create a Navigation and Information Architecture plan for a simple project
Be able to demonstrate an interaction design plan
Be able to pair program
Be able to write a Technical Article

Competences

To be ready to collaborate effectively with peers in order to achieve a common goal
To be ready to learn and apply new technologies independently
To be ready to exhibit the results of a collaborative work

Description

Students learn about the fundamental aspects of Javascript programming and become capable of creating dynamic web applications. Creation of concise, clear, well-written code and the conception of a great User Experience are some important goals in this project.

Design Research Module

Code Research Module

Product Development

Dynamic Web Application made with vanilla Javascript
Go to specification