Front-end Developer Starter

Collection of materials and tasks about the front-end dedicated for people who would like to:

• begin as front-end developer but they don't know how to start
• try to solve some problems/tasks as practice
• standardize the basics in front-end area
• have one source of true in one place - frontend developer guide
• become a frontend developer hero ;)

The repository was created to help other developers and collect all useful links, materials, tutorials which I personally recommend. Additionaly, repository has set of tasks for beginners.

Table of Contents

1. Development path
2. Recommended IDE
   • Sublime text
   • Visual Studio Code
3. Version Control Systems
   • GIT
4. Front-end technologies
   • HTML and CSS
   • Javascript
   • SASS
   • NPM
   • GULP
5. Chrome Debugging
6. Other useful sources

Development path

Visual presentation of roadmap to becoming a front-end developer ( source )

Every developer introduction roadmap

Front-end roadmap

Integrated development environments

Good IDE is an indispensable tool for every developer. You need to match it to your personal needs, code language and specific of work. Below are the tools I recommend.

SUBLIME TEXT

Sublime text is really friendly tool for all kind of developers. It works best when is well configured. If you want to know more see the Tutorial. All important informations are inside (configuration, instruction, customizations, plugins, etc.).

How to install packages ? - Package Control

Useful packages:

• Color Picker
• Autoprefixer

Visual Studio Code

"VS Code is a new type of tool that combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle. Code provides comprehensive editing and debugging support, an extensibility model, and lightweight integration with existing tools." - Open source - Visual Studio Code

Official vcode site

Recommend extenstions:

• Atom Keymap
• Auto Close Tag
• AutoFileName
• Autoprefixer
• Beautify

Version Control Systems

GIT

References: Official, ->Download<-

Ebooks:

• Introduction to git - ebook from git-tower

Tutorials:

• Learn git branching - visual and interactive way to learn Git
• Git tutorial - Commands And Operations In Git
• Learn git - interactive tutorial by CodeAcademy

Front-end technologies

HTML and CSS

References: W3Schools - CSS, HTML

Books:

• PL - Moja pierwsza strona w HTML5 i CSS3

Articles:

• What is the difference between id and class?
• CSS Specifity
• Understanding Z-Index
• A guide to flexbox
• CSS - Position property specifity
• CSS - truncate string with ellipsis (single line)
• CSS - truncate string with ellipsis (multi line)
• CSS - Complete guide to grid

Tutorials:

• Learn HTML and CSS - interactive course from CodeAcademy
• HTML beginners guide - Step-by-step Introduction to HTML and creating a simple page
• Flexbox playground and code generator - really nice visualisation of Flexbox powers

Javascript

References: W3Schools

Articles

• Functions (PL)
• Document Object Model (PL)
• DOM elements relations (PL)
• DOM operations (PL)
• Operators (PL)
• Closures (PL)

Tutorials:

• Learn Javascript - interactive course by CodeAcademy
• Javascript road trip - interactive course by CodeSchool
• Javascript solo Tutorial - interactive course by SoloLearn

Challenges:

• Coderbyte challenges

ECMASCRIPT 6+

Roadmap

• List of sources dedicated ES6 learning

Articles

• What's new in JS - PL
• Get staryed with ES6

Turorials

• ES6 tutorial video - all in one

JQuery

Official documentation

References: W3Schools

Tutorials

• Interactive tutorial by Codeschool

SASS

Tutorials

• SASS official tutorial
• SASS Basics - PL

NPM

Tutorials

• Official NPM tutorial

Gulp

Tutorials

• GULP, NODE, NPM - tutorial video PL
• Tutorial GUlP - basic setup with SASS
• Building ES6 Javascript for the Browser with Gulp, Babel, and More
• GULP configurations - PL

Chrome Debugging

References:

• Chrome Devtools

Articles

• Debugging javascript with breakpoints

Tutorials

• Debugging JavaScript using Breakpoints with the Google Chrome Developer Tools
• Debugging JavaScript in chrome

Other useful sources

• Markdown: Syntax by John Gruber - Helpful in creation of a decent README.md