Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku (5 / 11)

Jak wiecie HTML & CSS to podstawa. I w sumie miałam o tym nie pisać. Postanowiłam jednak przygotować paczkę materiałów dla osób, które rzeczywiście zaczynają od zera.

Artykuł pisany na podstawie doświadczeń własnych oraz opinii innych. Prowadząc grupę wsparcia w zakresie nauki programowania + udzielając się na grupach z osobami początkującymi mam pewien pakiet doświadczeń, który przekuwam m.in. w ten wpis.

Materiały po polsku są oznaczone *. Domyślnie materiały są po angielsku. Angielski to język, który jest niezbędny w przypadku programowania, nawet jeśli możesz zacząć bez niego 😉

 

No to start!

Mocno polecanym kursem dla początkujących jest HTML & CSS na CodeCademy. Niestety z tego, co widzę lada moment zostanie zdjęty – na jego miejsce polecany jest Learn HTML & CSS (zakładam, że jest to odświeżenie pierwszego kursu).

* Jeśli potrzebujecie jednak materiałów po polsku – całkiem niezłe wprowadzenie do HTML/CSS znajdziecie na KhanAcademy – Wstęp do HTML/CSS: Tworzenie stron internetowych

* Ciekawie wygląda również tutorial HTML and CSS Step by Step. A co więcej – jest po polsku.

* A skoro już o polskich materiałach na start mowa – możesz skusić się na darmowego ebooka „Moja pierwsza strona internetowa w HTML5 i CSS3” (autor: Damian Wielgosik)

Więcej książek?

Mocno polecaną pozycją jest „HTML i CSS. Zaprojektuj i zbuduj witrynę WWW”, Jon’a Duckett’a. Zawsze mam obawy polecając ją, bo jednak jest już dość stara. Sama raczej nie polecam uczyć się HTML poniżej 5, ale biorąc pod uwagę, ile osób chwali ją sobie na start – nie potrafię jej pominąć. Sama mam zamiar do niej sięgnąć z ciekawości i ocenić, czy pozycja jest rzeczywiście tak fenomenalna jak ją opisują inni 😉

 

Kolejny kurs w temacie HTML5 znajdziecie na EDX.org – HTML5 and CSS Fundamentals. Możecie pójść tą ścieżką z innymi chętnymi i rozpocząć wtedy kiedy kurs „startuje”, bądź zrobić go w dowolnej chwili (self-paced). Kursy na EDX są darmowe. Jeśli wydaje Ci się inaczej – zapraszam do tego artykułu.

EDX oferuje również kurs CSS Basics. W zasadzie bardzo ufam w jakość kursów i materiałów na EDX. Ten, który Wam polecam powstał przy współpracy W3C oraz Intela. Sama przerabiałam jedną z części powstałych z tej współpracy, a dokładniej HTML5 Coding Essentials and Best Practices, którą polecam po zapoznaniu się z podstawami.

Wszystkie te kursy tworzą pakiet Frontend Web Developer, w skład którego wchodzi jeszcze kurs tworzenia HTML5 Apps and Games.

 

Bardzo fajną opcją jeśli chodzi o naukę Web Developmentu jest darmowy bootcamp programistyczny – Free Code Camp. Gdybym zaczynała – zdecydowanie bym się skusiła! Macie tam ścieżkę Front End Development Certification z zadaniami z HTML5 i CSS na czele.

 

W temacie nauki pisania stron internetowych także Mozilla Developer Network przygotowała ciekawą opcję. Tutorial Naucz się pisać strony internetowe! Chciałabym zaznaczyć, że jest po polsku – ale niestety tylko częściowo…

Ogólnie sama strona MDN (Mozilla Developer Network) jest świetnym i rzetelnym źródłem nie tylko na start. Nieraz też na pewno sięgniecie do niej w poszukiwaniu jakiejś metody z API.

 

* Jeśli chodzi o Youtube: polecam kanał Samuraj Programowania.

Sama często korzystam również z video na kanale Learncode.academy.  Jest tam również seria Web Development Tutorials For Beginners, która wygląda obiecująco, a przede wszystkim – podstawowo 🙂

