Мой конспектус 2.0 Привет! Это мой обновленный конспект уже более опытного верстальщика и немного фронт-енд разработчика, который не только что прошел один месяц своего боевого посвящение в верстку и фронт енд. А уже более опытен и сверстал достаточно сайтов, чтобы ответить на вопрос, что самое сложное в верстке? – Это придумывать названия классам! Когда вы ответите на этот вопрос также, вы готовы к любому макету, фрилансу или работе на позиции верстальшика. Для работы все, что тебе понадобиться в данном курсе это текстовый редактор и локальный сервер – на момент своей учебы Я использовал Notepad++ и сейчас его использую так как накатил еще сверху пару плагинов и сделал тему под себя, но тебе крайне советую использовать VSCode, потому как в нем уже все есть и даже больше и там установка всех плюшек получше и намного проще. Поэтому вот тут все, что тебе надо - https://www.youtube.com/watch?v=nxCLXMBl4e4 *идет видео целый час, но смотреть надо до препроцессоров это минут 30-35, если лень смотреть видео ниже от меня про нотепад* Если твой ПК слабый, я тебя никак не презираю и приглашаю в свою команду Нотепадщиков, которую Я хочу «покинуть» как только мой комп хорошо будет тянуть VSCode! https://youtu.be/RCDNLxRXaK0 - Мой гайд по Нотепад++ Вот мой любимый Notepad++ 32 битный Англ - https://notepad-plusplus.org/downloads/v7.5.4/ - другие версии не ставьте и не обновляйте его! 2 - Сделать видимым расширения файлов в Windows 10 http://pk-help.com/workstation/file-extension-windows10 !!! И обязательно – посмотрите это видео https://www.youtube.com/watch?v=6YeCbrtU15s Если хотите стать Фронт Енд разработчиком! – но лучше оставьте это видео после прохождения 30 этих дней, когда поймете куда идти после во френт-енд бэк-енд или прям в супер крутую верстку делать по-сути сайты под ключ без дизайна. Для фриланса по-сути это все не надо как и на позицию верстальщика там вполне хватает Jquery, но в наших 30 днях мы все-таки немного пройдемся по JS, после которого Jquery будет для вас водой с утра после бурной ночи! День 1 Смотрю не понимаю, делаю не понимаю, о чем вообще тут речь? Когда будем что – то учить? Эти два видео исключительно просмотреть и понять, что нас ждет следующие 10 дней, после которых ты станешь почти Гуру в этой области. - Учим Html за 35 минут для начинающих https://www.youtube.com/watch?v=4jYYHaTwWvY - Учим CSS за 40 минут для начинающих https://www.youtube.com/watch?v=GoBvYPwv-g8 Также скачайте фотошоп СС, так как он позволяет экспортировать картинки из макетов PSD – в любом случае он вам пригодиться позже! ADOBE PHOTOSHOP CS6 И СС 2019 ��� 1) ССЫЛКА НА СКАЧИВАНИЕ cs6 - https://cloud.mail.ru/public/392Q/3iw8j79z7 cc - https://cloud.mail.ru/public/28oT/5skrbcgEy День 2 – 5 Огненный парень научит вас верстать. https://www.youtube.com/watch?v=VrAfrz0Ee5c&t https://www.youtube.com/watch?v=4ixMmnlolBE https://www.youtube.com/watch?v=1iMXbj4FA-k https://www.youtube.com/watch?v=95NIcWGgvJY День 5 Скучные, но очень полезные уроки День 4 – 7 !После между 7 и 8 днем Я вам подготовил огненного чувака, который устроит вам Вечеринку и вы будете рады, что не зря прошли все эти 7 дней мучений !!! Переходим на сайт - https://webref.ru/course Начать проходить HTML В конце каждого пункта темы – есть задания и конечно в конце темы Проверка знаний. Проходим все полностью и надо пройти за 1 день. День 6 Теперь качаем это приложение на телефону к себе. Если Андроид и тут проходим каждый урок . насчет практики – по своему желанию, но лучше попроходить. По-сути это тоже самое, что было на Сайте, только теперь на телефоне и повторение мать учение. Ну и в конце получить надо медальку – КУРС ВЕСЬ БЕСЛПЛАТНЫЙ (я был удивлен) День 7 CSS https://webref.ru/course День 8 CSS Единственное, что я не прошел Селекторы атрибутов. Но вы пройдите !!! https://www.youtube.com/watch?v=8KjBQSiTP3w – Добавил, потому что некоторые видео были удалены ютубом! День 9 Пора самому верстать Я случайно попал на этот сайт http://tpverstak.ru/ пока искал, макеты для верстки в PSD ничего не найдя, я решил. А почему бы самому не найти норм сайт – как этот мне оч понравился ! И Я РЕШИЛ СВЕРСТАТЬ ! И так я научу вас по-своему копировать дизайн страницы сайта и файлы. И так-с прямо на странице нажимаем Ctrl + S и нажимаем – ок «скачать» или что у вас напишит, вместе с html создастся каталог и там буду все картинки ) Теперь нам надо сделать скриншот ентого сайта Я пользовался таким расширение для браузеров на гугл движке FireShot и для оперы вроде тоже есть ! https://www.youtube.com/watch?v=Eorijr5ZVME&feature=youtu.be вот если не понял как скринить всю страничку буквально 2 – 3 минуты посмотреть начала видео этого. ЛКМ по значку и захватить всю страницу Открываем фотошопу и туда в без создания файла просто вставляем, тем самым наш скриншот уже можно мерять по пикселям и тд. Если я не глупый то хедер высотой 65 пикселей Ты не глупый 29 02 2020! Я и вы себе разрешайте использовать видео и различные учебные материалы при повторении этого сайта. Но пожалуйста попробуйте сделать большую часть сами. Все желаю вам удачи. Думайте с чего начать? Создайте рабочее пространство переместив туда картинки и два файла css | html. <head> Должно работать и свг и и свг это топ мой друг! И тут меня ждал формат .svg нашел такую статью, но понял, что для значка вкладки – это возможно не подходит на моем уровне. Поэтому загугли из свг в пнг https://svgtopng.com/ru/ и вот шо вышло – весит больше, и выглядит больше. Открыл их файлик с CSS и нашел шрифт – ну и подключил. </head> Как себя помню самое сложное было про флекс https://www.youtube.com/watch?v=nIMrrrFnFuQ вот тут все понятно ! День 10 надо доверстать сайт и я доверстал парни https://image.online-convert.com/ru/convert/webp-to-png из webp в png ПОДДЕРЖКА Если вдруг вам так сильно понравился план конспект курс, то можете отблагодарить монеткой на WebMoney WMR R672786962238 WMZ Z401098679073 https://www.youtube.com/channel/UCo2BKgU3CsZuguTAfYShsSw - мой канал, на котором ентот конспект! Таже тема с англ.языком - https://www.youtube.com/watch?v=1IOjz6Cw9O8, что и тут! Еще один мой канал связанный с Алиэкспрессом https://www.youtube.com/channel/UCQ8Q2xwZwYSDNwitV08aakw *если не сложно чекните на досуге! https://fas.st/0_3zGj - Ссылка с подарком для новичков (Кэшбэк-сервис) https://vk.com/iggb.life вк Тут произошел плюс минус день, потому что удалили видео кое-какие! День 10 – привет JS Посмотрел это видео полностью - https://www.youtube.com/watch?v=4QHFhIjF2L0 День 10 – План такой Вроде нашел Плейлист: https://goo.gl/HrTSbd смотрю и повторяю http://learn.javascript.ru/ тут чуть позже надо будет почитаь поучить! День 11 – 15 Пройти Плейлист: https://goo.gl/HrTSbd смотрю и повторяю День 16 – 18 И начал изучать тут - http://learn.javascript.ru/ ДО ООП День 19 Поделайте при помощи уроков по JS какие нибудь чтучки, можете у меня из видео взять примеры - https://www.youtube.com/watch?v=JYV_ct43MlE&feature=youtu.be !ОБЯЗАТЕЛЬНО СДЕЛАЙТЕ СЛАЙДЕР! День 20 90 % используют Jquery по-сути это уже готовые решения на языке JS, которые даже без знания JS можно использовать, но мы теперь все понимаем. Вот вам как пример! https://www.youtube.com/watch?v=rXNfDfqtM3M слайдер Jquery Slick https://www.youtube.com/watch?v=chJQofBSx94 вот как еще пример с ентого дядьки. Я сейчас и вовсе сижу ток на Jquery – обидно *** ОЧЕНЬ ВАЖНОЕ В ВЕРСТКЕ https://www.youtube.com/watch?v=HihYQVuH64U БЭМ *** ПОСТАРАЙТЕСЬ ПОСЛЕ ПРИМЕНЯТЬ ЕГО *** День 20 PHP на ютубе все также мало уроков по пхп, нинаю шо вам и посоветовать. Xampp. Установка локального web-сервера. youtu.be/Gftb3BcQKcA учить https://www.youtube.com/channel/UCjRm2TYOpa6MRtpjDndns8g/videos учил тут Но лучше найти другого учителя по пхп ребятки --https://www.youtube.com/playlist?list=PL3LQJkGQtzc6mnBlbr2J59VQ-aKIkarYw https://www.youtube.com/watch?v=-yZfdyPMzCE&t тут PHP заявки https://www.youtube.com/watch?v=EPQspfsKvRo&t тут PHP файлы До 23 дня. День 24 Дизайн UX сайта https://www.youtube.com/watch?v=3wAQCXL7RDk&t https://www.youtube.com/watch?v=4E8sr4QS7OI День 25 сделать свой дизайн сайта по фермерскому хозяйсвту или любой теме. Если уж совсем все плохо возьми макет и добавь туда все, чему ты тут научился! 26-30 Сделать сайт с использование php js html css photoshop И попробуте сделать слайдер без Jquery И сделайте адаптив Как у меня !!! Сделал ты красавец хахахахахахаха ну или лох. Полезные ссылки Тут фриланс - https://lite.al/pzSdKИ тут фриланс - https://lite.al/uqyjbV Тут бесплатный хостинг и домен - https://youtu.be/wOxgb_TcLIU
