# HTML, CSS and JavaScript (EN-US)

This roadmap is an introduction to the front-end development of web. It is aimed at those who have no experience with web development, and should be filtered based on prior knowledge.

This section covers the basics of [**front-end developer roadmap**](https://github.com/kamranahmedse/developer-roadmap#frontend-roadmap).


## HTML and CSS

* [ ] [**HTML 5**](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
* [ ] :pencil: [**Basic HTML and HTML5** | by *FreeCodeCamp*](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5)*
* [ ] :pencil: [**Basic CSS** | by *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** | by *CSS Tricks*](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)*
* [ ] :pencil: [**CSS Flexbox Challenges** | by *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** | by *CSS Tricks*](https://css-tricks.com/snippets/css/complete-guide-grid/)*
* [ ] :pencil: [**CSS Grid Challenges** | by *FreeCodeCamp*](https://learn.freecodecamp.org/responsive-web-design/css-grid)*
* [ ] :mortar_board: :tv: [**Responsive Web Design Fundamentals** | by *Udacity* ](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893)*

### Projects
* [ ] :checkered_flag: [**Home Town App** | project for *Responsive Web Design Fundamentals* by *Udacity*](https://classroom.udacity.com/courses/ud893/lessons/3494350031/concepts/ae44eb8e-be6c-4f40-b31f-db5d80407d77) *
* [ ] :checkered_flag: [**Responsive Web Design Projects** | by *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

**Recommended readings**
* :books: [**Eloquent JavaScript**](http://eloquentjavascript.net/)*
* :books: [**The Modern Javascript**](http://javascript.info/)

#### Language Concepts and Fundamentals

* [ ] :books: :tv: [**Introduction to JavaScript**](https://scrimba.com/g/gintrotojavascript)*
* [ ] :books: :tv: [**Learn JavaScript in One Week**](https://coderbyte.com/course/learn-javascript-in-one-week)*

#### Challenges
* [ ] :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) *
* [ ] :mortar_board: [**Intro to JavaScript** | by *Udacity*](https://www.udacity.com/course/intro-to-javascript--ud803)*
* [ ] :tv: [**JavaScript DOM - Crash Course** | by *Traversy Media*](https://youtu.be/0ik6X4DJKCc?list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX) *
* [ ] :green_book: [**AJAX** | by MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX)
* [ ] :pencil: [**Json APIs and AJAX** | by *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** | by *FreeCodeCamp*](https://learn.freecodecamp.org/front-end-libraries/bootstrap) *
* [ ] [**jQuery**](https://api.jquery.com/)
* [ ] :mortar_board: :tv: [**Intro to jQuery** | by *Udacity*](https://classroom.udacity.com/courses/ud245)
* [ ] :tv: [**jQuery in 15 minutes** | by *DevTips*](https://www.youtube.com/watch?v=v-RC3kJCL4c)
* [ ] :pencil: [**jQuery Tutorial** | by *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/)

----

### Icon semantics

:green_book: `Reference/Guide/Tutorial` | :books: `Book` | :mortar_board: `Course` | :tv:`Video` | :pencil: `Guided activity` | :checkered_flag: `Project` | :dart: `To-do