Podstawy responsywnej strony www.

Witam.
Uczę się na własną rękę HTML'a, CSS'a i zaczynam JS, ale idzie mi z tym słabo.
Rzecz w tym, że próbuję stworzyć responsywną stronę, z: logiem, menu, treścią, stopką. Proste.
Tylko, że to wszystko ma być responsywne. Mam pewne pojęcie o media queries, ale chodzi mi bardziej o to, żeby ktoś mnie naprowadził na to wszystko. Czytam dużo, próbuję, ale cały czas jest to takie bezsensowne, mało mnie uczące.
Potrzebuję linków do sprawdzonych treści, gdzie mogę wyczytać wiele ŚWIEŻYCH informacji - czyli HTML5, CSS3, a nie przestarzałe kursy :(
Bo niby czytam, robię, ale nie ma tam odpowiedzi na pytania, które mnie nurtują..
np. w jakich jednostkach tworzyć najlepiej RWD? Bo jedni piszą procenty, znajomy mówi, że pixele, kto inny że nowe jednostki typu em. Gdzie mogę o tym wszystkim poczytać?
Nie chce nic gotowego na tacy, tylko naprowadzenia.. bo nauka na własną rękę, jak się okazuje, nie jest taka łatwa. Tym bardziej przy tylu "pseudo dobrych" poradnikach/kursach.

Czyli prosiłbym o jakieś hasła, linki do sprawdzonych treści, parę słów o responsywnych stronach, lepsze są media queries czy może pisanie na %? A może całkiem inaczej? A co z pikselami? Menu w jakich jednostkach? ;/

Z góry dziękuję wszystkim za komentarze!

https://kursbootstrap.pl/

max miesiąc i masz ogarnięty temat

Odnośnie jednostek - pisz tak jak Ci wygodnie, ale zawsze (w obrębie jednego projektu) tak samo! Procenty nie sprawdzą się jeżeli chcesz mieć kilka wyraźnych "skoków" (breakpointów), gdzie po prostu np. w szerokościach 600-800 główny content ma 580px na sztywno i jest centrowany, potem np. przy 800-1000 ma 780px itd.

Bootstrap jest ok, ale nie nauczy Cię o co w tym w ogóle chodzi.

Lepiej, żebyś popróbował i porobił błędy, bo tak się najłatwiej nauczysz.

Najlepiej zadawaj konkretne pytania na forum - pomożemy. Przy okazji - ogarnij narzędzia typu jsbin.com - ułatwiają pokazywanie problemu.

Dodatkowo też znajdź sobie responsywny szablon i spróbuj go samemu złożyć. Jeżeli nie masz konkretnego celu, to będziesz pisał bezcelowy kod, z którego niewiele wyniesiesz.

@czysteskarpetik myślę, że za bootstrapa nie chcę się brać, za żadnego FW póki co, dopóki nie nauczę się dobrze HTMLa i CSSa, żeby nie było, że nie bedę wiedział potem w czym tkwi błąd w jakimś projekcie. Swoją drogą już probowałem z Materialize Design.

Może Ci pomóc też ten kurs: https://www.udemy.com/learn-responsive-web-development-from-scratch/learn/v4/overview. Moim zdaniem w miare przystępny materiał, jeżeli uczysz się HTMLa i CSSa. Znajomość JavaScript nie jest potrzebna w tym przypadku. :)

@CyberMeduza, dzięki, z pewnością sprawdzę ;)
I chyba póki co lepiej bez FW próbować, bo co jak za jakiś czas upadnie taki bootstrap - a nawet, ciężko będzie mi ogarnąć go, z małej wiedzy jaką posiadam - wtedy nawet nie będe wiedział co do czego służy.
No nic to pora dalej uczyć się..

Trzeba zaczynać od prostych stronek takich jak http://gruz-kontener.krakow.pl , rozbudowując je i zarazem swoją wiedzę na ten temat, żeby w przyszłości zrobić coś na miarę i być szczęśliwym spełnionym człowiekiem.

666piter napisał(a):

I chyba póki co lepiej bez FW próbować, bo co jak za jakiś czas upadnie taki bootstrap

jak upadnie to pewnie są i wyrosną nowe pokrewne frameworki przy których sobie poradzisz, ponadto zostaje ci wiedza, bo i tak uczysz się html, czy styli, czy js, czy PHP, bo zawsze dodajesz jakieś funkcjonalności typu menu, formularz kontaktowy czy panel logowania, subskrypcji itp.

@666piter Frameworki generalnie ułatwiają programowanie, dlatego warto przyswoić tą wiedzę, chociaż jeżeli nie opanowałeś jeszcze HTML&CSS to faktycznie na razie się tym nie zajmuj.

