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
- HTML: semantic elements
- CSS: properties
- CSS: selectors
- CSS: display properties (Grid, Flexbox)
Creating your own personal website, it can have multiple sections.
Try using semantic HTML elements, grid and flex in the process.
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
- CSS Preprocessors (SCSS, SASS)
- CSS Frameworks (Bootstrap, Tailwind, PureCSS)
- CSS Layouts (Mobile First, Flexbox/Grid, Conditional Rendering)
- Responsive Web Design (Media Queries, units)
The games are to control the use of the layouts, specifically the flexbox layout and the grid layout.
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
- Variables
- Control Flow
- Objects
- Functions
- Arrays
- Functional Programming
- Async/await
- Fetch
- Basic explanation of TypeScript
Create a website using the rick and morty API
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
- DOM (Document Object Model)
- DOM elements
- DOM events
- Observers
- DevTools: console, debugging, breakpoints, network, etc.
Debug this web app using the DevTools.
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
- Vue: ecosystem, benefits, set up.
- Vue CLI file structure.
- Components: components communication, properties, props, events.
- Styles: scoped styles, v-bind classes, v-bind styles.
- Lifecycle
- Advanced features: transitions, slots, provide/inject, watchers,
Practice using the example provided by Alonso.
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
- Vuex: differences Vue vs Vuex
- Store: states, getters, actions, mutations
- Modules: composing modules, namespacing, binding helpers.
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.
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
- TypeScript: configuration.
- Basic types: type simple variables, interfaces, type aliases, type functions, literal types, tuples, built-in types.
- Advanced types: any, unknown, generics, union types, intersection types, template literals, mapped types, conditional types.
Manuel Navarro provided us with this website TypeScript Challenges to practice.