Практическо ръководство за изучаване на разработка за преден край за начинаещи

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

Преди да започнете

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

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

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

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

  1. Учебна програма. Това може да бъде основният ви път. Това е добре структуриран преглед на нещата, които трябва да научите, и осигурява добра крива на обучение.
  2. Упражнения. Те са с размер на ухапване, така че лесно можете да поддържате темпото, като правите по няколко от тях всеки ден и поддържате зелената си топлинна карта.
  3. Проекти. След приключване на всяка глава ще изградите 5 проекта, за да получите сертификат. Идеално е да научите малко и да консолидирате знанията си.
  4. Общност. Това е нещо повече от платформа за обучение. Има форум, блог и канал в YouTube, където разработчици от различни нива споделят своите знания и където можете да намерите вдъхновение.
  5. Безплатно е. Парите могат да бъдат критични за много хора и тук, във всеки случай, няма да похарчите нищо, освен време.
Професионален съвет: можете да създадете акаунт в Twitter , ако все още нямате такъв, и да се ангажирате публично с100DaysOfCodeпредизвикателство. Причината е проста - има много хора, които правят това предизвикателство. Ще получите мотивация и подкрепа и това ще ви помогне да поддържате темпото. Горещо го препоръчвам, не се стеснявайте и се наслаждавайте на общността ?

Сега всички сме готови да започнем! ?

Отзивчив уеб дизайн

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

Основите

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

Можете да допълвате обучението си със страхотен наръчник за Interneting Is Hard.

След това ще научите мощни техники за оформление като CSS Flexbox и CSS Grid . Преди да продължите напред, попълнете това кратко ръководство, за да получите преглед на различните техники за оформление, които хората са използвали преди ерата на Flexbox-Grid. Малко вероятно е някога да се наложи да ги използвате, но винаги е добре да сте наясно и да оценявате технологиите, които имаме днес.

CSS Flexbox

Влюбих се във Flexbox поради неговата простота и мощ. Много различни свойства могат да ви объркат в началото, така че моето предложение е да поставите мамят в близост до компютъра си, за да можете винаги лесно да ги търсите. Освен това маркирайте този интерактивен мамят Flexbox.

И накрая, тренирайте, като играете пристрастяващата Flexbox Froggyигра. ?

CSS мрежа

Решетката е по-напреднала и гъвкава, но в повечето случаи Flexbox е напълно достатъчна. Както и да е, ще имате още един мощен инструмент във вашия арсенал. Особено, ако е толкова лесно да се разбере, когато отглеждате реколтата си в Grid Garden.?

Практика

Преди да преминете към окончателните проекти, препоръчвам ви да направите това:

  1. Създайте акаунт в Codepen . Това е страхотна площадка за предния край, където можете да изграждате проектите си, да тествате фрагменти и да тренирате.
  2. Инсталирайте aредактор на кодна вашата машина и се научете как да работите с нея.
  3. Научете основите на командния ред от това видеоот Уес Бос или работилницата на Shell за Udacity.
  4. Научете как да използвате Git в този плейлист от NetNinja.
  5. Вземете малко ръководена практика. Изберете проекти от този плейлист от Traversy Media и кодирайте заедно. Изграждайте ги, докато не се почувствате уверени. Би било чудесно, ако вече използвате редактор на код и контрол на версиите, и качите работата си в специално репо-проучване на Github.

Сега сте готови да получите първата си сертификация! ?

Отидете и изградете окончателните си проекти и ги споделете?

Javascript алгоритми и структури от данни

Сега знаете как да създавате статични уебсайтове и е време да научите JavaScript.

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

Още препоръки

  1. Курс по основи на JavaScript от Бо Карнес, ако предпочитате визуални ръководства.
  2. По отношение на новия стандарт за JavaScript, любимите ми са страхотните курсове ES6 за всички! (платено) от Wes Bos и Modern JavaScript от Beau Carnes.
  3. Курс на регулярни изрази за Скримба.
  4. Обектно-ориентираният курс на JavaScript от NetNinja ми беше много полезен.

