Landing page - zakodowanie strony HTML

Cel Projektu:

Stworzenie jednej podstrony (Landing Page, LP) w HTML na podstawie przesłanego projektu graficznego (.PSD). LP będzie efektywnie służyć dwóm grupom docelowym: B2B i konsumentom. Strona powinna umożliwić łatwe nawigowanie między dedykowanymi sekcjami dla każdej grupy przez przyciski i zakotwiczone linki.

Przykład:

Ktoś klika w Google w artykuł. Wchodzi na stronę i wyskakuje mu okienko - Jesteś konsumentem czy B2B? I teraz w zależności co kliknie LP będzie inny.

Krok 1: Struktura HTML

1. Podstrona LP: Utwórz jedną podstronę HTML, która będzie zawierać wszystkie niezbędne sekcje.

2. Sekcje Dedykowane: W dokumencie HTML, zdefiniuj dwie główne sekcje: <section id="B2B"> dla klientów biznesowych i <section id="Konsument"> dla konsumentów indywidualnych.

3. Szerokość strony 1260 px – zgodnie z projektem graficznym

Krok 2: Nawigacja i Przyciski wyboru odbiorcy

1. Przyciski wyboru odbiorcy: Dodaj na górze strony dwa przyciski: jeden z napisem "B2B", drugi "Konsument". Każdy przycisk powinien mieć przypisane funkcje przewijania do odpowiedniej sekcji:

Funkcja Przewijania: Implementuj funkcję, która przewija do danej sekcji:

Krok 3: Ukrywanie Treści

1. CSS na Początku: Na początku wszystkie sekcje powinny być wyrenderowane i widoczne – kwestie SEO.

2. Ukrywanie Treści: Po kliknięciu w przycisk, użyj JavaScript, aby ukryć nieodpowiednie sekcje, stosując klasę CSS, która ustawi display: none dla niechcianych sekcji.

Krok 4: Grafiki

1. Potnij grafiki z uzyskanego projektu w formacie .PSD

2. Grafiki umieść w dwóch folderach – B2C oraz B2B

3. LP zamieść na swoim serwerze

Krok 5: SEO, Linki Kanoniczne, przyciski wewnątrz LP

1. Optymalizacja SEO: Podstrona jest stworzona zgodnie z zasadami SEO.

2. Linki Kanoniczne: Brak możliwości ich używania.

3. Przyciski – w miejscach wymaganych linków (przyciski) użyj znacznika ‘#’

Krok 6: Mechanizm wyszukiwarki

1. Wyszukiwarka: Funkcjonalność wyszukiwarki znajdującej się w projekcie graficznym LP jest już przez nas zaprogramowana, kod udostępnimy.