Frontend

Content Table

• Content Table
• Week 1
  • Exercise: Personal website
• Week 2
  • Exercise: Practice with games
• Week 3
  • Exercise: API Rick & Morty
  • Exercise: Practice with DevTools
• Week 4
  • Exercise: Practice with Vue (Shopping List)
• Week 5
  • Exercise: Academy Project IMDB
• Week 6
  • Exercise: TypeScript Challenges

---

Week 1

Our first week working on the frontend path was dedicated to “HTML & CSS” and we learned from Pedro Ondiviela.

Path Owner	Content Deliverer
Beltrán García	Pedro Ondiviela

Key learning points

1. HTML: semantic elements
2. CSS: properties
3. CSS: selectors
4. CSS: display properties (Grid, Flexbox)

Personal website

Creating your own personal website, it can have multiple sections.

Try using semantic HTML elements, grid and flex in the process.

• Personal website by Lucía López - Demo

• Exercise 1 - Website HTML and CSS by Laura Martínez - Demo

• Exercise 1 - My personal website (code) by Andrea Delgado

  My personal website

---

Week 2

Our second week working on the frontend path was dedicated to “CSS Responsive” and we learned from Guillermo Cacheda.

Path Owner	Content Deliverer
Beltrán García	Guillermo Cacheda

Key learning points

1. CSS Preprocessors (SCSS, SASS)
2. CSS Frameworks (Bootstrap, Tailwind, PureCSS)
3. CSS Layouts (Mobile First, Flexbox/Grid, Conditional Rendering)
   • Layout examples
4. Responsive Web Design (Media Queries, units)

The games

The games are to control the use of the layouts, specifically the flexbox layout and the grid layout.

• FlexBox Layout

• Grid Layout

---

Week 3

On our third week working on the frontend path we had two sessions:

One was dedicated to “JavaScript & Basic TypeScript” and we learned from Antonio Cuenca.

Path Owner	Content Deliverer
Beltrán García	Antonio Cuenca

Key learning points

1. Variables
2. Control Flow
3. Objects
4. Functions
5. Arrays
6. Functional Programming
7. Async/await
8. Fetch
9. Basic explanation of TypeScript

API Rick and Morty

Create a website using the rick and morty API

• Rick & Morty API (not finished) by Lucía López - Demo

• Exercise 2 - Rick & Morty API by Laura Martínez - Demo

• Exercise 2 - Rick & Morty (code) by Andrea Delgado

  Demo - Rick & Morty website

The second session was dedicated to “JavaScript DOM & DevTools” and we learned from Guillermo Cacheda.

Path Owner	Content Deliverer
Beltrán García	Guillermo Cacheda

Key learning points

1. DOM (Document Object Model)
2. DOM elements
3. DOM events
4. Observers
5. DevTools: console, debugging, breakpoints, network, etc.

Practice exercise

Debug this web app using the DevTools.

---

Week 4

On our fourth week working on the frontend path we had two sessions:

One was dedicated to “Vue CLI” and we learned from Alonso García.

Path Owner	Content Deliverer
Beltrán García	Alonso García

Key learning points

1. Vue: ecosystem, benefits, set up.
2. Vue CLI file structure.
3. Components: components communication, properties, props, events.
4. Styles: scoped styles, v-bind classes, v-bind styles.
5. Lifecycle
6. Advanced features: transitions, slots, provide/inject, watchers,

Example vue - Shopping List

Practice using the example provided by Alonso.

• Vue Shopping List by Lucía López - Demo

• Vue Shopping List by Laura Martínez - Demo

• Vue Shopping List by Andrea Delgado- Demo

The second session was dedicated to “Vuex” and we learned from Beltrán García .

Path Owner	Content Deliverer
Beltrán García	Beltrán García

Key learning points

1. Vuex: differences Vue vs Vuex
2. Store: states, getters, actions, mutations
3. Modules: composing modules, namespacing, binding helpers.

---

Week 5

Project IMDB: User Story

During the fifth week, we started planning and researching for the project that we would do with the Back and Search path. The project consists on fetching the data provided on the Back & Search API based on the IMDB (Internet Movie Database) to provide results so the user can discover new movies. Each frontend project would have their own special features. This week we started creating the repositories and their own Github Project. We also drafted the user stories for the project, where we went into detail about the features that we would like to develop for the web app.

• Academy Project IMDB by Lucía López

• Academy Project IMDB by Laura Martínez

• Academy Project IMDB by Andrea Delgado

---

Week 6

On our sixth week working on the frontend path we had one session dedicated to “TypeScript” and we learned from Manuel Navarro.

Path Owner	Content Deliverer
Beltrán García	Manuel Navarro

Key learning points

1. TypeScript: configuration.
2. Basic types: type simple variables, interfaces, type aliases, type functions, literal types, tuples, built-in types.
3. Advanced types: any, unknown, generics, union types, intersection types, template literals, mapped types, conditional types.

TypeScript Challenges

Manuel Navarro provided us with this website TypeScript Challenges to practice.