Алгоритми

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

Като малка помощ ви съветвам да гледате Cardio Sessions от Traversy Media.

За повече практика горещо ви препоръчвам да се регистрирате в CodeWars и да поставите първоначална цел за постигане на 6kyu . Много е полезно, защото когато завършите някакво предизвикателство, можете да прегледате решенията на други хора и да откриете нови трикове, подходи и идеи.

За да намерите други претенденти за 100DaysOfCode, включително мен, отидете в настройките на акаунта си и въведете # 100DaysOfCode в полето Clan.

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

След като го победите, мога да кажа, че ...

... сега знаете как да работите с JavaScript! ?

Залепване на нещата

Сега е време да приемете предизвикателството за Javascript30 от Уес Бос. Това е най-добрият начин да научите как HTML, CSS и JavaScript работят заедно, да усъвършенствате вашите познания по основи и да разберете DOM. Изграждането на тези малки проекти беше страхотно изживяване и наистина забавно за мен!

Предни крайни библиотеки

От този момент вие се превръщате в истински разработчик отпред?

Bootstrap

Най-популярната CSS рамка. Създайте няколко уебсайта заедно с ръководства в YouTube. Свикнете с известното оформление на мрежата на колоните на Bootstrap.

jQuery

Въпреки че някои хора казват, че jQuery е мъртъв, винаги ще бъде полезно, когато решението в чист JavaScript е странно и използването на JS рамка е твърде много. Това ще бъде още един чудесен инструмент във вашия арсенал. Създайте няколко малки приложения с него за практика.

Sass

Не оцених напълно CSS рамките, докато не видях истинската им сила. Исках да науча усъвършенствани CSS техники и си купих невероятен Advanced CSS и Sassкурс (платен) от Jonas Schmedtmann. Силно препоръчително, ако искате да усъвършенствате CSS уменията си и да разберете работния процес. Все още се радвам, че го намерих.

React & Redux

Това е основната част от раздела „Библиотеки от предния край“. React е чудесен избор като първата ви библиотека на JavaScript, която трябва да научите.

Честно казано, трудно е да се разбере как да се работи с него във формата на freeCodeCamp, тъй като не можете да изградите нищо от нулата и някои неща работят под капака. Затова вземете курс по React и Redux и отделете време, за да разберете техните идеи и инструменти.

Моите лични фаворити:

  1. Пълен урок за реагиране (с Redux)от NetNinja
  2. Реагирайте за начинаещи (платено) от Уес Бос
  3. React - Пълното ръководство (платено) от Academind

Надявам се, че сте развълнувани да използвате новите си знания за окончателните проекти.

Сега можете да изградите всичко, което искате ?

Придвижване по-напред

Вече сте истински разработчик и имате достатъчно умения за изграждане на страхотни уеб приложения. Може би сте любопитни какво да правите по-нататък и отговорът е толкова прост, колкото „Изграждане, изграждане, изграждане!“ . Настоящата ви задача е да създадете портфолио за себе си и да получите повече практика.

Ето няколко съвета за вас какво да правите след това:

  1. Вземете идеи за проект вВземете домашни проектираздел на freeCodeCamp.
  2. Изградете всеки проект заедно с курс, след което го модифицирайте и подобрете, като добавите нови функции.
  3. Справете се с D3.js и Node.js, за да получите следващите сертификати за freeCodeCamp!
  4. Прочетете красноречив JavaScript иНе знаете JSза да станете нинджа на JavaScript.
  5. Подобрете ранга си в Codewars.
  6. Пробвайте усъвършенствания уеб дизайн от този уеб дизайн за уеб разработчициразбира се.
  7. Поддържайте профила си в GitHub активен и се опитайте да допринесете за отворен код.

Ако някой от тези ресурси не работи за вас, всичко е наред. Не се разочаровайте, това, което работи за някого, не е задължително да работи за всеки отделен човек.

Надявам се това ръководство да ви помогне с обучението и да се надяваме да ви спести време?

Късмет!