jak zostać programistą

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.

Artur Pięciak

Produkcja strony internetowych formalnie od 2012 roku, z pasji nieco dłużej. W Lokomotywie działam w wagonie technicznym www, sklepów opartych o WooCommerce oraz w wagonie, gdzie motywem przewodnim jest Adobe Photoshop. Po godzinach muzyczny ♫ relax i kibicowanie Real Madryt :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *