Dlaczego w wakacje warto poznać podstawy HTML i CSS ?

Autor:
Zespół Future Collars
Dlaczego w wakacje warto poznać podstawy HTML i CSS ?

Hej, hej – mamy wakacje! Czy zaplanowaliście już, co będziecie robić ? Chcecie przeznaczyć czas na labę i leniuchowanie, czy może nauczyć się czegoś nowego, a potem wykorzystywać zdobytą wiedzę z pożytkiem dla siebie i dla innych?

Ludzie sukcesu uczą się cały czas. Od 15 lipca do 11 sierpnia dajemy Wam możliwość nauki podstaw HTML i CSS – wykorzystajcie ten czas dobrze! Internet HTML-em i CSS-em stoi. Żadna strona internetowa nie powstanie bez fundamentu. Poznanie zasad kierujących tymi językami da Wam niezbędne podstawy do dalszej nauki. Bez tego ani rusz.

Jeżeli wiesz, że  budowanie stron jest czymś, co chciałbyś robić – nie zwlekaj, zapisz się na nasz kurs. Chcesz dowiedzieć się czegoś więcej? Czytaj dalej.

 

Podstawy programowania HTML i CSS

Pamiętacie film „Matrix” ? Neo mówił, że Matrix jest wszędzie, ale go nie widzimy. Podobnie jest z HTML i CSS – w Internecie jest on wszędzie, ale różnica jest taka, że możemy łatwo zobaczyć, gdzie jest i jak wygląda.

To, co widzimy na stronach internetowych, to wynik działania HTML-a, CSS-a i dodatkowych języków. Dzięki HTML i CSS twórcy ustalają, gdzie mają pojawiać się elementy strony i jaką mają przybrać formę. Odstępy pomiędzy elementami, marginesy, grubości, kolory – to podstawowe kwestie, z jakimi obcuje na co dzień twórca frontendu, czyli wyglądu strony. Chcesz przykładu? Wejdź na jakąkolwiek stronę internetową. Jaki jest pierwszy element od lewego, górnego rogu? Może to logo strony? Ten, kto projektował stronę, zaprogramował ją tak, żeby logo miało taką wielkość i pojawiało się właśnie w tym miejscu. Zastanawiał się też, czy logo ma być jako obrazek, czy zwykły tekst. Jeśli logo jest obrazkiem, to wewnątrz kodu strony podał do niego link i możliwe, że ustalił szerokość i wysokość. Jeśli logo jest tekstem, który można zaznaczyć i skopiować, to znaczy, że ustalał krój czcionki, jej rozmiar i kolor.

 

Czy HTML i CSS są trudne do nauki?

Po przeczytaniu tego akapitu będziesz potrafił/potrafiła utworzyć na środku strony koło z dużym napisem w kolorze czerwonym. Nie chcesz koła? Może to być kwadrat! W poniższym przykładzie poznasz podstawy HTML i CSS. Niech będzie to wstępem do Twojej pierwszej, własnoręcznie stworzonej strony internetowej. Piszę na serio, ponieważ za minutę sam/sama ją włączysz i zobaczysz swój pierwszy efekt nauki.

Utwórz na pulpicie plik tekstowy, wklej do niego poniższy kod i zapisz z rozszerzeniem „.html”. Teraz otwórz ten plik w Twojej przeglądarce internetowej, np. w „Google Chrome”, „Firefox” czy ”Opera” i zobacz, jak wyglądają początki nauki. Kod jest opisany, żebyś mógł/mogła zrozumieć, co jest czym. Nie przestrasz się ilości kodu, każdy nowy parametr jest w nowej linijce, aby w kodzie był porządek.

 

Kod HTML i CSS:

<head>
<style> /* wewnątrz tego znacznika, podajemy, jak mają wyglądać nasze elementy */
#kolo_wrapper { /* tutaj ustalamy parametry pojemnika na nasze koło */
width: 100%; /* szerokość pojemnika ustalamy na 100%, aby koło mogło być na środku */
height: 100%; /* wysokość też na 100%, aby koło mogło być na środku */
display: flex; /* dzięki temu możemy użyć poniżej 'justify-content' i 'align-items' */
justify-content: center; /* wszystko co wewnątrz pojemnika ma być na środku w poziomie */
align-items: center; /* środkowanie elementów wewnątrz pojemnika - w pionie */
border: 5px solid blue; /* ramka grubości 5px, linia ciągła, koloru niebieskiego - żebyśmy widzieli jak prezentuje się nasz pojemnik */
}

#moje_kolo { /* parametry dla koła */
width: 500px; /* szerokość */
height: 500px; /* wysokość */
display: flex; /* dzięki temu możemy użyć poniżej 'justify-content' i 'align-items' */
align-items: center; /* wszystko wewnątrz koła środkuj w pionie */
justify-content: center; /* środkuj w poziomie */
border-radius: 300px; /* owalne rogi dają nam możliwość utworzenia koła */
border: 1px solid lightgray; /* ramka koła koloru szarego */
color: red; /* kolor czcionki wewnątrz koła */
font-size: 40px; /* rozmiar czcionki wewnątrz koła */
}

