Вы находитесь на странице: 1из 10

Мой конспектус 2.

Привет! Это мой обновленный конспект уже более опытного верстальщика и немного
фронт-енд разработчика, который не только что прошел один месяц своего боевого
посвящение в верстку и фронт енд. А уже более опытен и сверстал достаточно сайтов,
чтобы ответить на вопрос, что самое сложное в верстке? – Это придумывать названия
классам! Когда вы ответите на этот вопрос также, вы готовы к любому макету, фрилансу
или работе на позиции верстальшика.

Для работы все, что тебе понадобиться в данном курсе это текстовый редактор и
локальный сервер – на момент своей учебы Я использовал Notepad++ и сейчас его
использую так как накатил еще сверху пару плагинов и сделал тему под себя, но тебе
крайне советую использовать VSCode, потому как в нем уже все есть и даже больше и там
установка всех плюшек получше и намного проще.
Поэтому вот тут все, что тебе надо - https://www.youtube.com/watch?v=nxCLXMBl4e4
*идет видео целый час, но смотреть надо до препроцессоров это минут 30-35, если лень
смотреть видео ниже от меня про нотепад*

Если твой ПК слабый, я тебя никак не презираю и приглашаю в свою команду


Нотепадщиков, которую Я хочу «покинуть» как только мой комп хорошо будет тянуть
VSCode!

https://youtu.be/RCDNLxRXaK0 - Мой гайд по Нотепад++

Вот мой любимый Notepad++ 32 битный Англ - https://notepad-plus-


plus.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

Оценить