От нула до фронт-герой (част 1)

Спомням си, когато за първи път започнах да уча фронтенд разработка. Срещнах толкова много статии и бях толкова поразен от това колко материал ще ми трябва, за да науча, че дори не знаех откъде да започна.

Това ръководство ще ви помогне да се ориентирате в обучението за разработка отпред. Той предоставя учебни ресурси, които в миналото намирах за ефективни, заедно с допълнителни обяснения.

За да запазя това ръководство смилаемо, аз го разделих на две части. Част първа се занимава с разработването на интерфейси с HTML и CSS. Част втора обхваща Javascript, рамки и дизайнерски модели. Ако сте запознати с HTML и CSS, можете да преминете към втора част, която обхваща всичко Javascript.

От нула до фронт-герой (част 2)

Пълно ръководство за изучаване на предния край развитие medium.com

Основи на HTML и CSS

При разработката отпред всичко започва с HTML и CSS. HTML и CSS контролират това, което виждате на уеб страница. HTML диктува съдържанието, докато CSS обработва стила и оформлението.

За да започнете, прочетете уроците по HTML и CSS от Mozilla Developer Network (MDN). MDN предоставя обяснения по глави на важни HTML и CSS концепции. В допълнение, всяка глава е само една страница, с интерактивни демонстрации, свързани към CodePen и JSFiddle.

След като завършите тези уроци, разгледайте курса Направете уебсайт от CodeAcademy. Този урок отнема само няколко часа и е добър пример за изграждане на уебсайтове с HTML и CSS. Ако искате повече, Изграждането на уеб формуляри е друг урок от CodeAcademy, който ви превежда през изграждането и стилизирането на уеб формуляр.

За тренировка с CSS изпробвайте CSS Diner. Това е забавна CSS игра с предизвикателства. Друг важен аспект на HTML и CSS са оформленията. LearnLayout е интерактивен урок, който ви показва как да създавате оформления с HTML и CSS.

Също така научете как да използвате Google Fonts с основите на API на Google Font от CSSTricks. Типографията е основен градивен елемент от интерфейси. Когато имате време, горещо ви препоръчвам да прочетете тази безплатна онлайн книга „Професионална уеб типография“ от Donny Truong. Той ви научава на всичко, което трябва да знаете за типографията като преден разработчик.

В тези ресурси не се притеснявайте твърде много за запаметяването на нещата. Вместо това се съсредоточете върху разбирането как HTML и CSS работят заедно.

Практикуване на основи на HTML и CSS

Сега, когато имате основни познания за HTML и CSS, нека се позабавляваме. В този раздел има два експеримента, предназначени да ви дадат практика за изграждане на уеб сайтове и интерфейси. Използвам термина „експерименти“, защото в експериментите научавате толкова много от своя неуспех, колкото от успеха си.

Експеримент 1

В първия ни експеримент ще използваме CodePen. CodePen е игрална площадка отпред, където можете да кодирате HTML и CSS, без да се налага да съхранявате файлове локално. Освен това има визуализации на живо, които се актуализират веднага щом запазите кода си.

Използвайки CodePen, вие убивате две птици с един камък. От една страна, вие практикувате HTML и CSS. От друга страна, вие създавате основно портфолио за напредък. Ще използваме и Dribbble, който е сайт, пълен с дизайнерско вдъхновение.

Отидете на Dribbble и намерете дизайн, който е достатъчно прост за кодиране за няколко часа. Избрах няколко дизайна, за да започнете: 1, 2, 3, 4 и 5. Избрах първоначално уеб дизайн за мобилни устройства, тъй като те са по-малко сложни от техните настолни компютри. Въпреки това, не се колебайте да изберете и дизайни за настолни компютри.

След като сте решили дизайн, продължете и опитайте да го кодирате в CodePen. Ако заседнеш, не забравяй, че StackOverflow ти е приятел. Друга полезна практика е да посещавате уебсайтове като Medium, AirBnB и Dropbox и да използвате инструмента за проверка, за да видите как те постигат различни оформления и стилове. Също така, разгледайте някои от химикалките на CodePen. Избрах няколко добри препоръки:

  • Меню App Interface
  • Джаджа за Twitter
  • Статия Новини карта
  • Просто плоско меню

Ако вашето копие изглежда различно от оригинала, не се обезсърчавайте. Продължавайте да практикувате с различни дизайни и всеки път ще забележите подобрение.

Ако нямате опит в дизайна, вероятно вашето дизайнерско око не е достатъчно развито. Преден разработчик с добро дизайнерско око ще може да идентифицира добрите проекти и да ги възпроизведе перфектно. Преди няколко седмици написах статия за това как да развиете вашето дизайнерско око.

Експеримент 2

Надяваме се, че първият експеримент ви е дал известна увереност при писането на HTML и CSS. За експеримент 2 ще разгледаме някои сайтове, след което ще кодираме няколко от техните компоненти.

Някои уебсайтове използват CSS рамки или замъгляват техните имена на класове CSS, което ви затруднява да прочетете техния изходен код. Ето защо избрах няколко добре проектирани уебсайта с лесен за четене изходен код.

  • Dropbox за бизнес: Опитайте да копирате секцията за героите им
  • AirBnB: Опитайте да копирате техния долен колонтитул
  • PayPal: Опитайте да копирате лентата за навигация
  • Наглед: Опитайте да копирате секцията за регистрация в долната част на страницата
  • Stripe: Опитайте да копирате раздела за плащания

За пореден път фокусът на експеримент 2 не е да пресъздаде цялата страница. Въпреки че това със сигурност няма да навреди! Изберете няколко ключови компонента като лента за навигация или раздел за герои, които да кодирате. Предоставих предложения до списъка с сайтове, но не се колебайте да изберете други компоненти.

Можете да кодирате този експеримент в CodePen или да го съхранявате локално. Ако решите да го съхранявате локално, можете или да изтеглите този примерен проект като образец, или да създадете файловете от нулата. Предлагам да използвате редактор като Atom или Sublime.

Освен това имайте предвид, че за всеки уебсайт винаги можете да видите неговия HTML и CSS. Просто щракнете с десния бутон върху страницата или компонент на страницата, щракнете върху проверка и ще се появи панел с HTML отляво и CSS отдясно. След като приключите или се забиете, използвайте инспектора, за да видите как се сравняват вашите HTML и CSS.

Най-добри практики за HTML и CSS

Досега това, което сте изучавали, са основите на HTML и CSS. Следващата стъпка е да научите най-добрите практики. Най-добрите практики са набор от неформални правила, които подобряват качеството на вашия код.

Семантична маркировка

Една от най-добрите практики за HTML и CSS е писането на семантична маркировка. Добрата уеб семантика означава използване на подходящи HTML тагове и значими имена на класове CSS, за да се предаде структурно значение.

Например, етикетът h1 ни казва, че текстът, който обгръща, е важно заглавие. Друг пример би бил етикетът на долния колонтитул , който ни казва, че елементът принадлежи в долната част на страницата. За по-нататъшно четене прочетете „Поглед към правилната семантика на HTML5 и какво прави името на семантичния клас“ от CSSTricks.

Конвенции за имена на CSS

Следващата важна най-добра практика за CSS са правилните конвенции за именуване. Добрите конвенции за именуване, като семантична маркировка, предават значение и помагат да направим нашия код предсказуем, четим и поддържаем. Можете да прочетете за различните конвенции за именуване в статията OOCSS, ACSS, BEM, SMACSS: какви са те? Какво трябва да използвам?

Като цяло предлагам да изпробвате прости конвенции за именуване, които имат интуитивен смисъл за вас. С времето ще откриете такива, които работят най-добре за вас. За да видите как компании като Medium използват конвенции за именуване като BEM, прочетете CSS на Medium всъщност е доста добре. В тази статия ще научите също, че изготвянето на ефективен набор от CSS конвенции е итеративен процес.

Нулиране на CSS

Браузърите имат малки несъответствия в стила от полета до височини на линиите. Поради тази причина винаги нулирайте CSS. MeyerWeb е популярно нулиране. Ако искате да копаете по-дълбоко, можете да прочетете Създайте свой собствен прост Reset.css файл.

Поддръжка на различни браузъри

Поддръжката на различни браузъри означава, че вашият код поддържа повечето актуални браузъри. Някои CSS свойства като преход се нуждаят от префикси на доставчици, за да работят правилно в различни браузъри. Можете да прочетете повече за префиксите на доставчици в тази статия, Префикси на доставчици на CSS. Основното отнемане е, че трябва да тествате уебсайта си в множество браузъри, включително Chrome, Firefox и Safari.

CSS препроцесори и постпроцесори

От въвеждането на CSS през 90-те години, CSS измина дълъг път. Тъй като потребителските интерфейси стават все по-сложни, хората измислят инструменти, известни като препроцесори и постпроцесори за управление на сложността.

Препроцесорите на CSS са разширения на езика на CSS, които добавят звънци и свирки като променливи, комбинации и наследяване. Двата основни CSS препроцесора са Sass и Less. През 2016 г. Sass обикновено се използва по-широко. Bootstrap, популярната отзивчива CSS рамка, също преминава от Less към Sass. Също така, когато повечето хора говорят за Sass, те всъщност говорят за SCSS.

CSS постпроцесорите прилагат промени в CSS, след като той е написан на ръка или е компилиран от препроцесор. Например, някои постпроцесори като PostCSS имат приставки, които добавят автоматично префиксите на доставчика на браузъра.

Когато за първи път откриете CSS препроцесори и постпроцесори, е изкушаващо да ги използвате навсякъде. Започнете обаче просто и добавете разширения като променливи и комбинации само когато е необходимо. Статията, която предложих по-рано, CSS на Medium всъщност е доста добра, също обхваща колко е твърде много, когато става въпрос за препроцесори.

Мрежови системи и отзивчивост

Мрежовите системи са CSS структури, които ви позволяват да подреждате елементи хоризонтално и вертикално.

Мрежовите рамки като Bootstrap, Skeleton и Foundation предоставят таблици със стилове, които управляват редове и колони в оформления. Въпреки че мрежовите рамки са полезни, важно е също така да се разбере как работят мрежите. Разбирането на CSS Grid Systems и Don't Overthink Grids са страхотни прегледи.

Една от основните цели на мрежовите системи е да добавят отзивчивост към вашия уебсайт. Отзивчивостта означава, че вашият уебсайт се преоразмерява въз основа на ширината на прозореца. Много пъти се постига отзивчивост чрез използване на CSS медийни заявки, CSS правила, които се прилагат само за определени ширини на екрана.

Можете да прочетете повече за медийни заявки в Intro to Media Queries. Освен това, тъй като навлязохме в мобилна ера, вижте Въведение в мобилните заявки за първи път.

Практикуване на най-добрите практики в HTML и CSS

Сега, когато сте въоръжени с най-добрите практики, нека да ги тестваме в битка. Целта на тези следващи два експеримента е да практикуват писането на чист код и да наблюдават дългосрочния ефект на най-добрите практики върху четливостта и поддръжката.

Експеримент 3

За експеримент 3 изберете един от предишните си експерименти и рефакторирайте кода си, като използвате някои от най-добрите практики, които сте научили. Рефакторингът означава редактиране на вашия код, така че да е по-лесен за четене и по-малко сложен.

Да можеш ефективно да рефакторираш кода е важно умение на разработчика от предния край. Създаването на качествен код е итеративен процес. CSS архитектури: Рефакторинг Вашият CSS е добра отправна точка за рефакторинг на вашия код.

Ето няколко неща, които трябва да си зададете, когато рефакторирате кода си.

  • Двусмислени ли са имената на вашите класове? След 6 месеца все още ли ще разбирате какво означава името на вашия клас?
  • Семантичен ли е вашият HTML и CSS? Когато поглеждате кода си, можете ли бързо да различите структурно и релационно значение?
  • Използвате ли повторно един и същ шестнадесетичен цветен код отново и отново във вашия код? Би ли имало повече смисъл да го рефакторираме в променлива на Sass?
  • Кодът ви работи ли също толкова добре в Safari, колкото в Chrome?
  • Бихте ли могли да замените част от кода на оформлението си с мрежова система като Skeleton?
  • Често ли използвате ! Важния флаг? Как можеш да поправиш това?

Експеримент 4

Последният експеримент използва това, което сте научили за най-добрите практики. Ефектите от най-добрите практики обаче често не стават очевидни, докато не ги приложите към по-голям проект.

За последния експеримент си създайте уебсайт с портфолио. Като преден край, вашият портфолио сайт е един от най-важните ви цифрови активи. Портфолиото е сайт, който представя вашата работа. По-важното е, че това е текущ запис, който ви помага да проследите своя напредък и развитие. Така че, дори ако имате само 1 или 2 неща за показване, поставете го.

За да започнете, следвайте статията на Adham Dannaway, My (Simple) Workflow To Design and Develop a Portfolio Website

Ако първата ви итерация на портфолио не е перфектна, това е добре . Портфолиото преминава през много повторения. И, какво е важно, че сте го изградили със собствените си умения.

Останете в течение

Въпреки че HTML и CSS скоро няма да излязат от модата, важно е да сте в крак с пейзажа на предния край.

По-долу е даден списък с уебсайтове, блогове и форуми, които са едновременно приятни за четене и информативни.

  • CSSTricks
  • Smashing Magazine
  • Дизайнерски новини
  • Nettuts +
  • Съветник за CSS

Научете чрез пример

И накрая, най-добрият начин за учене е чрез пример. Ето набор от стилови ръководства и конвенции за кодове, които ще ви научат как да бъдете по-ефективни отпред.

Стилови ръководства

Уеб ръководствата за стил са колекции от CSS компоненти и модели, които могат да бъдат използвани повторно в уебсайт. Ключовото нещо, което трябва да се отбележи от тези ръководства за стилове, е как базирани на компоненти HTML и CSS подходи ви позволяват да използвате повторно кода, за да запазите кода си СУХ.

  • Mapbox
  • Самотна планета
  • SalesForce
  • MailChimp

Конвенционни кодекси

Съглашения за кодове, предназначени да направят кода ви четлив и поддържаем. Някои от тези връзки като CSS Guidelines са насоки за писане на по-добри HTML и CSS, докато други връзки като Github вътрешен CSS инструментариум и насоки са примери за качествен код.

  • Указания за CSS
  • Вътрешен набор от инструменти за CSS на Github и насоки
  • CSB Styleguide на AirBnB

Увийте

Надяваме се, че в края на тази статия сте запознати с HTML и CSS и имате няколко проекта под колана си. Най-добрият начин да се научите отпред е чрез изграждане на проекти и експерименти. Не забравяйте, че всеки фронт разработчик трябва да започне някъде. И е по-добре да започнете днес, отколкото утре.

Тази статия е първата от поредицата от две части. Втората статия обхваща добавянето на интерактивност с Javascript и Javascript библиотеки / рамки. Освен това, ако искате да разясня нещо или имате някакви въпроси, не се колебайте да ми оставите бележка или туит.

От нула до фронт-герой (част 2)

Пълно ръководство за изучаване на предния край развитие medium.com

PS Ако харесате тази статия, би означавало много, ако натиснете бутона за препоръчване или споделите с приятели.

Ако искате повече, можете да ме следвате в Twitter, където публикувам нечувствителни размишления за дизайн, разработка отпред, ботове и машинно обучение.