Lekcja 11: Tworzenie strony WWW - projekt zespolowy (2)

Implementacja - czas na kodowanie!

Ta lekcja jest glownie praktyczna - kazdy zespol realizuje swoj plan z poprzedniej lekcji. Jednak zanim przejdziecie do kodowania, warto poznac kilka kluczowych technik CSS, ktore pomoga stworzyc nowoczesna i responsywna strone internetowa. Ponizej znajdziecie gotowe wzorce kodu, ktore mozecie dostosowac do swoich potrzeb.

Pamietajcie o zasadzie mobile first - zaczynajcie od stylow dla malych ekranow (telefonow), a nastepnie dodawajcie style dla wiekszych ekranow za pomoca media queries. To podejscie jest standardem w branzy i ulatwia tworzenie responsywnych stron.

CSS Flexbox - elastyczny uklad

Flexbox to potezne narzedzie CSS do tworzenia elastycznych ukladow. Pozwala latwo centrowac elementy, rozkladac je rownomiernie i zmieniac kolejnosc wyswietlania. Jest idealny do nawigacji, kart, galerii i wielu innych komponentow.

/* Nawigacja z Flexbox */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #1e293b;
    color: white;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

nav a:hover {
    color: #60a5fa;
}

CSS Grid - siatka elementow

CSS Grid to system ukladow oparty na siatce, idealny do tworzenia wielokolumnowych ukladow. W przeciwienstwie do Flexboxa, ktory dziala w jednym wymiarze (wiersz lub kolumna), Grid pozwala kontrolowac uklad w dwoch wymiarach jednoczesnie. Jest szczegolnie przydatny do tworzenia siatek kart, galerii zdjec i zlozonych layoutow.

/* Siatka kart z CSS Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

Responsywnosc - Media Queries

Responsywnosc oznacza, ze strona wyglada dobrze na kazdym urzadzeniu - od telefonu po duzy monitor. Osiagamy ja za pomoca media queries, ktore pozwalaja definiowac rozne style dla roznych szerokosc ekranu. Wspomniany wczesniej podejscie mobile-first oznacza, ze domyslne style sa dla malych ekranow, a media queries dodaja style dla wiekszych.

/* Mobile First - domyslnie style mobilne */
.container {
    width: 100%;
    padding: 0 1rem;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}

/* Hamburger menu na mobile */
@media (max-width: 768px) {
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #1e293b;
        padding: 1rem;
    }
    nav ul.active {
        display: flex;
    }
}

Narzedzia wspolpracy - podstawy Git

Git to system kontroli wersji, ktory pozwala sledzic zmiany w kodzie, cofac sie do wczesniejszych wersji i wspolpracowac z innymi programistami. Jest to najwazniejsze narzedzie wspolpracy w swiecie IT. Nawet jesli w naszym projekcie szkolnym nie uzyjemy Git w pelni, warto poznac jego podstawy.

Glowne koncepcje Git: repozytorium (folder z kodem sledzonym przez Git), commit (zapisanie zmian), branch (galaz - niezalezna linia rozwoju), merge (polaczenie galezi). Na co dzien programisci uzywaja platformy GitHub do hostowania repozytoriow i wspolpracy.

# Podstawowe komendy Git:
git init                    # Utworzenie nowego repozytorium
git add .                   # Dodanie zmian do poczekalni
git commit -m "Opis zmian"  # Zapisanie zmian
git push                    # Wyslanie zmian na serwer
git pull                    # Pobranie zmian z serwera
git status                  # Sprawdzenie stanu repozytorium