Pamiętaj też, że nie wszystko na raz. Jeżeli nie opanowałeś jeszcze HTML&CSS to nie bierz się za JS. Naucz się porządnie jednego, a nauka z innymi językami często dzięki temu idzie już o wiele łatwiej. Lepiej nauczyć się porządnie czegoś, niż wszystkiego po trochu.

I tak jak wspomniał @dzek69 rób swój projekt, bo najszybciej nauczysz się na własnych błędach. Szukaj odpowiedzi na forach odnośnie problemów, które się pojawią w trakcie projektu. Jakikolwiek napotkasz problem wiedz, że już ktoś też się z nim wcześniej spotkał i większość odpowiedzi znajdziesz w necie. :p

Dobra, mam mały projekt strony firmowej, którą będę chciał zrobić, responsywną, z galerią, paroma podstronami. To pora brać się za naukę i korzystanie z tego kursu CyberMeduzy, bo na pewno się przyda.

bootstrap + pingendo( http://pingendo.com/ ) + jakiś sensowny edytor dla HTML/JS/CSS

generalnie pisałem bootstrapa z palca do momentu jak nie poznałem pingendo. W tym momencie jak mam coś RWD to zawsze zaczynam od pracy z pingendo, a później przechodzę do edytora. Po 1-2 godzinach można mieć praktycznie pełną, fajną stronkę w RWD.
Pingendo naprawdę jest spoko, można sporo czasu zaoszczędzić na początku.

natomiast z RWD są jeszcze te pliki graficzne *.svg. Jest to grafika wektorowa, która nie traci na wartości po zmniejszaniu/powiększaniu.
Widziałem kilka projektów w których intensywnie się z tego korzystało. Według mnie można spróbować się tym pobawić - może akurat komuś podejdzie?

A co sądzicie o:
http://materializecss.com/
? Bootstrap górą nad wszystkim można powiedzieć?

NieGooglujMnie napisał(a):

bootstrap + pingendo( http://pingendo.com/ ) + jakiś sensowny edytor dla HTML/JS/CSS

generalnie pisałem bootstrapa z palca do momentu jak nie poznałem pingendo

tylko zobacz jaki kod tworzy pingendo, owszem robisz coś na szybko dla janusza to ok, ale w portfolio bym tego nie chciał ;)
zresztą zrobienie tych kilku divów w gridzie co to za problem, albo użyć bootstrapowego customa

@666piter możesz próbować co chcesz, bootstrap jest trochę lepszy dla początkującego, bo ma solidne wsparcie w sieci (tutki+tematy na forach)

czysteskarpety napisał(a):

(...)
tylko zobacz jaki kod tworzy pingendo,

1. zawsze można poprawić

2. z mojego doświadczenia wynika, że w ogóle cały bootstrap, CSS, czy tam HTML to może 20% trudności przy front-end.
   Pozostałe 80% należy do JavaScript.
   Pingendo nie wnika w JS, ale to 20% ci szybko wygeneruje.

3. w portfolio - zależy na jakie stanowisko, jak na juniora to spoko. Jak na seniora, to może rzeczywiście za słabe ;)

4. dla takich osób jak ja - które nie rozwijają się przy front-end, ale chciałyby coś umieć - to całkiem fajne rozwiązanie ;p

I https://kursbootstrap.pl/ przeleciałem, zwracając głównie uwagę na to, co wiem że mi się przyda ;) Teraz tylko trening praktyczny z dokumentacją i nic jak zyczyć sobie powodzenia! :)

2. z mojego doświadczenia wynika, że w ogóle cały bootstrap, CSS, czy tam HTML to może 20% trudności przy front-end.

To jest subiektywne, ale moim zdaniem:

• najłatwiejszy jest HTML.
• Potem JavaScript, który jest... na początku trudny jeśli się nie zna, potem łatwy jeśli się zna podstawy.
• Jednak najtrudniejszym był, jest i będzie CSS XD Ileś lat pracuję z CSSem, a dalej go nie ogarniam.

To jedno, dotyczące tego, co jest "najłatwiejsze". Drugie, czy zawsze chodzi o łatwość? Czasem chodzi o zaoszczędzenie czasu. Taki Emmet przecież nie powstał dlatego, że HTML jest trudny, tylko dlatego, żeby zaoszczędzić czas potrzebny na stworzenie tych elementów (jednak ja rzadko używam Emmeta, bo większość mojej pracy przy HTML to modyfikacja istniejącego kodu, a tutaj chyba Emmet się w ogóle nie przydaje - no chyba, że nie umiem jego używać)

Jeśli chodzi o zagraniczne źródła, to najlepszą i najbardziej aktualną wydaje się książka: Responsive Web Design