[WIP]
- Quick Intro about Requests, URL's
Chapter 1 - HTML
- Quick intro about "What's HTML"
- Explaining HTML, tips about semantic HTML and why
Exercising:
- Create an News Journal using semantic HTML, without CSS and JS (I've to create the expected result)
Chapter 2 - CSS
- What CSS means (explaining why is cascading stylesheets)
- CSS Selectors
- How CSS relates with HTML
- Pure CSS, SCSS (show another CSS pre processor, only for curiosity)
- Some daily CSS tricks that can explode our head if we dont know about it
- notes: add those properties here
Exercising:
- Style the News Journal page with pure CSS, and after that, style using SCSS
Chapter 3 - JS
-
About the Language, interpreted language (compiled nuance about)
-
Funfact about console.log + alert, related with browser engines
-
Talk about Objects and References (important note to our daily tasks, we casually mutate objects)
-
Quick Intro about JS compile / transpile and browser engine steps
-
fig 1
-
fig 2
-
Backward Compatiblity
-
Ecma's Intro + ES6
-
JS vanilla, small things
Exercising:
-
Create some JS interactions, like toggle some articles, change News Journal theme (with CSS variables).
-
Consume some open API to populate our News Feed, refactor the code to style our new feed.
-
Some JS Patterns
-
Factory and JS Observer Pattern (not extending so much, this can be very long, talk about subscribers, watchers etc...)
-
Using Observer Pattern in some peace of News Journal code ("like" and "dislike" articles? Update "likes" counter? Some simple feature)
(depending on seniority, we can skip some steps and go for VueJS steps)
- VueJS Intro
- VueJS relation Observer Pattern
- Styleguide, Core Concepts
- VueJS Docs +++
- Everest
Exercising:
- Refactor our News Application to VueJS using Everest Components and Tokens (make a result App)
Extra:
- add articles
- remove articles
- some extra features related with News Journal
Some Ideas:
- Maybe we can have the News Journal at Figma, to be more like Revelo daily tasks.