#6 Jak zostać programistą: Lista kursów HTML i CSS dla początkujących. Platformy Codepen i FreeCodeCamp.

You are currently viewing #6 Jak zostać programistą: Lista kursów HTML i CSS dla początkujących. Platformy Codepen i FreeCodeCamp.

Co powinien umieć twórca stron internetowych

W dzisiejszym artykule zostanie przedstawiona lista kursów HTML i CSS dla początkujących. A dlaczego od razu dwie technologie? Bo obie są nierozłączną częścią dla twórców stron internetowych:

  • HTML jest to hipertekstowy język znaczników, który odpowiada za strukturę strony i jej zawartość np. ustalamy, że dana treść ma być uporządkowana jako lista, akapit, zwykły tekst itp. lub chcemy, żeby w jakimś konkretnym miejscu na stronie wyświetlił się obrazek czy po kliknięciu w dany tekst ma przenieść nas na inną stronę.
  • CSS natomiast jest to język stylów, który odpowiada za wygląd strony np. kolory na stronie (przyciski, tło, tekst), wielkość tekstów, wyświetlanie elementów itp.

Lista kursów została przedstawiona tak, że w nazwie zostało opisane czy jest to kurs HTML czy CSS. Jeśli oba występują w nazwie, to jest to kurs, w którym uczą obu języków naraz.

Jeśli dopiero zaczynasz przygodę z tymi technologiami, to zacznij najpierw od HTML, bo bez niego nie będziesz wstanie ruszyć z CSS.

Lista kursów HTML i CSS

Seria wpisów na blogu

How2Html – bardzo dobry kurs html i css dla początkujących. Oprócz omawiania dość szczegółowo tych dwóch technologii, autor kursu również skupia się na aspektach pobocznych m.in. jak działa serwer (http, domena zasoby) czy formaty plików. Nie są to zagadnienia ściśle związane z tymi dwoma językami, natomiast są zagadnieniami z podstaw IT, które warto znać.

W3Schools HTML i W3Schools CSS (język angielski) – na tej stronie mamy 2 osobne kursy, dla obu języków osobno. Jest to jedna z najpopularniejszych stron do uczenia się programowania. Osobiście nie lubiłem z niej się uczyć nowej technologii od podstaw. Natomiast jest dobrym uzupełnieniem, gdy znamy choć trochę daną technologię. Dlaczego? Z lewej strony menu mamy długą listę najważniejszych elementów występujących w języku. Jeśli będzie coś konkretnego nas interesować to możemy szybko to znaleźć.

YouTube

Kurs HTML & CSS (seria 11 filmików – średni czas około 48min) – ciekawy kurs podstaw języków HTML i CSS. Będzie dobrym wyborem na początek dla osób, które na szybko chcą zapoznać się z tymi technologiami.

Strona internetowa od zera HTML i CSS (seria 4 filmików – średni czas około 32min) – nauka pisania w HTML i CSS na podstawie praktycznego projektu. Kurs będzie dobrym uzupełnieniem, jeśli znamy już podstawy koncepcji i składni tych języków.

Kurs HTML (seria 7 filmików – średni czas około 1h 10m) i Kurs CSS (seria 6 filmików – średni czas około 45min) – są to 2 kursy od Mirosława Zelenta. Nie wszystkim podchodzą jego kursy, ale według mnie jest w nich dużo merytorycznej wiedzy. Kursy na jego kanale skupiają się nie tylko pisaniu samego kodu, ale też całej otoczki, którą powinno się znać.

HTML Full Course (2h 2m, język angielski) – dla fanów, którzy lubią mieć wszystko w jednym filmiku. Autor dość dobrze przedstawia podstawy języka HTML.

CSS Full Course (1h 25m, język angielski) – autor skupia się na podstawach języka CSS. podobnie jak wyżej, cały kurs został przedstawiony w jednym filmiku.

CSS Tutorial – Zero to Hero (6h 18m, język angielski) – jeśli kogoś interesuję szczegółowe zapoznanie się z językiem CSS, to ten kurs powinien być odpowiedni. Zostały w nim przedstawione podstawy oraz bardziej zaawansowane rzeczy z tej technologii. Polecam się z tym kursem zapoznać, ponieważ zaawansowana znajomość języka CSS pozwala tworzyć bardziej zjawiskowe wyglądy stron internetowych.

Książki

HTML i CSS zbuduj witrynę www. podręcznik frontend developera (512 stron) – jeśli ktoś lubi uczyć się z książek, to dla technologii HTML i CSS też się znajdzie dobra pozycja. W dość przystępny sposób została przedstawiona wiedza w zakresie tworzenie podstawowych stron internetowych.

Udemy

Jeśli nie czytałeś poprzednich wpisów o listach kursów dla początkujących wstawiam ponownie opis platformy. Udemy jest to platforma, na której można znaleźć mnóstwo kursów z różnych obszarów, nie tylko z programowania. Kursy na tej platformie są niestety płatne. Koszt ich to 35zł – 45zł (na stronie możesz zobaczyć wyższe ceny, natomiast zawsze są na niej promocję. Jeśli obecnie nie ma żadnej, to poczekaj parę dni lub otwórz przeglądarkę przez tryb incognito).

