Jak nauczyć się programować? HTML, CSS, JavaScript, jQuery

Oto pytanie wszystkich nastolatków (i nie tylko) wciągniętych w magię komputerów: jak nauczyć się programować? Często pytania dotyczą też języka, którego warto się uczyć.

Jeżeli chcesz skupić się na tworzeniu stron, warto poznać podstawy, czyli HTML5 i CSS3 oraz minimum podstawy JavaScript, by sprawnie poruszać się w kodzie.

HTML5 to totalna podstawa, bo jest obecny na każdej stronie i na samym początku warto chociaż rozumieć do czego służą poszczególne tagi, znaczniki.

Ten artykuł traktuje ogólnie o nauce programowania, ale możesz też przeczytać: kurs HTML dla zielonych

Style CSS3 świetnie nadają się do nadawania wyglądu naszej stronie, natomiast JavaScript to jeden z fundamentalnych języków programowania w internecie.

Zobacz co możesz stworzyć za pomocą JavaScriptu na przykładzie artykułu: jak zrobić popup w JavaScript.

Nauka programowania – jak to wszystko wygląda?

Jest takie powiedzenie, że jedyną metodą, by zostać dobrym programistą jest ogromna ilość praktyki. Jeżeli więc chcesz nauczyć się programować, musisz programować.

Nie ma prostszej metody niż pisanie kodu i nie wystarczy tutaj teoria – ona ma marginalne znaczenie, bo jeżeli nie wykorzystasz wiedzy w praktyce, szybko o niej zapomnisz, szczególnie w tej dziedzinie, gdzie każdy problem można rozwiązać na 1000 sposobów.

Warto tutaj dodać, że nawet najlepsi programiści nie piszą kodu „z palca”. Technologie zmieniają się tak szybko, że to jest po prostu niemożliwe.

Przykład JavaScript – kiedyś go nie rozumiałem i miałem nadzieję, że szybko „umrze” i zostanie zapomniany jako język internetu, a stało się na odwrót.

JS rozwija się teraz tak szybko, że oprócz Front Endu (jQuery, AngularJS i inne) możesz w nim pracować przy Back Endzie (node.js itd).

W swojej pracy będziesz często korzystał ze stron typu Google, Stack Overflow i przeróżnych for w poszukiwaniu rozwiązań swoich problemów.

Moja metoda nauki programowania

Praktycznie każdy uczy się kodowania poprzez zabawę z kodem. Tak samo projektant stron, by być dobrym, poświęca czas na Photoshopa lub Sketch – w zależności co chce tworzyć. Ja sam próbowałem wielu różnych metod, ale najlepiej sprawdziło się u mnie tworzenie własnych projektów.

Co robiłem? Siadałem z kartką i wymyślałem sobie prostą stronę (ostatnio uczyłem się JavaScript, więc HTML i CSS nie były priorytetem), na której planowałem różne funkcje, których jeszcze nigdy nie robiłem, a które uznałem za ciekawe i warte nauki.

Jeden projekt pozwolił mi szybko i przyjemnie nauczyć się organizacji kodu w JavaScript (różne wzorce projektowe, np. Revealing Module Pattern), a inny: jak w praktyce pracować z narzędziami typu Grunt, Gulp czy Git.

Teraz te projekty mam na dysku i w momencie, kiedy chciałbym sobie cokolwiek przypomnieć albo utrwalić wiedzę, wystarczy że podejrzę sobie kod źródłowy.

W przypadku „normalnych” metod, czyli tworzenie jakiejś losowej strony, byle tylko przetestować jakieś funkcje w JS – byłby bałagan i chyba prędzej bym zrezygnował niż poświęcił czas na szukanie.

Darmowy kurs JavaScript, HTML, CSS, PHP czy nawet designu!

Przedstawiam Ci kilka ciekawych stron, które traktują programowanie trochę inaczej niż tylko przepisywanie kodu. Dzięki nim szybko nauczysz się programować w takich językach, jak HTML5, CSS3, JavaScript czy popularne jQuery.

Ale najpierw obejrzyj filmik, na którym zobaczysz kto zawdzięcza swój sukces właśnie programowaniu.

Są to między innymi Bill Gates (Microsoft, Windows), Mark Zuckerberg (Facebook), Drew Houston (twórca Dropboxa) czy Jack Dorsey (jeden z twórców Twittera). Warto więc programować!

Lista stron:

Try jQuery – naprawdę ciekawy projekt, który pomoże Ci w nauce jQuery.

Stworzony w formie interaktywnego kursu, który wynagradza Cię za każdy postęp czy dobrze rozwiązane zadanie. Wszystko bez konieczności rejestracji.

Na Code School opisanym poniżej znajduje się kontynuacja tego kursu.

