Jak ułatwić sobie życie, przy tworzeniu warstwy frontendowej aplikacji

Zaawansowane techniki modelarskie określane jako wheathering, pozwalają na uzyskanie modelu pojazdu, który wygląda niemal jak prawdziwy. Aby osiągnąć ten niesamowity efekt, trzeba jednak najpierw idealnie skleić model i prawidłowo go pomalować kilkoma warstwami farb. Efekty nakłada się na pojazd dopiero na sam koniec.
Podobną taktykę warto zastosować przy tworzeniu nowoczesnych stron WWW, jednak początkujący deweloperzy, przystępują do bardzo zaawansowanej stylizacji strony mimo tego, że „model nie został jeszcze sklejony”.

Jak zaprojektować atrakcyjną stronę, nie będąc grafikiem?

Definicja programisty front-end stała się obecnie tak szeroka, że w ofertach pracy zaczęto rozdzielać ją na coraz węższe kategorie. W niektórych firmach, poszukiwany jest programista JS, czyli osoba, która świetnie radzi sobie ze wszystkim, co związane z Javascriptem, wie, jak podłączyć się do bazy danych i wyciągać z niej dane i ogólnie, ma doświadczenie w programowaniu. Taką osobę można określić mianem bardziej technicznej, niż zwykły front-endowiec, zajmujący się głównie dłubaniem w CSS i HTML, którego można na potrzeby tego artykułu, nazwać po prostu front-end deweloperem. Jeszcze inne zadania w pracy ma designer czy grafik, który przygotowuje layout, „cięty” później przez front-end dewelopera.

Najpopularniejsze problemy z HTML i CSS vol 2 - border-box vs content-box

Jedno z najczęstszych pytań na rozmowie kwalifikacyjnej - czym się różni box-sizing: border-box od content-box.

Najłatwiej będzie pokazać to na przykładzie:

See the Pen box sizing by Kamil (@KamilNaja) on CodePen.

Div content-box ma nadany box-sizing: content-box i jest wyraźnie większy od swojego kolegi, który ma nadany box-sizing: border-box.
Pierwotnie, jedynym dostępnym ustawieniem był box-sizing: content-box, w którym na wysokość elementu wpływała:

• Jego wysokość w height +
• Jego border +
• Jego padding górny i dolny

Podobnie, na szerokość elementu wpływa jego szerokość + padding lewy i prawy + border.
Takie ustawienie jest też domyślne, jeśli nie używasz reset.css czy normalize.css i często prowadzi to do problemów z ustawieniem odpowiedniej wysokości i szerokości elementów. Rozwiązaniem tego problemu jest box-sizing: border-box, w którym na ustawioną szerokość i wysokość, nie mają wpływu ustawienia border lub padding.

Wyobraź sobie, że na przykład tworzysz design strony z dwoma kolumnami o szerokości 50% obok siebie. Jeśli nadasz im jakiś border lub padding, układ się zepsuje. Rozwiązaniem problemu jest nadanie elementom odpowiedniego box-sizing, czyli border-box.

See the Pen dwie kolumny - problem z border-box by Kamil (@KamilNaja) on CodePen.

Jak to wygląda w praktyce?

W praktyce, w większości przypadków, nadpisanie box-sizing: content-box jest jedną z pierwszych czynności, którą robimy przy tworzeniu strony. Można to zrobić za pomocą arkusza Normalize.css lub zadeklarować to w arkuszu CSS. Odpowiedni kod znajdziesz na stronie css-tricks. Jeśli tworzysz stronę na Bootstrapie, masz już ustawiony box-sizing na border-box.

Źródła:

https://css-tricks.com/box-sizing/

http://webroad.pl/html5-css3/525-box-sizing-powrot-do-przeszlosci