</style> <!—Koniec znacznika z wyglądem elementów -- >
</head>
<div id='kolo_wrapper'> <!—Pojemnik na koło -->
<div id='moje_kolo'> <!—Nasze koło -->
CZEŚĆ. Treść wewnątrz koła.
</div> <!—Koniec znacznika z kołem -->
</div> <!—Koniec znacznika z pojemnikiem na koło -->

Pozmieniaj coś! Po prostu otwórz utworzony plik HTML w notatniku lub np. Notepad++. Usuń linijkę z border-radius: 300px; – otwórz z powrotem plik HTML w przeglądarce. Zobacz, jakie nastąpiły zmiany. Teraz możesz popróbować z różnymi wartościami dla color, border, width, height … Na tym to właśnie polega. Każdy, kto uczył się podstaw programowania HTML-a i CSS-a, przechodził tą samą drogą.

Jak widać, nie jest to takie trudne, jak mogłoby się wydawać. Cały szablon strony to po prostu kilkanaście lub kilkadziesiąt razy więcej kodu, ale gdy już dowiesz się ,na czym to wszystko polega – kod sam będzie wypływał spod Twoich rąk! W parę godzin będziesz potrafił/potrafiła utworzyć projekt, na którym będzie już widać cały zarys strony.

 

Nauka HTML i CSS od podstaw z mentorem

Znane słowa Konfucjusza brzmią:

Powiedz mi, a zapomnę, pokaż mi, a zapamiętam, pozwól mi zrobić, a zrozumiem.

Tworzymy dla Was wakacyjne kursy programowania, abyście mogli w praktyce wykorzystać zdobytą wiedzę i umiejętności. Każdy z kursantów ma na kursie do dyspozycji mentora, który zawsze służy pomocą.

Masz kłopot z wykorzystaniem nowej wiedzy? Nie ma problemu! Zapytaj mentora, jak poradzić sobie z nurtującym Cię wyzwaniem. Mentor jest szybszy niż Google i zrozumie Cię lepiej! Materiał nauczania jest jeden, ale podejście do każdego z Was jest indywidualne, więc nie musisz się martwić, że nie nadążysz z materiałem. To jest właśnie wyższość nauki razem z kimś, kto może Cię poprowadzić, nad szukaniem wszystkich informacji na własną rękę. Po co tracić czas na błędy? Ucz się na dawnych błędach mentora (chyba że mentor też kiedyś korzystał z kursów ;p

Perspektywy rozwoju

Pisać o perspektywach rozwoju w branży tworzenia stron internetowych, to jak pisać o tym, że ostatnio mamy bardzo upalne dni, a 2+2 to 4. Jest to oczywiste, że każdy, kto nauczy się podstaw HTML i CSS, będzie mógł je wykorzystać z pożytkiem dla siebie i innych. Zauważyliście, jak dużo software house’ów powstaje z dnia na dzień? Jak dużo nowych agencji interaktywnych jest na rynku? Nie bez powodu jest tak dużo ofert pracy dla webmasterów i frontendowców. Jest tylko jedna kwestia warta dostrzeżenia – pracę i najlepsze zarobki będą mieli ci, którzy są najlepsi w swoim fachu. Jako freelancer, sam spotykam się z sytuacjami, gdy ktoś korzystał wcześniej z usług jednego lub dwóch webmasterów, ale jakość ich stron internetowych pozostawiała wiele do życzenia. Zamiast myśleć o konkurencji, myślmy o nauce i ciągłym rozwoju.

 

Podstawy HTML i CSS – jak zdobyć doświadczenie?

HTML i CSS to niezbędne podstawy w tworzeniu stron internetowych. Po kursie będziesz potrafił/potrafiła stworzyć cały wygląd strony, wliczając w to menu i przejścia do innych podstron.

Ciekawostką jest, że gdy Internet jeszcze raczkował, najwięcej było stron statycznych, które zostały stworzone tylko i wyłącznie w HTML i CSS.

Jeżeli będziesz dobry w swoim fachu, to już wystarczy, aby świadczyć takie usługi innym, a jeżeli będziesz chciał/a czegoś więcej – nic nie stoi na przeszkodzie, żeby nauczyć się jeszcze np. języka JavaScript czy PHP i tworzyć dynamiczne, interaktywne strony internetowe, reagujące na to, w co klika użytkownik.

Pomyśl o tym – czy lepiej zainwestować w siebie, a później zbierać profity, czy leżeć do góry brzuchem? Czekamy na Twoją decyzję i życzymy dobrze spędzonych wakacji!

Przeczytaj jeszcze więcej
Premiera pierwszego w Polsce poradnika o reskillingu i upskillingu

Premiera pierwszego w Polsce poradnika o reskillingu i upskillingu – „Upskilling Reskilling. Czas na przyspieszenie”

„Upskilling Reskilling. Czas na przyspieszenie” to pionierskie opracowanie, które jako pierwsze kompleksowo ujmuje zagadnienia wypełnienia luki kompetencyjnej w firmach i analizuje wyzwania polskiego rynku pracy związane z brakiem specjalistów IT. Powstała na bazie wniosków z raportu „Wielki reset umiejętności” oraz warsztatów z radą programową ds. reskillingu prowadzonych przez Tinę Sobocińską. POBIERZ EBOOK: https://futurecollars.com/raport-upskilling-reskilling-czas-na-przyspieszenie/ https://reskilling.pl/raporty/   O ebooku „Upskilling Reskilling. Czas na przyspieszenie” Twórcy poradnika, zdając sobie sprawę z przełomowego Premiera pierwszego w Polsce poradnika o reskillingu i upskillingu – „Upskilling Reskilling. Czas na przyspieszenie”

Future Collars i Amazon: razem na trzech nowych rynkach

Future Collars i Amazon: razem na trzech nowych rynkach

– Nie zwalniamy tempa! Po wejściu na Bliski Wschód i nawiązaniu współpracy ze Zjednoczonymi Emiratami Arabskimi rozszerzamy działalność o kolejne kierunki ekspansji. Czechy, Słowacja i Irlandia, a dokładnie uprawieni pracownicy Amazon w tych krajach, wezmą udział w naszych dedykowanych kursach – komentuje Beata Jarosz, CEO Future Collars. Future Collars od kilku lat jest aktywnym partnerem programu Amazon Career Choice, który umożliwia pracownikom podnoszenie kwalifikacji do ról zarówno w firmie Future Collars i Amazon: razem na trzech nowych rynkach

Future Collars i Amazon Web Services łączą siły

Future Collars i Amazon Web Services łączą siły, aby zainspirować polską młodzież do rozpoczęcia kariery w sektorze IT

Szkoła kompetencji cyfrowych Future Collars rozpoczyna współpracę z programem Amazon Web Services (AWS) GetIT. Inicjatywa ta ma na celu zaznajomienie uczniów w Polsce, w wieku 12-14 lat – szczególnie dziewcząt oraz przedstawicieli społeczności niedostatecznie reprezentowanych – z umiejętnościami związanymi z chmurą obliczeniową. Projekt aspiruje do zainspirowania młodzieży do rozważenia kariery w branżach STEM (nauka, technologia, inżynieria, matematyka). Program AWS GetIT będzie realizowany przez cały rok szkolny 2023/2024, edukując Future Collars i Amazon Web Services łączą siły, aby zainspirować polską młodzież do rozpoczęcia kariery w sektorze IT

Maciej Paczuła

Refleksje Absolwenta: Nauka i rozwój nawet w trudnej sytuacji zdrowotnej

Co skłoniło Cię do zgłoszenia się na kurs w Future Collars w ramach Fundacji Ergo Hestia? I który kurs wybrałeś? To sama fundacja zgłosiła mnie bezpośrednio na kurs w Future Collars. Skorzystałem z doradztwa zawodowego w fundacji, gdzie zadeklarowałem, że chciałbym zostać Testerem. Dzięki temu przedstawiono mi kurs Tester Oprogramowania, który udało mi się pomyślnie zrealizować.   Jakie korzyści odniosłeś dzięki ukończeniu kursu? Czy pomogło Ci to w codziennej pracy lub w przebranżowieniu się? Ukończenie kursu Refleksje Absolwenta: Nauka i rozwój nawet w trudnej sytuacji zdrowotnej

Anna Niejełow

“Dostałam solidne podstawy, wiem także w jakim kierunku dalej się rozwijać, by być coraz lepszym Testerem” – rozmowa z Anną, absolwentką kursu Tester Oprogramowania

Co skłoniło Cię do zgłoszenia się na kurs w Future Collars? Który kurs wybrałaś i dlaczego? Po urodzeniu trzeciego dziecka wiedziałam, że muszę coś zmienić w swoim życiu zawodowym. O przebranżowieniu się do IT i zostaniu Testerem Oprogramowania myślałam już od pewnego czasu. Namawiał mnie do tego mój mąż oraz mój kolega, programista. Uważali, że poradzę sobie i że mam predyspozycje do tej pracy. Dlaczego akurat w Future Collars? Spodobała mi się agenda kursu, dostęp do kursu języka angielskiego w IT “Dostałam solidne podstawy, wiem także w jakim kierunku dalej się rozwijać, by być coraz lepszym Testerem” – rozmowa z Anną, absolwentką kursu Tester Oprogramowania

Moc Reskillingu Wykorzystanie korzyści biznesowych

Moc Reskillingu: Wykorzystanie korzyści biznesowych

W dzisiejszym zmieniającym się środowisku biznesowym, reskilling stał się bardzo ważnym pojęciem. Wiele firm na całym świecie ma trudności z znalezieniem pracowników posiadających nowe i niezbędne umiejętności np. specjalistów od cyfrowego bezpieczeństwa danych czy z innej branży specjalistów od Compliance. Dlatego coraz częściej sięgają po reskilling, czyli przekwalifikowanie swoich obecnych pracowników, co pozwala na odblokowanie ich potencjału i przynosi wiele korzyści biznesowych. Przedstawiam przykładową firmę o nazwie Innovatech Solutions, która pokazuje, Moc Reskillingu: Wykorzystanie korzyści biznesowych