Alternatywnie The Net Ninja z serią HTML Tutorials For Begginers.

 

Jak nauczyć się CSS? Najlepiej praktycznie!

Świetne wizualne wprowadzenie do nauki CSS – cssreference.io

cssreferenceio

A może chcecie pobawić się Flexboxem z żabką albo opanować CSS grid w ogrodzie?

FlexBox Froggy

Grid Garden

Śmiech śmiechem, ale uważam, że nauka przez zabawę to świetna metoda nie tylko dla dzieci 😉 Dlatego już wkrótce ukaże się wpis z większą ilością takich programistycznych gier i wyzwań.

 

Na koniec pare ściąg:

Wydrukuj je i powieś w widocznym miejscu bądź trzymaj blisko. Mogą Ci się przydać! Zwłaszcza na początku 🙂

 

Jak wiecie pisałam już na temat nauki HTML5 & CSS. Nawet rzuciłam Wam wyzwanie – zadanie. Ten wpis jest jednak dużym rozszerzeniem materiałów tam opisanych. Mam nadzieję, że będą pomocne. A zadanie i tak możecie spróbować wykonać na rozgrzewkę 😀 Znajdziecie je tutaj.

A w czym pisać kod? O paru edytorach pisałam już na blogu. Niestety na liście nie ma edytora, z którego skorzystamy w serii nt. tworzenia aplikacji webowej – Visual Studio Code. Temu edytorowi poświęcę oddzielny wpis już wkrótce 😉

Jeśli Was interesuje pytanie o używane edytory kodu / IDE zadałam na grupie wsparcia – TOP 5 wg ankiety (na dzień 29.07.2017):

  1. Brackets
  2. Sublime Text
  3. Visual Studio Code
  4. Atom
  5. WebStorm

Samą ankietę znajdziecie TUTAJ (link działa, jeśli należysz do grupy).

A jeśli braknie Ci miejsc do nauki HTML5 & CSS (to możliwe? 😀 ) jeszcze więcej polecanych przeze mnie platform do nauki znajdziesz TUTAJ.

 

No to chyba wszystko na dzisiaj 🙂

Powodzenia z nauką!

 

P.S. I niech teraz ktoś powie, że nie wie z czego się uczyć HTML5 i CSS 😉

 

Kolejne propozycje zgłaszane przez Was 🙂

Tutorial: Semantyczny blog w HTML5 (autor: Comandeer)

Series Navigation<< Command Line – co, gdzie i jak? [Materiały do nauki]Duża paczka materiałów do nauki JavaScriptu >>
  • Rafał Piekara

    Dałaś czadu!! Mega baza!!

  • zarobiona

    WOW Super!!! Dzięki wielkie!

  • <3 jesteś najlepsza!

  • de

    Hej:) Wybacz za offtop, chciałam zapytać o coś wordpressowego, czy Twoj spis treści jest generowany jakąś wtyczką, czy tworzysz go ręcznie? Przydałoby mi się coś takiego, tylko że potrzebowałabym z podziałem na kategorie (chciałabym mieć osobny spis treści z kategorii Programowanie, osobny z Testowanie, osobny z Aplikacje, osobny z Cała Reszta:D), może możesz polecić jakąś wtyczkę? WordPress jest super, ale taki mam z nim problem, że przekopanie się przez setki wtyczek jest wręcz mission impossible:D

    • de

      Ok, sama sobie odpowiem a może komuś się wiedza przyda – wtyczka Simple Yearly Archie daje radę pod tym względem. Pozdrawiam!<3

    • Wtyczka 🙂 U mnie akurat Table of Contents Plus. Jedną z opcji jest właśnie spis treści 😉 Tylko nie wiem czy da się wyciągnąć oddzielny dla każdej kategorii… Nie próbowałam.

      Mam marzenie, że kiedyś nie dość, że napiszę swój motyw dla bloga to jeszcze zakoduje funkcjonalności dostarczane przynajmniej przez te mniejsze wtyczki 😛 Ale tymczasem marzenie ściętej głowy przez ilość pomysłów w realizacji i planach 😀 Narazie brakuje mi czasu by zmienić motyw na zakupiony jakiś czas temu 😀 Uff…