# HTML, CSS e JavaScript

Esse roteiro é uma introdução ao desenvolvimento de front-ends web. Ele é voltado para quem não tem experiência alguma com desenvolvimento web, e deve ser filtrado baseado no conhecimento prévio.

O escopo dessa seção atende ao módulo básico do [**front-end developer roadmap**](https://github.com/kamranahmedse/developer-roadmap#frontend-roadmap).


## HTML e CSS

* [ ] [**HTML 5**](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
* [ ] :pencil: [**Basic HTML and HTML5** | por *FreeCodeCamp*](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5)*
* [ ] :pencil: [**Basic CSS** | por *FreeCodeCamp*](https://learn.freecodecamp.org/responsive-web-design/basic-css)*
* [ ] [**Flexbox**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
:green_book: [**A Complete Guide to Flexbox** | por *CSS Tricks*](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)*
:pencil: [**CSS Flexbox Challenges** | por *FreeCodeCamp*](https://learn.freecodecamp.org/responsive-web-design/css-flexbox)*

* [ ] [**CSS Grid**](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
:green_book: [**A Complete Guide to CSS Grid** | por *CSS Tricks*](https://css-tricks.com/snippets/css/complete-guide-grid/)*
:pencil: [**CSS Grid Challenges** | por *FreeCodeCamp*](https://learn.freecodecamp.org/responsive-web-design/css-grid)*
* [ ] :mortar_board: :tv: [**Responsive Web Design Fundamentals** | por *Udacity* ](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)*

### Projects
* [ ] :checkered_flag: [**Home Town App** | project for *Responsive Web Design Fundamentals* por *Udacity*](https://classroom.udacity.com/courses/ud893/lessons/3494350031/concepts/ae44eb8e-be6c-4f40-b31f-db5d80407d77) *
* [ ] :checkered_flag: [**Responsive Web Design Projects** | por *FreeCodeCamp*](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects)*
* [ ] :dart: [Tribute Page](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/)
* [ ] :dart: [Survey Form](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form/)
* [ ] :dart: [Product Landing Page](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page)
* [ ] :dart: [Technical Documentation Page](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page)
* [ ] :dart: [Personal Portfolio Webpage](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage/)

## Javascript

**Leituras recomendadas**
* :books: [**Eloquent JavaScript**](http://eloquentjavascript.net/)
* :books: [**The Modern Javascript**](http://javascript.info/)
* :books: :tv: [**Introduction to JavaScript**](https://scrimba.com/g/gintrotojavascript)

#### Conceitos da Linguagem e Fundamentos

* [ ] :mortar_board: [**Intro to JavaScript** | by *Udacity*](https://www.udacity.com/course/intro-to-javascript--ud803)*

* [ ] :pencil: [Basic JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/)*
* [ ] :pencil: [ES6](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6)*
* [ ] :pencil: [Debugging](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/debugging)*
* [ ] :pencil: [Basic Data Structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures)*
* [ ] :pencil: [Object Oriented Programming](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming)*

#### In-Browser Javascript
* [ ] :green_book: [**The Document Object Model** | capítulo de *Eloquent JavaScript*](http://eloquentjavascript.net/14_dom.html) *
* [ ] :tv: [**JavaScript DOM - Crash Course** | por *Traversy Media*](https://youtu.be/0ik6X4DJKCc?list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX) *
* [ ] :green_book: [**AJAX** | por MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX)
* [ ] :pencil: [**Json APIs and AJAX** | por *FreeCodeCamp* ](https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api)
* [ ] :green_book: [**You Don't Need jQuery**](https://blog.garstasio.com/you-dont-need-jquery/)
* [ ] :green_book: [**HTTP Requests using Fetch API**](https://medium.freecodecamp.org/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547)

## Libraries and Tools
* [ ] [**Bootstrap**](https://getbootstrap.com/)
* [ ] :pencil: [**Bootstrap** | por *FreeCodeCamp*](https://learn.freecodecamp.org/front-end-libraries/bootstrap) *
* [ ] [**jQuery**](https://api.jquery.com/)
* [ ] :mortar_board: :tv: [**Intro to jQuery** | por *Udacity*](https://classroom.udacity.com/courses/ud245)
* [ ] :tv: [**jQuery in 15 minutes** | por *DevTips*](https://www.youtube.com/watch?v=v-RC3kJCL4c)
* [ ] :pencil: [**jQuery Tutorial** | por *FreeCodeCamp* ](https://learn.freecodecamp.org/front-end-libraries/jquery)

### Projects

* [ ] :checkered_flag: [Random Quote Machine](https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine/)
* [ ] :checkered_flag: [Local Weather](https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/show-the-local-weather/)
* [ ] :checkered_flag: [Twitch Json API](https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/use-the-twitch-json-api/)

----

### Legenda

:green_book: `Referência/Guia/Tutorial` | :books: `Livro` | :mortar_board: `Curso` | :tv:`Video` | :pencil: `Atividade guiada` | :checkered_flag: `Projeto` | :dart: `To-do`