Jak tworzyć strony responsywne

RWDW moich wcześniejszych wpisach spotkaliście się ze słowem “responsywne” bądź “RWD” co oznacza po angielsku Responsive Web Design. Czyli po polsku – strona elastyczna, która dostosowuje się pod różne rozdzielczości i urządzenia mobilne jak smartfon, tablet.

Chcę tutaj pokazać tak w krótkiej instrukcji, jak za pomocą kilku linijek kodów wykonać taką stronę.

Responsywna mapa google na stronę

Dziś wstawimy mapę google na stronę, do tego responsywną, będzie skalowała się pod wszelkie rozdzielczości.

Taka mapka przydaje się gdy chcemy klientom pokazać gdzie znajduje się siedziba naszej firmy, sklepu, by mogli szybko znaleźć i dojechać. Można ją powiększać, pomniejszać, przesuwać. Wstawimy na całą szerokość strony.

Responsywna tabelka w html/css

table2Pokażę jak za pomocą css ładnie ostylować tabelę, by była ona responsywna i ładna
Tabeli używamy dość często, a to by zrobić spis produktów, by napisać cennik usług, czy menu w restauracji. Zwyczajna, surowa, nie ostylowana tabela jest po prostu nie ładna. Dlatego przygotowałam tutorial z kodem, który ucieszy oko

Slider zdjęć w jQuery

Przez upały nic nie idzie robić, dopiero wieczorem jest ciut chłodniej by zabrać się za pisanie, a i mecze sporo czasu zajmują Nasi awansowali dalej, a mecz do najkrótszych nie należał, przysporzył nam sporo nerwów, ale wywalczyli i wielkie brawa!

Zaczynamy. Wykonam tutorial pt. jak wykonać animowany slider zmieniających się zdjęć.

Responsywne menu rozwijane

menu1

Przedstawię Wam jak wykonać za pomocą html, css i jQuery, bardzo ciekawe menu poziomowe/rozwijane. Menu jest również responsywne, ładnie działa w telefonach, tabletach.
Jest to moje podrasowane menu, które używam w wielu stronach, przetestowane i gotowe do działania.

Programy do zrzutów ekranu

shuSzukając dobrego programu do zrzutów ekranu, który od razu wysyła zrzut na serwer, postanowiłam podzielić się z Wami.

Od wielu miesięcy używam świetnego programu ScreenSHU – program ten posiada dużo ciekawych opcji, najważniejszym dla mnie jest właśnie upload obrazków na serwer. Osobiście wykonuję dużo zrzutów ekranu, czy to pokazać coś klientowi, czy znajomym, czy to wytłumaczyć jakieś opcje w programie, albo właśnie do tego bloga, kiedy robię tutoriala.