Всем привет!
Вторая часть статьи из цикла - Как научиться программировать?
Долго размышлял, что можно взять, как пример, как основу для того, что бы сделать первый шаг в Web Dev.
Сам я начинал свой маленький шаг по бескрайнему лесу Web Dev с маленького сайта моего Клана в игре Lineage 2, тогда еще был популярен Ucoz и весь максимальный потенциал, что даровался этой площадкой, это сделать верстку, большая часть работы это Front - end, сделать сайт красивым.
Front - end - это клиентская часть проекта, дизайн, интерфейс, в общем красота.
Back - end - это монстр, что таиться за красотой, это демон, что готов напугать любого начинающего разработчика. Back-end это серверная часть, бизнес-логика продукта, сайта.
and now.. Вы решили создавать прекрасные сайты, удобные, красивые и функциональные и естественно зарабатывать на этом, но с чего начать? Как протиснуться в эту высококонкурентную сферу? Где рынок перенасыщен дизайнерами, программистами.
Для начала Вам нужно определиться, что Вам больше по душе:
- Front - end
или
- Back - end
На моем опыте, любой начинающий Web Dev, попадая на должность Junior Web Dev, начинает свой маленький путь послушника с Front-end, любой уважающий себя Web Dev должен знать базу Front-end, точнее не просто ЗНАТЬ, а на практике применять.
Мало ли, ваш Front - end разработчик в отпуск ушел, а клиенту СРОЧНО нужно изменить цвет кнопки.
И так, что требуется для того, что бы делать сайты? Правильно, изучить HTML, CSS.
HTML - язык разметки, не является языком программирования
CSS - язык стилей, не является языком программирования
HTML, CSS - это база.
HTML, CSS - это основа любого сайта.
HTML - это не актуальный язык программирования, он уже не где не используется(с) Преподаватель Информационных Технологий Ветлугина
Да, было бы смешно, если бы не так грустно, многие преподаватели в ВУЗах, СУЗах не понимают порой о чем они говорят, пытаясь топить за то, что они знают и "используют".
У меня так конфликт был с преподавателем, который пытался мне доказать, что С++ никому не нужный язык программирования, а вот Pascal и Delphi это прогрессирующие технологии.
Да последние релизы Delphi XE хороши, но ценник в 50-90-130 000р пугает, да и сам рынок не так богат на вакансии.
Не отвлекаемся!
HTML, CSS изучаются быстро и на практике, сами основы не такие сложные. Это, как зайти в лес, где изначально все смотрится красиво, мирным и легким, путь в лес не так страшен..
Но потом вы встречаете вот приблизительно такое:
Ничего страшного, мой "Быдло Кодинг" не лечиться, увы это хроническая болезнь, но ужасы верстки всегда будут Вам сниться по ночам :)
И так, давайте создадим простую страницу?
Что на потребуется в боевом крещении? Да в принципе ничего особенного, вы можете использовать обычный Блокнот, но!
Это не удобно, по этому качаем Net Beans, упростит и сделает жизнь проще.
Отлично, IDE устанавливается интуитивно легко и просто, а как создать проект?
Стоп-стоп-стоп, у нас урок Front-end/Back-end, по этому нам потребуется кое-что еще.
Эдакий сервер, на котором будет пахать Ваш сайт.
Open Server Download - не забываем оставить 10р ребятам на пирожок, Open Source в массы, как говориться.
Отлично, Open Server устанавливается и включается так же интуитивно легко и просто, не смогли? Не понимаете? Вопросы? Отлично, мы учимся быть программистами, а главное оружие программистов?
Правильно уметь быстро искать и впитывать информацию, вперед! Гуглите.
Установили? Настроили проект? Отлично, двигаемся дальше.
Мы создадим самый простой сайт резюме.
Нам требуется создать Шапку сайта и его тело.
Отлично, мы добавили текст, по которому мы ориентируемся, где у нас голова, а где тело сайта, но все выглядит максимум ужасно, что бы добавить цветов, нам требуется прикрутить к этому делу CSS.
Стиль он же mr.CSS можно прописать сразу в HTML документе, добавить отдельным файлом или сразу на элементе всандалить его через style=" ваш стиль ".
В этом уроке мы будем максимум учиться простым вещам, ничего сложного.
Отлично, но вот мой Вам совет, не переписывайте этот код 1 в 1, погуглите, зачем все это нужно вообще.
А что бы было веселее учиться изучать CSS, можно использовать могучую силу браузера.
Кликаем правой кнопкой мыши по нужному элементу сайта и выбираем Просмотреть код элемента.
#Amazing
#WoW
Внизу вы видите свой HTML код, вы можете выбирать элементы head, body, div и т.д
Выберем элемент Body и в CSS добавим ему стиль.
АААААААА... Кровь из глаз правда?) Нажимаем на красный квадратик, где написано RED и выбираем более приятные цвета.. Мои глаза, боже.
Отлично выбрали более приятный цвет, теперь разберемся, что мы добавили на стиль такой нашему BODY.
Мы ужали его на 10% по бокам.
Посмотрите на ваши div они стали уже по бокам? Отлично, а теперь уберите стиль у body.
Они стали шире?)
Отлично, так держать.
Давайте добавим больше информации на наш сайт.
И сделаем его чуть красивее, насколько это Возможно.
Делаем стили сначала все в браузере, что бы нагляднее было, потом копируем их все в наш HTML документ.
Отлично, что-то похожее на "сайт" у нас имеется, теперь давайте перейдем уже к Back-end.
Добавить в наш HTML документ кнопку и поле для ввода текста.
Вот, такое у нас получиться.
Что это за <form> ?
Мы нашему PhP скрипту будет отправлять форму.... там короче... Загуглите :)
Отлично, теперь создадим новый документ, который назовем ArmyAzeroth.php
И добавим туда PhP код.
PhP код начинается с <?php и заканчивается ?>, его можно вставлять в HTML, как видно на скриншоте, я вывожу переменную $Welcome прямо в HTML коде.
Что делает наш код? Загугл...
Расскажу, ничего сложно.
Как только мы нажимаем кнопку на первой странице нашего сайта, мы отправляем форму PhP скрипту.
Он её принимает и проверяет - Была ли реально нажата кнопка if (isset($_POST[имя нашей кнопки]))
После проверяем не пусто ли в поле ввода namehero.
Если пусто - Выводим одно.
Если не пусто, выводим приветствие.
Легко? Сложно? Не важно друг мой, маленький шаг сделан.
Дорога, как говориться, появляется под шагами идущего.
<?php echo "Заключение или как?" ?>
Да, урок не самый подробный, не самый удобный, слишком много скриншотов, но я старался.
Потратил время, силы и креативность на написание статьи :) И я не жалею.
Надеюсь статья помогла тебе :) И ты начнешь изучать Web Dev
Всем спасибо!)
Лайк и комментарий помогает развитию канала ＼(≧▽≦)／
<?php echo "Домашнее задание" ?>
Теперь, что дальше нужно изучать, что бы продвигаться.
• Bootstrap - обязательно для изучения.
• JavaScript - обязательно для ознакомления, для Front - end разработчика, обязательно для работы.
• JQuery - Обязательно для Front - end.
• Angular, React - Для ознакомление.
• Composer PhP - Обязательно для изучения и работы.
• PhP Mailer - научитесь отправлять почту ＼(≧▽≦)／
Для тренировки навыков, вам потребуется Векторный редактор например Corel Draw, что бы нарисовать шаблон сайт(дизайн).
Создайте LandingPage сайт с формой обратной связи. ФИО и Номер телефона человека отправляется Вам на почту @mail, @Yandex, @gmail.