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.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

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.

Nauka JavaScript, 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.

Nauka programowania - Codecademy

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.

Jak nauczyć się programować - Code School

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.

Nauka programowania - zabawa Code Combat

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.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

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.

JavaScript

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

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.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jak nauczyć się programować? HTML, CSS, JavaScript, jQuery
Ocena: 4.5 - 19 głosów

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • Jakub robisz kawał dobrej roboty. Kursy dobracowane merytorycznie i co najistotniejsze – tutoriale w formie wideo dużo lepiej się przyswajają niż wersja „papierowa”. Pozdrawiam

  • Hej :D Mam taki problem. Otóż mam najnowsza wersje Google Chrome i Opery. Kod pisze w notepadzie… Po prostu wpisuje kod w javascripcie(np console.log(„cos tam”)), czy chodźby inne łatwe polecenia. Niestety nie działają one w przeglądarce, gdy otwieram napisana stronę. Dodam iż np. na stronie codecademy ten sam kod działał idealnie. Co może być tego przyczyną?

  • Witam.
    Jak zrobić Breadcrumb – okruszki chleba – na stronie w HTML5. Czy koniecznie trzeba to zrobić w .php?
    Chcę to zamieścić na swojej stronie, a nie mam już pomysłu. Czekam na info.
    Pozdrawiam Stanisław

    • Witaj,
      jeśli masz statyczną stronę HTML, jedyne rozwiązanie jakie przychodzi mi do głowy (oprócz właśnie PHP lub WordPressa) to zrobienie tego ręcznie.

      To znaczy tworzysz sobie na stronie wydzielone miejsce, np. zaraz nad treścią, w formie:

      „Jesteś tutaj: strona_główna > kategoria > nazwa_wpisu”

      a potem ręcznie wstawiasz odnośniki: <a href=”http://link” rel=”nofollow”>kategoria</a>

      Jeśli masz małą stronę, raczej nie ma sensu uruchamianie PHP czy WordPressa tylko dla breadcrumbs’ów :)

      Chyba że wykorzystujesz właśnie WordPressa, to daj znać i zaraz znajdę coś prostego.

      • Witam.
        Dziękuję za szybką odpowiedź. Strona jest statyczna i spróbuję zrobić tak jak napisałeś. Generalnie strona jest gotowa ale chciałem spróbować zrobić te „okruszki” i ma 6 podstron. Została kwestia dopracowania.
        Pozdrawiam

        • W programowaniu bardzo często sprawdza się zasada: im prościej, tym lepiej.

          Tutaj, przy 6 podstronach, samo ustawienie PHP zajęłoby pewnie więcej czasu niż ręczne ustawienie linków dla strony głównej, kategorii i wpisu.

          Inaczej by to wyglądało, gdyby było 100 podstron.

          Powodzenia!

  • Strona codeacademy.com jest super – właśnie czegoś takiego szukałam! Może wreszcie nauczę się tych literek i będę umiała sobie sama poradzić z kodem na blogu :) Dziękuję!

  • Witam,
    a może orientuje się ktoś ile czasu zajmuje nauka ReactJS lub AngularJS?

    Rozumiem, że to jest jakaś płynna granica i każdy ma inną zdolność przyswajania kodu i nauki. Ale weźmy pod uwagę np. osobę co jest programistą od 10 lat i zna JS, HTML, CSS, jQuery na dość dobrym poziomie.

    Ile godzin w takim przypadku należało by poświęcic dla ReactJS i AngularJS, aby móc w miarę sprawnie coś w tym pisać i mieć możliwość na otrzymania pracy związane z tymi bibliotekami.

    • Cześć Adrian,
      ja zrozumiałem podstawy AngularJS w ciągu tygodnia czy dwóch. Potem zostało już tylko doskonalenie tego i dalsze rozwijanie się.
      Z Reactem było już gorzej, ale też w ciągu 2 tygodni „załapałem” jak to wszystko współpracuje. Była to nauka po parę godzin dziennie max.

      React ogólnie jest prosty, ale trzeba do niego dołączać dużo paczek z zewnątrz, np. fetch, bo obsługuje tylko widoki.
      Co do pracy – najprościej chyba będzie odpowiedzieć na ogłoszenia i zapytać się wprost „co muszę umieć, by u Was pracować”.

  • Jestem kompletnie zielona , temat mnie interesuje ale wydaje sie trudny .Wiem,że jestem początkująca, ale od czeego właśnie zaczać. Głupio się przyznać ,ale nie znam Worda, Exela , bo nie ma takich kursów stacjonarnych , nie ma kto pokazać , a tu juz mowa o HTML i dalej. Proszę o poradę i odpowiedż na maila

  • >