Budujemy prostą stronę internetową cz. 1

kod php programowanie

Kategoria wpisu PHP, HTML, CSS Tagi: , , , on przez .



Reading Time: 2 minutes

Dziś zaczynam na blogu cykl, który powinien znaleźć się tutaj wcześniej czyli „Budujemy prostą stronę internetową”. Do tej pory omówiłam wiele aspektów witryn internetowych, ale tak naprawdę nie stworzyłam wpisu, który łączył je by w pewną logiczną całość.

Do tej pory większość wpisów stanowiła omówienia funkcji i sposobu rozwiązań problemów. W tej serii chcę to usystematyzować.

Nie wiem ile części będzie liczyć seria i czy w trakcie jej trwania nie zostanie z różnych przyczyn przerwana jak np. kurs PHP gdzie pojawiły się ograniczenia techniczne.

Strona, którą chce zbudować w ramach mojego projektu będzie bardzo prosta. Przy jej budowie będę korzystać z technologi i bibliotek takich jak:

  • HTML5
  • CSS3
  • Bootstrap 4

O ile CSS3 raczej nie będę musiała specjalnie omawiać o tyle w między czasie pojawi się wpis o HTML5 oraz wprowadzenie do Bootstrap 4 (nie będę raczej cofać się do poprzedniej wersji).

Witryna zostanie wykonana na bazie dość prostego projektu:

prosty projekt strony internetowej

prosty projekt strony internetowej

Nie jest on może za ładny, ale idealny na prosty kurs.

Od czego zaczynamy

W pierwszym kroku będziemy musieli pociąć nasz projekt strony. Nie powinno to być zbyt trudne – jedyne co musimy z niego pobrać to:

  • dwie grafiki

Pozostałe elementy uzyskamy z pomocą CSS i HTML.

Pliki do pobrania:

Teraz będziemy potrzebować edytora kodu, w którym napiszemy naszą stronę. Najprostszym edytorem jest zwykły notatnik, ale niestety nie jest on zbyt poręczny.

Osobiście wolę użyć do tego Notepad++ lub Visual Studio Code jeżeli wolicie możecie użyć innego.

Budujemy prostą stronę internetową cz. 2

Darmowe zdjęcia na stronę lub bloga

Przeczytaj również

Odstępy pomiędzy literami w słowie CSS letter-spac... Zadaniem właściwości CSS letter-spacing jest ustawianie odległości (odstępów) pomiędzy poszczególnymi literami słowa w tekście. Za jej pomocą możemy w...
Element HTML z pionowym tekstem Tym razem pokaże w jaki sposób uzyskać efekt pionowo pisanego tekstu w elemencie HTML. Jak uzyskać efekt pionowego tekstu Na początek rozdziela...
Lustrzane odbicia obrazków z CSS Dzisiaj pokażę wam jak uzyskać efekt lustrzanego odbicia obrazka (ang. CSS image reflections) z pomocą CSS. Aktualnie z pomocą CSS można uzyskać ten e...
Wcięcia akapitowe CSS text-indent Z pomocą selektora text-indent możemy dokonać tzw. wcięcia w pierwszej linijce tekstu na stronie internetowej. Właściwość ta przyjmuje wartości liczb...