Веб-разработка в настоящее время является наиболее востребованной категорией разработки среди них. Javascript занимает первое место в чартах самых востребованных языков на рынке в 2022 году, что подтверждает тенденцию последних нескольких лет. Я начал свой путь в веб-разработке в последний год старшей школы (2017) с желанием построить на этом бизнес, и теперь, когда это моя работа на полную ставку, я хочу запечатлеть, что бы я сделал, если бы мог начать все снова.
HTML
HTML — это язык разметки, понятный браузеру, который преобразует формальный набор тегов, которые вы пишете в исходном файле, в визуальную веб-страницу. HTML на самом деле является визуальным строительным блоком Интернета, каждая веб-страница содержит HTML, и вы всегда можете получить его несколькими щелчками мыши!
Вот с чего я бы начал, я бы создал папку на своем компьютере с именем HTML и создал внутри нее несколько подпапок, каждая из которых содержала бы набор HTML-файлов, предназначенных для визуального представления небольшого примера веб-сайта без какого-либо стиля. тренировочное упражнение. Я нажимал все больше и больше, пока с помощью визуального примера заголовка, подзаголовка, абзаца, изображения и нескольких разделов я не смог добиться этого только с помощью HTML.
HTML имеет много тегов, и важно охватить большинство из них, вы обнаружите, что можете использовать div повсюду, но это плохо для читабельности кода, семантики и, в конечном счете, для SEO.
Если вам нужно руководство по HTML, я бы предложил Youtube в качестве видеоресурса и W3School в качестве текстового ресурса. Что касается Youtube, мне особенно нравится канал Traversy Media, я многому научился на этом канале, поэтому мне хочется его порекомендовать! Вот видео для начинающих в HTML: https://www.youtube.com/watch?v=UB1O30fR-EE&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=1
CSS
Теперь, если вы посмотрите на наши HTML-страницы, мы увидим, что они не очень красивы, не так ли? На самом деле существует термин для описания того, что мы хотим здесь исправить, и он называется UI (пользовательский интерфейс). Когда речь идет о веб-проектах, этот термин представляет собой эстетику веб-страницы.
CSS — это язык, используемый для определения внешнего вида веб-сайта с точки зрения цветов, интервалов, размеров, шрифтов и многого другого. Это может быть довольно сложно, поскольку его также можно использовать для управления анимацией, но я бы сказал, что целью этого этапа должно быть изучение основ. Допустимым результатом может быть, учитывая дизайн с определенным цветом, размерами, макетом и содержимым, возможность воссоздать тот же пользовательский интерфейс на веб-странице с использованием HTML и CSS. CSS в значительной степени основан на селекторе для прикрепления стилей к элементу на странице, ради обучения я буду играть с ними, пока не стану уверенным в большинстве из них!
Если вам нужны примеры чего-то для воссоздания, вы можете поискать в Google «Дизайн веб-сайта 2022», скорее всего, появятся сумасшедшие вещи, но начните с самых простых и продвигайтесь вперед.
Рекомендации для онлайн-контента в формате HTML применимы и здесь, вот конкретная рекомендация по видео: https://www.youtube.com/watch?v=yfoY53QXEnI&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=2
Javascript
Это, скорее всего, самый важный шаг на пути, поскольку этот язык всегда будет в центре вашей вселенной в веб-разработке.
Javascript — это многоцелевой язык программирования, основанный на событиях, понятный браузеру. Он используется для добавления логики к веб-страницам, что делает их динамичными и способными выполнять вычисления. Javascript используется для манипулирования DOM, прикрепляя функции к элементам HTML, я бы начал здесь, чтобы постепенно перейти к более сложным вычислениям и концепциям, таким как локальное хранилище, веб-воркеры, параметры синтаксиса ES* и многое другое. Если вы хотите углубиться в алгоритмы и сложные вычисления, вам понадобятся некоторые знания об алгоритмах и структуре данных, вы можете найти множество курсов или видео на YouTube об этом, если не старая добрая книга, которая поможет вам ускориться!
Для онлайн-контента источники, упомянутые до сих пор, чрезвычайно действительны, я бы лично предложил это видео: https://www.youtube.com/watch?v=hdI2bqOjy3c&t=2878s.
Когда вы почувствуете себя комфортно, манипулируя DOM и выполняя некоторые вычисления с помощью Javascript, займитесь веб-сайтами проектов HTML, CSS, Javascript, чтобы потренироваться, пока не достигнете удобного уровня. В этом плейлисте на YouTube полно таких примеров: https://www.youtube.com/watch?v=P7t13SGytRk&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=6
Фреймворки
Взглянув на текущий рынок, довольно легко определить, какие фреймворки будут наиболее востребованными, но я чувствую, что в последние несколько лет и в течение некоторого времени ответ будет примерно таким: React, Angular и Vue. .
Решение о выборе фреймворка не должно основываться исключительно на бизнес-ценностях, но со знанием основ веб-интерфейса, которые мы только что перечислили, правильный выбор может зависеть от множества разных причин. Я лично считаю, что способ работы React совместим с некоторыми принципами разработки программного обеспечения, такими как инкапсуляция и модульность, с которыми я люблю работать, поэтому мой личный выбор по-прежнему будет React, избегая неправильного пути, который я выбрал при первом запуске, чтобы просто погрузиться в него без какого-либо реального HTML. , CSS и опыт работы с Javascript.
В качестве фреймворка я бы сначала зашел на их официальную веб-страницу и осмотрелся, обычно у них есть руководство по началу работы, которому легко следовать при первом запуске, и я бы соединил его с некоторым видеоконтентом на YouTube. С фреймворком труднее работать небольшими фрагментами, поскольку они создаются в основном для проектов, но я бы посоветовал создавать действительно небольшие и целенаправленные проекты для обучения концепции и проекта, чтобы смешивать и сочетать их по пути. Это мое предложение перейти к видео, и после некоторой практики я бы порекомендовал, как всегда, выбрать небольшой проект с фреймворком, чтобы попрактиковаться в более реалистичном примере. https://www.youtube.com/watch?v=w7ejDZ8SWv8
Машинопись
Typescript — это расширенный набор Javascript, созданный для добавления функций набора текста в Javascript. Вы увидите, что большинство видеоуроков и проектов, в которых вы будете профессионально участвовать, используют его, и на это есть причина. Это дает вам огромное преимущество, выделяя большинство ошибок во время набора текста, а не во время выполнения, заставляя вас думать и кодировать определенным образом. Большинство разработчиков ненавидят Javascript, но любят Typescript, хотя вы заметите, что они очень похожи, на самом деле вы можете использовать Typescript так же, как обычный Javascript, если вы решили не печатать и не спамить везде. Так что мое теплое предложение — перейти к нему, как только вы достаточно поверите в Javascript, это действительно облегчит вашу жизнь.
Хорошим началом может быть преобразование того, что вы сделали до сих пор в разделе фреймворка, в Typescript, начиная постепенно, или начать новый проект с Typescript и начать с ввода вещей, пока вы продвигаетесь в проекте. Я бы порекомендовал проверить официальный сайт и немного контента на Youtube об этом!
Что дальше
Во время упражнения по структуре легко начать замечать первые примеры того, как данные поступают в веб-приложение или веб-сайт, и это открывает более широкое обсуждение внутренних технологий, серверов и концепций баз данных, которые являются частью веб-разработки в той же степени, что и что обсуждалось до сих пор. Я готовлю новую статью, посвященную этим технологиям, поэтому, если вам интересно, оставьте комментарий, и я лично дам вам знать, как только она выйдет!
Если вам интересно посмотреть, как выглядит настоящее приложение Word, отправьте электронное письмо на адрес [email protected], и я вышлю вам код сайта моего агентства https://www.aincradtech.com.
