Kezdjük a front-end részével. Őszintén megvallva nem vagyok designer, illetve a front-end fejlesztésben se vagyok profi, úgyhogy elég erősen sablonokra fogok hagyatkozni, de a cél, hogy legyen valami alap, amivel tudunk tesztelni, de nem áll nagyon messze a végső verziótól.

Sablonból személyre szabott honlap

A neten számtalan ingyenes honlap sablont lehet találni, ha rákeresünk, hogy 'free bootstrap template' vagy 'free html5 template'. Én rámentem az első találatra, ahol megtaláltam ezt a sablont. Ez egy modern, letisztult honlap, ami még színek szempontjából is passzol a SoundCloud narancssárgájához és néhány változtatással tökéletes is lesz.

A sablon, amit használni fogunk

Például cseréljük ki a hátteret, a szövegeket, illetve egy kicsit rendezzük át a különböző részeket.

A képekhez használjunk ingyenes stock fotókat - ha rákeresünk, hogy 'free stock photos', akkor egyből egy honlapot találunk, ami 15 másik honlap gyűjteménye. Az első a StockSnap.io, ahol számtalan kiváló fotó van, könnyen lehet keresni, és innen került ki végül az összes felhasznált kép is. A háttérkép mellett bekerült egy keresősáv az egyik szöveg helyére, amit majd az első szám kiválasztásához tudunk használni. Ezek után így néz ki a kezdőlap: 

Személyre szabott kezdőlap

A következő részt is könnyen átalakíthatjuk, mivel a sablon a Font Awesome ikonokat használja. A gyémánytot, papírrepülőt, újságot, meg a szívet simán lecserélhetjük zenével kapcsolatos dolgokra egy szó megváltoztatásával mindegyik résznél. Persze a rendelkezésre álló ikonok korlátolnak minket abban, hogy miket használhatunk, de a listáról könnyen helyettesíthetjük akármelyiket. Például a gyémánt helyett fülhallgatót használunk:

<i class="fa fa-4x fa-diamond wow bounceIn text-primary"></i>

<i class="fa fa-4x fa-headphones wow bounceIn text-primary"></i>

Ilyen volt:

Ilyen lett:

A portfólió részt is átalakítjuk, hogy egy kis ízelítőt szolgáltasson és majd a képekre kattintva a különböző műfajokból véletlenszerűen válasszon egy számot, amit elkezd lejátszani és első számként használ. Itt választottam 6 műfajt (akusztikus, klasszikus, country, elektronikus, jazz, rock) és próbáltam ezekhez kapcsolódó képeket keresni. Ezeket 650 pixel szélesre méreteztem át, majd egy 350 pixel magas részt kivágtam belőlük és mivel az eredeti képek is 650x350 pixelesek voltak, így nem kellett foglalkozni azzal, hogy bármit változtassak a honlap formázásán. A következő két kép megmutatja, hogy hogyan néz ki átalakítva a sablon az új képekkel és szövegekkel.

Hogyan lehet gyorsan haladni?

Hogyan tudjuk gyorsan kitalálni, hogy mit hogyan tudunk változtatni a honlapon? Kiváló eszköz erre a Google Chrome Developer Tools funkciója, amit a jövőben is sokat fogunk használni.

Ez az eszköz megmutatja, hogy a honlap különböző részeit a kódunk melyik szekciója befolyásolja, milyen formázás vonatkozik rájuk, illetve a JavaScript konzolt is megtekinthetjük, hogy kaptunk-e bármiféle hibaüzenetet. A kódot és a különböző tulajdonságokat szerkeszteni is tudjuk itt, így könnyen tesztelhetjük, hogy egy változtatásra hogyan reagálna a honlap. Nem mellesleg pedig ez a funkció bármilyen tetszőleges honlapnál elérhető, így ha látunk valamit, ami tetszik nekünk egy másik honlapon, akkor minden további nélkül megtekinthetjük a forráskódot, hogy megnézzük, hogy az hogyan is készült.

Developer Tools: a jobb oldalon kiválasztott részt automatikusan kiemeli a bal oldalon a Chrome

A keresősáv tulajdonságait pont a StockSnap.io keresősávjából vettem át ezzel a módszerrel, így a HTML kód változtatása után csak ennyit kellett beillesztenem a fő css fájlba, hogy kapjak egy szép átlátszó hátterű szövegbeviteli sávot:

header .header-content .header-content-inner input {
    background-color: rgba(255, 255, 255, 0.25);
    margin-bottom: 25px;
    border-color: rgba(0,0,0,0);
}

Mennyi időt vett ez igénybe?

A sablon megtalálása kb. 15 perc volt, a képekre nagyjából egy órát szántam, a szövegek átírása is egy óra lehetett, és más apróságokra is legalább egy óra elment. Összességében 3,5-4 óra alatt körülbelül készen is volt a honlap személyreszabása viszonylag kevés tudással arról, hogy hogyan is lehet egy honlapot felépíteni vagy hogy hogyan kell módosítani a formázást a CSS-ben. Természetesen per pillanat csak egy honlapunk van, nem pedig egy webalkalmazás, de amint megvannak az alapok, ez változni fog.

Ha te is szeretnél résztvenni a fejlesztésben vagy csak alaposabban szemügyre vennéd a kódot, akkor a GitHub repo és a forráskód itt érhető el. A kód már egy lépéssel előrébb jár: van benne egy SoundCloud zenelejátszó és működik a keresés funkció, amikről a következő részben lesz szó.

U.i.: Ha nem elég részletes vagy túl részletes a cikk, írjátok meg és változtatok rajta, illetve a többi részt is azalapján írom. Nem tudom, hogy ki milyen technikai háttérrel rendelkezik, úgyhogy jelenleg próbálok egy középutat tartani.