Ludzie twierdzą, że zostanie programistą, gdy ma się nikłą wiedze na ten temat, jest nieosiągalne. Nic bardziej mylnego. Najważniejsze jest podjęcie decyzji, w jakim kierunku każdy z nas chce się rozwijać w tej sztuce. Zatem jak zostać programistą? Drug jest wiele. Poniżej kilka z nich.
1. Front-end developer – to programista zajmujący się budową szablonów stron internetowych, czyli kwestią wizualną. Technologie internetowe jakie potrzebujesz by nim zostać to HTML5, CSS3. Te dwie technologie to absolutne minimum. Dodatkowo warto zapoznać się z JavaScript, Jquery oraz PHP.
2. Back-end developer – programista zajmujący się tworzeniem oprogramowania do różnych aplikacji. Taki programista znajdzie pracę praktycznie wszędzie. Technologie internetowe jakie warto znać to: PHP, PYTHON, C#, JAVA.
3. Full stack developer – programista zajmujący się dosłownie wszystkim, co jest potrzebne. Ma pojęcie na temat Back-endu oraz Front-endu.
Jak zostać front-end developerem?
Wiele osób twierdzi, że potrzebne są do tego specjalne kursy. Moim zdaniem jest to błędne podejście. Szkoda wydawać pieniądze, jak w sieci jest pełno informacji na temat, jak zacząć swoją przygodę z tworzeniem stron.
W tym poradniku przedstawię podstawy budowy strony oraz wskażę, gdzie można szukać ozdób do naszego tekstu.
Zacznijmy od pobrania edytora w którym będziemy pracować. Ściągamy i instalujemy notepad++ ze strony producenta: https://notepad-plus-plus.org/. Otwieramy go, tworzymy nowy dokument i zapisujemy z rozszerzeniem .html
W tym momencie mamy utworzony plik strony internetowej – nic trudnego prawda?
Teraz troszkę o szablonie strony internetowej.
Mamy już dokument strony internetowej. Czas więc zacząć przygodę z naszą witryną
<!doctype html>
<html lang=”pl”>
<head>
<title></title>
</head>
<body>
</body>
</html>
Teraz troszkę opiszę co tutaj się zadziało. Stworzyliśmy podstawową strukturę HTML5.
‘<html lang=”pl”></html>’ – jest to rozpoczęcie dokumentu i określenie, że językiem przewodnim jest język polski.
‘<head></head>’ jest to tzw głowa witryny, w niej znajduje się tytuł strony ‘<title></title>’ i tam dołącza się wszystkie biblioteki ze stylami oraz skryptami strony.
Co to jest biblioteka? Jest to zbiór gotowych funkcji i instrukcji do strony internetowej.
‘<body></body>’ jest to ciało strony. Pomiędzy tymi znacznikami wpisujemy, co ma się na stronie znajdować.
Pewnie zauważyłeś/łaś, że zawsze jest otwarcie i zamknięcie znacznika np. ‘<body></body>’ i bardzo dobrze, ponieważ przeglądarka musi wiedzieć ,gdzie się co otwiera i zamyka. To dosyć logiczne.
Napiszmy swój pierwszy tekst na stronie. Niech to będzie ,,witaj świecie” i żeby było ciekawiej, zapiszemy go w nagłówku.
<!doctype html>
<html lang=”pl”>
<head>
<title></title>
</head>
<body>
<h1>Witaj świecie</h1>
</body>
</html>
Teraz po zapisaniu i włączeniu pliku strony internetowej, widzimy duży napis witaj świecie.
Istnieje 6 rodzajów nagłówków od h1 do h6 np.,<h2></h2>,<h3></h3> itd. aż do h6
Każdy z nich różni się wielkością.
Teraz może nauczymy się dodawać akapit. Jest to także bardzo proste. Tekst wpisujemy między znaczniki <p></p> (‘<p>’ oznacza początek akapitu), napiszmy np. ‘Pisanie stron nie jest takie trudne’
<!doctype html>
<html lang=”pl”>
<head>
<title></title>
</head>
<body>
<h1>Witaj swiecie</h1>
<p>Pisanie stron nie jest takie trudne</p>
</body>
</html>
Zapisujemy i widzimy rezultat :).
Pewnie myślisz, a gdzie tutaj te kolory i efekty, które każda strona posiada, a my tutaj robimy tylko jakieś dziwne napisy. A ja Ci odpowiem – no dobra zróbmy coś ciekawszego.
Zróbmy tak, aby napis ,,Witaj świecie” był koloru czerwonego i był pochylony, a napis ‘Pisanie stron nie jest takie trudne’ był niebieski i pogrubiony .
Nasz kod wygląda następująco:
<!doctype html>
<html lang=”pl”>
<head>
<title></title>
</head>
<body>
<h1 style=”color:red; font-style:italic;”>Witaj świecie</h1>
<p style=”color:blue; font-weight:600;”>Pisanie stron nie jest takie trudne</p>
</body>
</html>
I co tutaj się zadziało??
Do obu znaczników dodałem styl, poprzez ‘style=”” ’ to jest dosyć nieelegancki sposób dodawania stylu, ale myślę, że odpowiedni dla początkujących.
Takich stylów jest naprawdę dużo. Wszystkie można znaleźć na stronie : https://www.w3schools.com/css/css3_intro.asp
Bardzo polecam tę stronę. Jest to poradnik dobry zarówno dla początkujących, jak i zaawansowanych programistów.
Bardzo dziękuję za przeczytanie pierwszej części artykułu. W następnej poruszymy tematy, jak dodać zdjęcia na stronę i co to jest div. Pokażę Wam również, jak wydajnie tworzyć strony internetowe w notepad ++ oraz dopowiem o roli Backend-developera. Stworzymy także razem prosty program . Pozdrawiam i do kolejnego razu.
Bartek.