Codecademy – interaktywna platforma, na której za darmo nauczysz się języków HTML i CSS, JavaScript, jQuery, Python, Ruby oraz PHP.

Twórcy udostępnili też kursy do nauki API różnych stron, np. YouTube, Soundcloud, Github, Twitter czy Bitly – w ten sposób stworzysz swoje własne aplikacje na podstawie API tychże stron.

Do 24 stycznia tego roku strona miała 24 miliony użytkowników, którzy wykonali ponad 100 milionów ćwiczeń na stronie.

Code School – strona ucząca przeróżnych umiejętności z zakresu programowania czy designu stron.

Kursy stworzone zostały zarówno dla początkujących, jak i bardziej zaawansowanych użytkowników i są połączeniem filmów, kodowania w przeglądarce i zabawy, co oczywiście sprawia frajdę.

Wszystko to z ładną otoczką graficzną i, tak jak Codeacademy, odznakami za poprawnie wykonane ćwiczenia.

Każdy kurs to przynajmniej 5 poziomów, a każdy poziom zaczyna się od wstępu filmowego. Jedyne czego potrzebujesz to nowoczesna przeglądarka (czyli „pa pa IE6”).

Codecombat – coś dla miłośników gier i osób, które mają już dosyć tradycyjnych kursów JavaScript.

CodeCombat powstał w 2013 roku, kiedy to jego twórcy i ich koledzy próbowali uczyć się programowania z Codecademy, ale nie udawało im się to.

Nie podobała im się powolna i ciężka nauka, więc stworzyli coś szybkiego. Sami przyznali, że jak chcesz nauczyć się programować – pisz dużo kodu tak, by sprawiało Ci to przyjemność. Do wyboru kampania dla początkujących czy multiplayer dla bardziej zaawansowanych.

Są też inne języki, ale aktualnie w wersjach beta: Python, CoffeeScript, Clojure, Lua, Io.

Polecane źródła do nauki HTML, CSS i JavaScript

Oprócz wyżej wymienionych stron być może będziesz potrzebował uporządkować swoją wiedzę lub skorzystać z innych źródeł. Dlatego też poniżej przedstawiam krótką listę stron, które mogą pomóc Ci w nauce.

HTML i CSS

To tak naprawdę podstawy każdej strony. HTML i CSS możesz się nauczyć do średniego poziomu w ciągu nawet kilku godzin – wystarczy „załapać” jak to działa. W HTML opisujemy strukturę strony, a w CSS nadajemy jej wygląd.

Możesz zacząć od kursu HTML czy CSS, których jest masa w internecie. Potem liczy się już tylko praktyka, bo doskonalenie umiejętności zajmuje dużo więcej czasu niż poznanie podstaw.

W dalszym poznawaniu HTML i CSS mogą być pomocne te strony:

• CSS-Tricks – tricki i wskazówki, które dotyczą bardzo wielu aspektów stylów CSS
• Kurs HTML i CSS od Shay’a Howe
• W3Schools – korzystaj z tej strony tylko w formie przypomnienia tego, czego już się nauczyłeś. Jak piszą sami autorzy: przykłady kodu mogą być uproszczone i nie ma gwarancji, że są poprawne

Przydadzą się też tzw. cheatsheets, czyli specjalne arkusze, na których jest np.

• podsumowanie znaczników HTML5 (przykład)
• lub tagów CSS3 (przykład)

JavaScript

Do płynnej pracy z JavaScriptem niezbędne są podstawy HTML i CSS, bo te języki często ze sobą współpracują.

• Kurs JavaScript mojego autorstwa – może pomóc Ci w początkowej fazie nauki, by szybko wejść do świata JS
• Bezpłatna książka Eloquent JavaScript – dobre wprowadzenie na początek przygody z JavaScriptem
• Mozilla Developer Network – strona w formie dokumentacji, dobre źródło wiedzy nt. funkcji, tablic, obiektów i ogólnie całego JavaScriptu

Oprócz tego możesz wyszukiwać szablony stron, a następnie analizować ich kod HTML i CSS. Jeżeli znasz już JavaScript, tutaj również możesz podejrzeć wszystkie instrukcje i – na żywo – sprawdzić jak działają w szablonie.

Najlepszą wg mnie metodą nauki jest tworzenie własnych projektów – pisałem o tym wyżej.

A więc jak nauczyć się programować z wykorzystaniem powyższych stron?

Wybierz sobie tę, która najbardziej przypadnie Ci do gustu, uruchom kurs i praktykuj, eksperymentuj, popełniaj błędy, a prędzej czy później kodowanie stanie się całkiem proste.

To w sumie tak, jakbyś uczył się nowego języka – tyle że rozmawiasz z komputerem, z którym czasem ciężko jest się dogadać.

Jeżeli znasz jeszcze jakieś ciekawe strony tego typu, koniecznie napisz o nich w komentarzu.