#programista15k #stronaodfrontu #www

Cześć.
Potrzebuje zrobić pojedynczą stronę na której będzie tylko jeden obrazek. Chcę natomiast by był on responsywny i dopasowywał się do urządzenia na którym jest wyświetlany.
Jak to zrobić? Obrazek musi być w jakimś określonym formacie?
Dziękuję po podpowiedzi.
@Evurak: Zależy jaki to obrazek, jak zdjęcie to bym sobie wrzucił kilka rozmiarów i wybierał do wyświetlenia odpowiedni w zależności od tego jaka jest rozdzielczość ekranu.
  • Odpowiedz
@Evurak: tak, możesz też bezpośrednio

<img src="costam.jpeg.jpg" alt="obrazek" style="max-width: 100%; height: auto;">

max-width: 100% znaczy że obrazek nigdy nie będzie szerszy niż ekran, ale może być węższy jeśli ekran jest po prostu od niego szerszy
height: auto znaczy, że wysokość obrazka będzie zawsze proporcjonalna do jego szerokości

Rozwiązanie @BreathDeath to druga opcja którą opisałem, ale jak o podstawy pytasz to jest raczej na Ciebie zbyt skomplikowana ;) Robiąc dziesiątki stron rocznie
  • Odpowiedz
Czołem ponownie mirki.

Po ukończeniu szkoły wracam do nauki #frontend, żeby za 3-4 miesiące spróbować starać się o jakąś pracę w tej dziedzinie( ͡° ͜ʖ ͡°).

Pierwszym krokiem jakim sobie założyłem to uporządkowanie mojej wiedzy nt. HTML5, CSS3 i RWD oraz dbać o semantykę kodu i jego czytelność, oraz stosując się do dziwnych konwencji Mobile first i Progressive enhancementt(proszę mnie nie odpytywać z tego, dopiero się uczę(
porobiłem ukryte headingi żeby nie było untitled section, ale czy to może tak być?


@Filem00n: to bardzo zła praktyka, i o ile ukrywanie innych elementów tekstowych być może nie zaszkodzi (a może nawet pomóc, jeśli to tekst widoczny np. tylko dla czytników tekstu), o tyle chowanie headingów prędzej czy później sprowadzi na Ciebie gniew google.
====================================================================================================================================================================================================================================================================================================================================
  • Odpowiedz
Hej mireczki! Ostatnio miałem trochę więcej czasu, więc wpadłem na pomysł zrobienia swojej wersji wykopu ze zintegrowanym mirkoczatem ( ͡° ͜ʖ ͡°). Dajcie znać jak wam się podoba i czy macie jakieś pomysły na usprawnienia. Pełna jakość: https://upload.vstanced.com/image/XJL


#webdesign #webdev #grafikakomputerowa #wykop #nowywykop2016 #grafika #mirkoczat #pytanie #kiciochpyta #stronaodfrontu
V.....z - Hej mireczki! Ostatnio miałem trochę więcej czasu, więc wpadłem na pomysł z...

źródło: comment_SMjkQPP1b4RsWWVTF8VCGgbRzR1y2vUD.jpg

Pobierz
Zakodowałem, choć jeszcze jest nieskończona(trochę drobnych niedoróbek).
W takich projektach treningowych najgorsze jest to, że ciężko mi je skończyć, zwłaszcza ostatnie szlify jak podpinanie pluginów, animacji, poprawianie walidacji itp.

Najchętniej ten plugin do przewijania strony to bym sam napisał(i tak chyba niedługo zrobię).
W takich większych projektach mam problem z dobrym uporządkowaniem struktur w css(btw pierwszy raz pisałem w sass), w html jeszcze jako tako to wygląda.

trzymajcie mirki linka do dropboxa
Drogie mirki! Po przemyśleniach i pytaniach pragnę uruchomić nowy tag ( ͡° ͜ʖ ͡°) #stronaodfrontu

Jakie są zamiary? Miejsce dla mirków, którzy tworzą/projektują/kodują strony(czyli Graficy/Front End Developerzy), gdzie będą mogli zamieścić swoją pracę i oczekiwać na krytykę(miejmy nadzieję konstruktywną) ogółu, dzięki czemu staną się lepsi w swoim fachu ( ͡° ͜ʖ ͡°)

Zacznę pierwszy.. ostatnio gnębię temat stron z portfolio/resume i na razie zaprojektowałem
  • 3
@Filem00n: jakoś mi ikonki od umiejętności i hobby nie pasują, a navbar równo w siatce jest? bo chyba nazwa zbyt do lewej ucieka. Ale ogółem mi się podoba.
  • Odpowiedz