Step 0. Wybór edytora *Szacowany czas: - *
Polecam https://code.visualstudio.com
Step 1. Nauka HTML Szacowany czas: max. 1 dzień
Nie ma się tutaj za bardzo nad czym rozdrabniać. Potrzebujesz wiedzieć co to jest HTML i poznać podstawowe znaczniki oraz atrybuty tych zniaczników.
Ogólny template każdej strony to:
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
```
nad tym się nie zatrzymuj. Przyjmij, że tak jest i broń boże nie zapamiętuj tych wszystkich meta tagów, które są tłumaczone w kursach bo na początku nie jest Ci to potrzebne. Skopiuj, wklej i tyle. Skup się na tagach takich jak: section, footer, header, aside, article, h1-h6, a, p, span, div, ul, ol.
**Polecane materiały: **
http://www.99lime.com/_bak/topics/you-only-need-10-tags/
http://html5doctor.com/lets-talk-about-semantics/
Challenge:
Zakoduj prostą stronę. Możesz się wzorować na tej http://motherfuckingwebsite.com/. Może to być np. Twoje CV w wersji HTML. Użyj takich tagów jak p, ul, ol, section, h1 - h6
Step 2. Nauka CSS Szacowany czas: ok. tygodnia
W tym kroku nauczysz się nadawać wygląd stronie. Poznasz nowe atrybuty takie jak `class`, `id`. Trzymając się zasady pareto (znanej też pod nazwą 80/20) uczysz się najczęściej używanych rzeczy. Googluj po: *common CSS properties, most used CSS properties*.
**Polecane materiały: **
http://zellwk.com/blog/9-important-css-properties-you-must-know/
http://tech.journalism.cuny.edu/documentation/css-cheat-sheet/
http://www.expression-web-tutorial.com/CSS-Properties.html#.Vyr5A2F97Hw
http://code.tutsplus.com/tutorials/10-css3-properties-you-need-to-be-familiar-with--net-16417
http://learnlayout.com/position.html WAŻNE!!
https://css-tricks.com/centering-css-complete-guide/ WAŻNE!!
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ WAŻNE!!
Challenge:
Ostyluj stronę, którą wczesniej zakodowałeś oraz wykonaj 1/2 templaty z dowolnej listy, polecam:
http://www.dreamtemplate.com/templates/simple-personal-css-templates.html
www.mezzoblue.com/zengarden/alldesigns/
Step 3. Nauka frameworka CSS *Szacowany czas: ok. tygodnia - dwóch *
Do wyboru masz w zasadzie Bootstrap lub Foundation. Obojętne, które wybierzesz (bootstrap popularniejszy). Framework jest to szkielet do budowy aplikacji. W kroku drugim wszystko robiłeś sam, a tutaj rzeczy, które są używane bardzo często są już zrobione dla Ciebie (żebyś nie musiał wynajdywać koła od nowa).
@Edit
Teraz doszło jeszcze material design. Popularnym frameworkiem jest również semantic-ui.
**Polecane materiały: **
http://strefakursow.pl/kursy/web_design/kurs_bootstrap_3_-_responsywne_strony.html Biję się w pierś, że to tutaj umieszczam, ale co jak co to ten kurs mi pomógł.
Challenge:
Wybierz jakiś template z tej strony http://startbootstrap.com/template-categories/all/ i go sam zakoduj.
Step 4. Nauka javascript Szacowany czas: dwa - trzy miesiące *
Mamy content, style to teraz czas, żeby z naszą stroną się coś działo.
**Polecane materiały: **
http://helion.pl/ksiazki/programowanie-w-javascript-rusz-glowa-eric-t-freeman-elisabeth-robson,prjsrg.htm
Challenge:
Zrób jakis walidator formularza, jakąś prostą karuzelę itp.
https://github.com/getify/You-Dont-Know-JS
BARDZO WAŻNE
Na tym etapie powinieneś zapoznać się z metodami debugowania. Jest to bardzo wazne, a znam miliony programstów, którzy na oślep szukają błędów używając console.log.
Debugging JavaScript - 0 to Heisenberg
Useful JavaScript debugging tips you didn't know
Challenge:
Gra w snake'a, jakieś statki, albo mini paint w przeglądarce.
Pierwsza książka łagodnie Cie wprowadzi do świata javascriptu i da poczucie, że coś umiesz.
Druga ksiązka (a raczej seria) wyprowadzi Cie z błedu, że cokolwiek umiałeś i da Ci solidną dawkę wiedzy, która będzie podstawą do dalszego rozwoju.
Step 5. Nauka jQuery *Szacowany czas: miesiąc * *
jQuery to biblioteka (czy jak niektórzy mówią framework) do javascriptu. **Stąd JS uczysz się najpierw!** Tak samo jak w przypadku css, jquery daje Ci już gotowe rozwiązania do popularnych problemów, przykład:
Javascript
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
To samo w jQuery:
$.getJSON('/my/url', function(data) {
});
*Źródło: youmightnotneedjquery.com *
Challenge:
Możesz przerobić swoje rozwiązania z kroku 4 z użyciem jQuery.
Warto tutaj poświęcić również trochę czasu na poczytanie kodu źródłowego np. tej karuzeli http://www.owlcarousel.owlgraphic.com/ i spróbować zrozumieć co tam się dzieje.
Końcowy Challenge
Wchodzisz na tą stronę http://themeforest.net/category/all i wybierasz dowolny template, po czym kodujesz go sam od podstaw.
Od tego miejsca możesz iść w kierunku Frontend (preprocesory CSS, metodyki typu BEM, SMACSS, ReactJS, AngularJS, webpack, nodejs i npm..) lub Backend. To co Ci napisałem to ogólny zarys, bo wiem, że na początku można się w tym wszystkim zgubić. Zawsze bądź głodny wiedzy i naucz się szukać informacji.
Powodzenia.
PS. Nie warto kupować materiałów ze stron typu strefakursów, czy eduweb. Wiem, że sam wyżej poleciłem jeden z nich, ale to z lenistwa. Po prostu możesz obejrzeć ten tutorial na prędkości 1.25/1.5 biorąc kąpiel i załapiesz bootstrapa (co jest łatwiejsze niż szukanie informacji w internecie). Widziałem bardzo duzą częśc materiałów od nich i lepiej na tym wyjdziesz jak kupisz sobie książkę i dobrą kawę/herbatę niż ten kurs.
@Edit mowa o polskich kursach. Te zazwyczaj mają duzo niższa jakość i są mniej aktualne. Strony typu egghead.io, frontendmasters.com, udemy.com są warte uwagi. Oczywiście polecam kupować gdy są przeceny, wtedy kurs o wartości 200$ można kupić za 10$ i zrobić dobry research, żeby zainwestować pieniądze w kurs który ma najlepszy stosunek jakości do ceny.
* oczywiście mowa o podstawach podstaw.