Responsive Web Design Essentials – HTML5 CSS3 Bootstrap (16h 30m, filmiki podzielone na 7 modułów, język angielski) – ten kurs wyróżnia to, że autor postawił na praktykę (przez to nie polecam na początek). W ramach kursu, autor realizuje 4 projekty o różnych poziomach trudności. Przedstawione zostały w nim również bardziej zaawansowane rzeczy jak responsywność strony internetowej (strony odpowiednio skaluję się dla przeglądarki na komputerze i na urządzeniach mobilnych) oraz biblioteka Bootstrap. Wybór tego kursu będzie dobry dla osoby, która chce ugruntować wiedze w tych technologiach.

Build Responsive Real World Websites with HTML5 and CSS3 (12h, filmiki podzielone na 10 modułów, język angielski) – w tym kursie jest również nastawienie na praktykę. Autor buduję jeden duży projekt podczas całego kursy. Podobnie jak w przypadku powyżej, zalecam dopiero zapoznanie się z tym kursem, jeśli znasz podstawy HTML i CSS.

Pisanie i testowanie napisanego kodu z użyciem przeglądarki

Może się zdarzyć tak, że podczas nauki języków HTML i CSS nie będziesz zainteresowany instalacją dodatkowego oprogramowania ani korzystaniem z notatnika na swoim urządzeniu. Dlatego chciałem Ci przedstawić jak możesz pisać i testować swój kod z użyciem przeglądarki.

Na stronie W3Schools (język angielski) jest dostępny tryb, w którym można sobie przećwiczyć kod napisany w HTML i CSS. Jest to bardzo prosty notatnik, który pozwala Ci na pisanie i szybkie przetestowanie kodu. I to byłoby tyle z jej funkcjonalności 🙂 Pozwala oczywiście zapisać kod, jakbyś chciał zachować na później.

Inną stroną wartą uwagi jest Codepen (język angielski). Jest to strona do pisania stron internetowych z wykorzystaniem 3 plików HTML, CSS i JavaScript. Warto tutaj zaznaczyć, że pisząc na tej stronie, interesuje nas tylko kontent! To znaczy, że strona domyślnie integruje za nas pliki, żeby działały między sobą oraz tworzy dla nas automatycznie znaczniki <head> i <body>, a nas interesuje tak jakbyśmy uzupełniali treść dla tego drugiego. Możemy również stworzyć tu konto i przechowywać wszystkie projekty. Dodatkową zaletą jest możliwość podglądania prac innych użytkowników. Pozwala nam to zobaczyć jakie zdolności mają inni ludzie. Tylko się nie przeraź, bo niektóre z nich potrafią naprawdę zaskoczyć.

Platforma FreeCodeCamp

Istnieje jeszcze inna forma nauki pisania stron internetowych. Jest to platforma FreeCodeCamp (język angielski). Jest to strona, która prowadzi kurs dla twórców stron internetowych. Oprócz podstawowych języków jak HTML i CSS, posiada również mnóstwo innych technologii wymaganych dla frontend developera: JavaScript, JQuery, React, Redux, Sass. Pewnie większości nie znasz, ale wymieniłem je, jakbyś chciał się zainteresować bliżej technologią frontedowym.

Spis treści serwisu FreeCodeCamp

Uwaga! Jak zauważyłeś na obrazku, przerobienie każdej części kursu, według autorów strony, trwa 300h godzin. Raczej nie do końca jest to prawda. Osobiście robiłem kurs i każdy z modułów zajmował paręnaście godzin.

Przykładowy temat omawiany w ramach kursu na stronie FreeCodeCamp

Jaka jest koncepcja strony, że ją wyróżnia na tle innych? Jak widzisz na obrazku powyżej, strona kursu została podzielona na 4 części:

  • Z lewej strony jest część teoretyczna dla każdego omawianego tematu.
  • Pod spodem części teoretycznej jest zadanie do wykonania w ramach omawianego tematu.
  • W środkowej części jest notatnik. Znajduję się tutaj kod omawiany w ramach tematu oraz w tym miejscu rozwiązujemy zadanie.
  • Z prawej strony jest rezultat kody w postaci wyjściowej strony internetowej.

Zachęcam Cię do skorzystanie z tej strony jako alternatywnego sposobu nauki. Może właśnie ten sposób nauki będzie dla Ciebie najbardziej efektywny.

Podsumowanie

To byłoby na tyle z listy kursów HTML i CSS dla początkujących. Mam nadzieję, że znajdziesz coś stąd dla siebie. Z mojej strony, jeśli nigdy nie tworzyłeś niczego w tych językach, polecam zacząć od jakiegoś krótkiej serii na YouTube. Po obejrzeniu powinieneś już rozumieć składnię tych języków. Jeśli nie, to oczywiście przerób jeszcze jeden kurs. Znając podstawy składni oraz ogólną koncepcję, najlepiej przejść od razu do trudniejszych rzeczy. Po prostu w sytuacji, w której czegoś nie pamiętałeś jak robić, to najlepiej na bieżąco sprawdzać.

Następnym etapem nauki po HTML i CSS jest język programowania JavaScript, który jest nieodłącznym elementem twórców stron internetowych. Listę kursów znajdziesz w następnym wpisie.

Subscribe
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments