Jak stworzyć stronę w Responsive Web Design? (PSD to HTML)

Jak stworzyć stronę w Responsive Web Design? (PSD to HTML)


Okej, wybiła 16:00, mam nadzieję, że mnie słyszycie To będzie taka druga transmisja na Youtube w moim życiu, proszę o wyrozumiałość Dzisiaj jak powiedziałem, chciałbym zakodować stronę korzystając z zasad Responsive Web Design Otóż dostałem od graphic – designera taki oto projekt strony, zobaczcie że jest wersja na mobile i jest też wersja na desktop, czyli tak naprawdę na mniejszych urządzeniach powinna wyświetlać się ta wersja graficzna, natomiast na większych, wyższych – ta Zanim jednak przejdziemy do bezpośredniej implementacji tego projektu, chciałbym pokrótce omówić czym to Responsive Web Design jest, czym jest Mobile First itd. Posłuży mi do tego prosty przykład Otóż zobaczcie: mam tutaj prostą stronę, jest tutaj zdjęcie i jakiś opis do tego zdjęcia i to jest dosłownie wszystko co nas interesuje Zobaczcie – gdybyśmy pisali strony jak do tej pory, powiedzmy przenieśmy się o 5 lat czy więcej w przeszłość i spróbujmy napisać tutaj
background: red Zobaczcie że automatycznie tło całej strony zmieniło się na czerwone, natomiast gdybyśmy nie mieli tego co sobie tutaj przygotowałem wcześniej, to tło byłoby czerwone dla każdej rozdzielczości strony Zobaczcie to: przewijam, przewijam, przewijam, przewijam – dla każdej rozdzielczości tło jest czerwone, a jak dobrze wiemy – używamy różnych urządzeń, używamy komórek, tabletów, komputerów przenośnych do wyświetlania naszych stron, także jak zapewne już znacie ten koncept – nie wiem – z waszych stron, bądź ze stron które odwiedzacie, często strony różnią się jeśli chodzi o to co jest wyświetlane i w zależności od tego na którym urządzeniu uruchamiamy daną stronę Na komórkach zwykle mamy minimum treści, minimum jakichś wodotrysków, animacji, wszystko jest ułożone jedno pod drugim, natomiast na desktopie tego jest więcej – więcej boxów i więcej rzeczy ułożonych jest obok siebie itd. Na przykład taką ikoną jeśli o strony responsywne jest Smashing Magazine Znajdziecie tutaj różne artykuły, tutoriale, wideo itd. na temat front-endu, natomiast co jest ciekawe jeśli chodzi o tę stronę to to, ja ona się zmienia w zależności od szerokości wyświetlacza, zobaczcie że jeśli przesuwam sobie tę stronę, przesuwam sobie okienko i zmieniam jego szerokość na mniejszą, to wraz z przesuwaniem pewne rzeczy się ukrywają, pewne gdzieś tam się przesuwają aż … Zobaczcie że w tym momencie jestem już na takim widoku, który jest zapewne wyświetlany na telefonach, tutaj już tak naprawdę to menu został zastąpione takim guzikiem menu i dopiero kliknięcie tego guzika pokazuje nam nasze menu To jest w zasadzie koncept Responsive Web Design w pigułce, w dosłownie pokazanych kilku sekundach, otóż chodzi o to żeby na każdy z typów urządzeń dostarczyć stronę, która wygląda na takim urządzeniu dobrze Czyli gdybyśmy chcieli zaimplementować taką oto stronę na komórkach to nie miałoby to sensu, prawda? Jest tutaj za dużo informacji, natomiast jeśli zobaczymy wersję na komórki, to taka wersja designu jest o wiele lepsza niż to co pokazałem wcześniej, także na tym polega Responsive Web Design Zobaczcie to w akcji, jak zrobiono w ogóle, że dla takiej szerokości okna to wygląda tak, a dla takiej to wygląda tak Otóż użyto @media-queries i na czym to polega Zobaczcie że napisałem bardzo prosty selektor to oznacza, że okej – ustaw dla mojej strony tło czerwone, ale chciałbym aby czerwone tło było tylko dla stron wyświetlonych na urządzeniach mobilnych, natomiast na tych z większym wyświetlaczem niech będzie to kolor niebieski i zobaczcie, że ja napisałem coś takiego:
@media (min-width: 640px) To oznacza że jeśli okienko przeglądarki będzie szerokie na przynajmniej 640px, wtedy te wszystkie style – od tej klamry do tej – zostaną zaaplikowane i będziecie widzieć jej efekt Czyli jeśli teraz przesuwam sobie to okienko, zmieniam szerokość – i jest coraz większa – nagle BĘC, nasza strona ma tło niebieskie i to się dzieje dlatego, że jak na początku powiedziałem, zrobiłem takie media query i za każdym razem kiedy szerokość naszego wyświetlacza będzie wyższa niż 640px, te tutaj style zostaną zaaplikowane i będą ważniejsze o 1 stopień, czyli zobaczmy że – jak np. sobie tu zmienię na yellow – no to one będą najbardziej aktualne Przesuwam z powrotem, jestem na mniejszych wyświetlaczach – jest czerwony Dobrze też to widać jeżeli chodzi o ten obrazek i tekst do obrazka, otóż zobaczcie – uznajmy, że to jest widok naszej komórki – czyli jak jesteście pewnie przyzwyczajeni, wszystko jest ułożone jedno pod drugim Natomiast fajnie jest na desktopie jak ten tekst opływałby obrazek, to można zrobić dzięki takiemu selektorowi, czyli biorę z
.content: img i ustawiam
float: left – czyli opływaj z lewej, i zobaczcie że na desktopie nasza skromna strona wygląda w ten sposób, wygląda troszkę lepiej – wiemy, że jest to tylko przykład bez żadnego designu itd. – natomiast taka będzie jej wersja na większe rozdzielczości, jeśli pójdziemy w dół to znowu mamy wersję na urządzenia mobilne Czyli jak chciałem właśnie wyjaśnić jak to się dzieje, że te rzeczy na tej stronie się ukrywają, zmieniają swoje położenie, wielkość itd., to wszystko zostało właśnie zrobione przez media query Otóż w pewnym momencie powiedziano “Okej, jeśli szerokość będzie większa niż X to pokaż to menu tutaj, jeśli będzie niższa to te style zostaną zaaplikowane” Także wszystko opiera się na tym, żeby dobrze napisać te media queries i użyć do tego jak najmniej kodu, tak aby wszystko stopniowo się pokazywało bądź też ukrywało, no i dzisiaj postaram się coś takiego zrobić tutaj dla was i chciałbym zaimplementować oto ten przykład A to jest prosta scena na którą dostarczył mi grafik, zobaczcie: przesuwam, wszystko jest jedno pod drugim, jak otworzyłem projekt w Photoshopie najnowszym i to jest wersja z otwartym menu a z kolei to jest wersja z zamkniętym, czyli no dość prosta strona i jest też wersja na desktop, na desktop ta wersja wygląda w ten oto sposób, czyli dość podobnie menu zostało domyślnie odkryte, mamy logo, mamy tytuł tekstu, podtytuł, dane o autorze, no i sam tekst artykułu rozbity na dwie kolumny, z kolei tutaj mamy jakiś dodatek, treść poboczną, no i na końcu jest układ kolumnowy i przy okazji nagłówek, no i pierwsza najważniejsza rzecz – jak zaczynamy implementować taką stronę? Otóż mamy dwie wersje i często zachodzi pokusa żeby zacząć od tej desktopowej – wiadomo, pracujemy na desktopie, na laptopie z wielkim wyświetlaczem, natomiast jest taki koncept jak mobile first – generalnie o co w tym chodzi? W dużym uproszczeniu o to aby zaczynać implementację jakiejkolwiek strony z myślą o najmniejszych wyświetlaczach, na których będzie wyświetlana nasza strona internetowa Czyli w naszym wypadku musimy wziąć ten PSDek dla mobile i zacząć implementację naszej strony, w tym oczywiście pisząc CSSy od wersji na urządzenia mobilne, czyli tej tutaj wersji, potem zajmiemy się wersją desktopową, no i jak na początku to chciałem pokazać, pewnie dla wersji desktopowej użyjemy media query i powiemy tak “jeśli szerokość jest wyższa niż cośtam, no to przede wszystkim pokaż to menu, bo domyślnie to menu jest ukryte i zrób parę innych rzeczy jak np. podziel tekst na kolumny i np. tutaj zrób to menu horyzontalnie ułożone, a teraz zobaczcie że to menu z footera jest ułożone w ten sposób, każdy element jest pod sobą” No dobrze więc zajmiemy się wersją na urządzenia mobilne, ja sobie tu już wcześniej przygotowałem taki wstęp, żeby szybko zacząć Podzieliłem mój katalog (w którym będę kodował) na 3 foldery: “css” – tutaj będą wszystkie CSSy, w zasadzie jeden plik main.css, następnie “img” – tu będą wszystkie obrazki, ja trochę poszedłem na skróty i już sobie uszykowałem kilka, no i mamy jeszcze folder “js”, wiec tego jest tutaj w zasadzie 3 foldery, jeden plik także niewiele i zobaczcie że jak sobie włączę tę stronę to nie mamy nic – więc zaczynamy od zera, a jeszcze słowem wyjaśnienia co zrobiłem wcześniej, otóż oczywiście wstawiłem te najważniejsze rzeczy które nie mogą umknąć, czyli tag html, tag head, tytuł – tu jest w moim przypadku “JS.bin”, zmieńmy to może na “Artykuł” po prostu, mam też kodowanie oczywiście “utf-8” I jeszcze poszedłem na skróty w ten sposób, że zobaczcie taka linijka: To jest generalnie ładowanie fontu, otóż designer – w tym projekcie, jak zobaczycie sobie – on użył fonta Open Sans Regular i między innymi też Open Sans Light itd., więc ja postanowiłem tego fonta załadować z takiego dostępnego repozytorium fontów Google’a i powiedziałem “Okej, chcę Open Sansa w takich i takich wariantach, no i po prostu chcę go załadować i koniec kropka” W ten sposób nie muszę jakby dbać o to aby mieć takie pliki fontów na swoim serwerze, czy na swoim dysku – to wszystko zostanie załadowane z internetu – te wszystkie fonty będą dostępne Oczywiście też wkleiłem main.css żeby z niego korzystać, no i na końcu taka właściwość
meta name=”viewport”, czyli generalnie żebyśmy nie musieli zoomować na urządzeniach mobilnych naszej strony, żeby wszystko było 1:1 i to by było na tyle Więc od czego trzeba taki projekt zacząć?
Otóż od HTMLa, nigdy nie zaczynamy od CSSa czy JSa, zawsze zaczynamy od HTMLa i na czym nam zależy podczas pracy nad takim serwisem? Otóż zależy nam aby ten HTML był semantyczny, czyli przede wszystkim żeby używać tagów z głową i żeby używać tagów HTML zgodnie z ich przeznaczeniem, czyli np. jeśli ta cała sekcja to pewien nagłówek artykułu, no to nich to się mieści w headerze Jeśli np. takie menu jest zaprezentowane w ten sposób, no to wiadomo że to będzie lista linków itd. Czyli zanim sobie jeszcze pomyślimy co napiszemy, warto spojrzeć na stronę i podzielić ją na mniejsze części, na kawałki – popatrzeć i zobaczyć tak: okej, to co to jest? To jest logo strony, to to jest przycisk hamburger, otwieramy ukrytą warstwę i tu jest jeszcze menu, czyli jadąc od góry już wyróżniliśmy trzy elementy: logo, hamburger, który się zmienia (raz jest hamburgerem a raz krzyżykiem do zamknięcia), lista naszego menu, to też będzie element listy tylko trochę bardziej wyróżniony Teraz patrzymy – okej to jest tytuł czyli pewnie jakiś nagłówek któregośtam stopnia, to jest wstęp, artykuł tzw. lead, no to może być paragraf, znowu kolejna najmniejsza część tj. zdjęcie autora, nazwa autora, godzina kiedy to zostało opublikowane, no i całość jeśli byśmy teraz połączyli te najmniejsze rzeczy, które sobie tutaj wyróżniliśmy, no to te 3 elementy może zostałyby umieszczone w jakiś jeden wielki zbiorczy tag któryby oznaczał, że to są dane autora, bo to tak naprawdę zdjęcie, nazwa autora i kiedy zostało publikowane, może być to element związany z informacją o tym artykule, czy o autorze, także można myśleć aby je połączyć jeśli to oczywiście ma sens No i idąc tak dalej to wiadomo, mamy tutaj pierwszy paragraf artykułu, to będzie pewnie jakiś pojedynczy element w HTMLu – proszę mamy sekcję ze zdjęciem i jeszcze jakimś paragrafem do tego zdjęcia, ona jest tutaj oddzielona tutaj takimi oto przerywnikami i tutaj z kolei mamy kolejny header, kolejny nagłówek, kolejny paragraf, kolejny paragraf i ta sekcja która jest stopką – czyli całość będzie stopką, a poszczególne elementy stopki to lista z linkami z menu, no i jakieśtam logo firmy i copyright Czyli najpierw jak zwykle, zwyczajnie dzieli się stronę na takie pojedyncze elementy i w ten sposób jadąc od góry pisze się kod, czyli ja sobie patrzę na tę stronę i mówię “Okej, to jest header, to jest nagłówek całego artykułu, bo w nim się mieści tytuł, podtytuł, informacje o autorz i jest jeszcze jakieś takie zdjęcie wstępne, które też zdobi ten artykuł, więc można powiedzieć że to jest nagłówek artykułu” Przedtem jest jeszcze menu i logo – no i to jest pytanie – co jest pierwsze? Generalnie logo i menu, jeśli jedziemy od góry to to rzeczywiście to logo i menu są pierwsze w strukturze strony, czyli przechodzimy do edytora i piszemy, musimy zawrzeć jakoś te dwa elementy No i to też będzie nagłówek, tak jak ten element cały, tylko że te rzeczy tutaj są częścią nagłówka artykułu, a z kolei te dwie rzeczy tutaj są nagłówkiem dla całej strony, czyli tak naprawdę warto zacząć od całej strony a nie od pojedynczego artykułu najbardziej na zewnątrz, czyli piszemy header i header zamykamy Okej, to co zaznaczyłem to jest header, teraz ten header ma w sobie dwie rzeczy, przede wszystkim logo, które zapewne po kliknięciu przeniesie nas gdzieś, no i nawigację w taki sposób zaprezentowaną kiedy jest odkryta, czy też w taki sposób kiedy zamknięta No to zacznijmy od lewej tj. zaimplementujmy logo, no to jeśli jak powiedziałem to się da klikać to będzie link i np. uzupełnimy tytuł Generalnie utarło się że klikanie na tego typu loga itd. z lewego górnego rogu, wiąże się z tym że przenosi nas do strony głównej, no to może niech ten link ma taki tytuł i go zamykam I co jest w środku? No w środku jest jakiś obrazek, jak na razie zróbmy sobie po prostu placeholder img, wrócimy do tego później kiedy już przyjdzie nam implementować No i co jest dalej? Dalej jest ta nawigacja, tak? Dalej jest hamburger, a jak naciśniemy hamburger (nasz hamburger jest trochę taki niepełny) no to rozwinie się to menu Czyli generalnie to będzie nawigacja na naszej stronie, prawda? Te wszystkie elementy sprawiają, że możemy jakoś nawigować – klikamy “Pricing” – przeniesie nas do cennika, klikamy “About – przeniesie nas do sekcji “O nas” itd. To jest wszystko nawigacja i do nawigacji został stworzony specjalny tag tj. nav po prostu Co mamy w navie? W tej naszej całej nawigacji? Otóż nasza nawigacja składa się na ten tutaj przycisk oraz na menu, czyli tak naprawdę listę linków, po których możemy skakać, no to zaimplementujmy tę listę Na razie nie znamy linku, potem ja sobie nieco sprawę ułatwię, nie będę tego pisał, po prostu skopiuję Zobaczcie, stworzyłem tę listę, tak? Mamy “Features”, “Pricing”, “About” i “Sign up” Zobaczcie że nie pominąłem za każdym razem title, to jest ważne żeby wiedzieć w co się klika, żeby link miał opis i teraz odświeżam – pojawiło się coś – i teraz jak najadę np. na ten link, to zobaczę że pojawia się taki opis linku, dokładnie to co sobie tutaj zdefiniowałem Jeśi napiszę, nie wiem “bla bla” no to – jeszcze muszę zapisać i odświeżyć – no jest “bla bla”, ale nam chodzi o coś bardziej rozsądnego i pomocnego dla użytkownika I mamy taką listę linków ale odsyłam znowu do designu, otóż jest jeszcze ten button, który jest tym takim niepełnym hamburgerem – zróbmy go – zdefiniujmy też tutaj

34 comments

  • Świetne seminarium 😉 Szczególnie że nie ma wielu ludzi dbających o semantyke i poprawne pisanie stron internetowych, chętnie obejrzę więcej i więcej 😉

    Mam małe pytanie, czy zawsze zalecasz do stylowania używania tylko klas i nadawania większości znaczników unikalnych klas ?

  • Super sprawa ! 😀 dzięki stary:)

  • Dzięki za świetny tutorial. Dowiedziałem się paru nowych ciekawych rzeczy 🙂

    Mam jedno pytanie i małą prośbę:

    1. Jedno pytanie: Czy dodawanie tak dużej ilości klas jest powszechnie uważane za dobrą praktykę (szczególnie jeśli chodzi o elementy semantyczne tak oczywiste jak header, nav czy footer)?

    2. Mała prośba: Czy mógłbyś na repozytorium git wrzucić też psd projektu?

  • <main>, konkatencja klas to dla mnie nowość. Sprytne absolute… Wiem jak mało jeszcze wiem.
    Pytanie, gdzie można się podszkolić z JS i tego co obecnie oferuje? MDN, czy jest lepsze źródło? Jak w ogóle Damianie podejść do JS. Taki MSDN dla JS bym chciał mieć pod ręką.

  • Najlepszy kurs tworzenia stron od podstaw w Internetach. Nie boisz się że gdy będziesz tworzył tak dobry content, niedługo wyrośnie zbyt duża konkurencja?

  • Witam,
    Dostrzegam kilka zmian w repo które dodałeś na GitHubie a tutaj, w momencie tworzenia białego tła .page-header .nav-opened nie pojawia się zmiana koloru tła mimo tego, że robiłem dokładnie tak samo po kolei. W repo nie ma takich klasy chyba, że jest wzmianka z JS o page-opened :/

  • Paweł Koczanowski

    A w jaki sposób skonwertować takie logo na tekst, który potem można wkleić? Btw, cały tutek świetny, pomyśl o jakimś obszerniejszym kursie gdzie wytłumaczysz co się skąd bierze. Będą tysiące wyświetleń. Pozdrawiam.

  • świetny materiał! Mam pytanie, czy udostępniłeś gdzieś sam kod projektu? Mam na myśli głównie Html? Bardzo przydałby się do nauki poprawnej semantyki, troszkę ciężko sprawdza się to na yt 🙂

  • Chcę więcej!!!

  • Krzysztof Humeniuk

    Zaskoczyłeś mnie z poziomą linią w 1:46:00. Czy trzeba było kombinować z tym calciem? Nie łatwiej na cały artykuł dodać padding z lewej i prawej?

  • Wow świetny materiał, dopiero zaczynam swoją przygodę z html i css, a to naprawdę jest dawka praktycznej i konkretnej wiedzy. Mam nadzieję, że będziesz jeszcze wstawiał jakieś materiały 😉

    Pozdrawiam mix091

  • Ja mam takie pytanie czy dobrym sposobem nauki i ćwiczenia jest tworzenie stron wzorując się na już istniejących?

  • +Damian Wielgosik jak ma się sprawa wyszukiwarek do tego, że ukrywasz headingi?

  • takie pytanie czy ten pierwszy artykul to nie powinno byc zwykle section? 30:44

  • prędkość odtwarzania 1,25 jest do przełknięcia 🙂

  • 36:32 🙂 kupiłeś licencję na Sublime'a? 😉

  • W 1:13:54 linia 78 jest potrzebna? Musimy wypełniać ikonę hamburger na czarno jeśli ją ukrywamy w stanie nav-opened?
    Edit: Jakbys tak zrobil jak pisalem wyzej to by byl klopot w skrypcie javascriptowym? 1:24:56

  • cześć!

    W jaki sposób uzyskać svg path? Mam logo skonwertowane z bmp do svg. Niestety nie mogę zmieniać mu właściwości "fill' za pomocą css :/

  • Świetny materiał fajnie że poświęciłeś na to swój czas 🙂

  • Cześć,
    Podpowiedzcie gdzie można znaleźć proste projekty stron w PSD do poćwiczenia? Takie jak w tym filmiku? W sieci przeważnie dostępne są szablony dość mocno rozbudowane ze sliderami itp. Chodzi mi o coś łatwego na początek.

  • Z tego co wiem to sie nie stylizuje elementow semantycznych, ale moge sie mylic.

  • Baron_Trump#13

    jak zrobiles ze masz na zywo podglad swojej strony?

  • witam mozesz pokazac jak zrobils te elementyÄ(hamburger…) svg?Albo przynajmniej wskazac jakis inny podobny tutorial

  • fajny tut:D tylko odnosi sie wrażenie że wykładający niezbyt lubi to co robi:DD

  • jak ostylować zewnętrzny plik svg?

  • Świetny materiał, będę polecał dalej! 🙂

    Doszukałem się kilku pierdółek:
    * Button do otwierania menu dałbym przed <ul>.
    * W 1:09:40 mówisz dlaczego nie warto używać :last-child do ostylowania "sign up", po czym przeczysz swoim wnioskom usuwając szary border z "li" i ustawiając mu zielone obramowanie. Ja bym jednak zielone obramowanie dał do elementu "a", natomiast szary border usunął last-child'em.
    * 1:49:47 – nie lubisz stosować zapisu "padding: 82px 0;" ?
    * 2:26:00 – może lepiej byłoby używać outliner'a wbudowanego w walidator W3C? Dałbym też jedno <h1> na całą stronę (najlepiej logo).

    Pozdrawiam! 🙂

  • Dlaczego te devtoolsy dla urządzeń mobilnych są ciemne i mają miarki? To jakiś plugin do chrome?

  • Marcin Jaruszewski

    mam pytanie. Co z tego że strona zmienia swój wygląd powyżej 640 pikseli, skoro np. mój telefon ma już ekran o rozdzielczości 1440 px x 2540. Czy nie dałoby rady zrobić tego w ten sposób, zeby sprawdzać proporcje ekranu, a nie jego szerokość. Jak wtedy zapisać taki warunek?

  • Wyśpij się przed nastepnym nagrywaniem bo strasznie ciezko sie ogalada takie odcinki na zmulce jak co chwile gubisz watek

  • Szanuje!

  • Dziekuje! Swietny material, sub i kciuk w gore!

  • dla mnie bomba 😀

  • strona kodu.je nie działa

  • Wojciech Suchodolski

    jebane gówno te strony kurwa mać jebać to

Leave a Reply

Your email address will not be published. Required fields are marked *