20 подписчиков

План изучения программирование 2+ часа каждый день, в течении 30 дней [HTML, CSS, JS, PHP]

15 апреля 202015 апр 2020

941

7 мин

Оглавление

2 - Сделать видимым расширения файлов в Windows 10
Xampp. Установка локального web-сервера.

Месяц назад Я решил поставить себе цель или некий челлендж - "учить программирование с нуля, чтобы стать front-end разработчиком за 30 дней. Я уделял по 2+ часа в день, иногда дело доходило до 4 часов и так каждый день. Начинал я с HTML и CSS, потом дошел до JS и закрыл это все PHP, написав свой сайт для работы в универе. За эти 30 дней я написал свой конспект, чтобы каждый смог повторить мой путь, в котом все расписано: что я делал и чем пользовался от текстового редактора до локального сервера.

💦 update 29 - 02 - 2020 💦 Ребят спустя, очень долго время после публикации Я увидел, что мое видео набирает обороты и решил для вас обновить свой конспект уже с большим опытом в верстке и front-end. Также сами видео уроки на YouTube спустя какое-то время устарели и Я нашел уроки получше, поэтому для вас обновленный конспект 2.0! - он ниже! ну, а вот видео!

Мой конспектус 2.0

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

Для работы все, что тебе понадобиться в данном курсе это текстовый редактор и локальный сервер – на момент своей учебы Я использовал Notepad++ и сейчас его использую так как накатил еще сверху пару плагинов и сделал тему под себя, но тебе крайне советую использовать VSCode, потому как в нем уже все есть и даже больше и там установка всех плюшек получше и намного проще.

Поэтому вот тут все, что тебе надо -

*идет видео целый час, но смотреть надо до препроцессоров это минут 30-35, если лень смотреть видео ниже от меня про нотепад*

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

- Мой гайд по Нотепад++

Вот мой любимый 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) ССЫЛКА НА СКАЧИВАНИЕ - http://catcut.net/p4nA
2) ССЫЛКА НА СКАЧИВАНИЕ - http://corneey.com/wNwkNU
🛑🛑🛑

(! Cперва покажется реклама от 5 до 15 секунд потом пустит в облако на скачивание !)

День 2

Не думайте! Просто повторяйте и делайте, поверьте мне вы это еще проучите и повторите 2-3 раза до самих боевых действий!

https://www.youtube.com/watch?v=PK3u5mdA_g0&list=PLRoXQfrhqdOohkbJELZ8C2XedU1NB3KxO

Макет https://yadi.sk/d/-C0IyBSa3HNrXH

День 3

Надо ой как доделать тот сайтец.

День 4

Скучные, но очень полезные уроки День 4 – 7 !После между 7 и 8 днем Я вам подготовил огненного чувака, который устроит вам Вечеринку и вы будете рады, что не зря прошли все эти 7 дней мучений !!!

Переходим на сайт - https://webref.ru/course

Начать проходить HTML

В конце каждого пункта темы – есть задания и конечно в конце темы Проверка знаний. Проходим все полностью и надо пройти за 1 день.

День 5

Теперь качаем это приложение на телефону к себе. Если Андроид и тут проходим каждый урок . насчет практики – по своему желанию, но лучше попроходить.

По-сути это тоже самое, что было на Сайте, только теперь на телефоне и повторение мать учение.

Ну и в конце получить надо медальку – КУРС ВЕСЬ БЕСЛПЛАТНЫЙ (я был удивлен)

День 6

CSS

https://webref.ru/course

День 7

CSS

Единственное, что я не прошел Селекторы атрибутов. Но вы пройдите !!!

Между днем 7 и 8 Решил добавить простое объяснение еще раз всего, что мы прошли с вами и после этого вы точно сверстаете можно сказать любой сайт.

Постарайтесь за дня 3-4 пройти в прошлом конспекте этого не было да и много чего еще, просто решил вам упростить жизнь.

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

День 8

Пора самому верстать

Я случайно попал на этот сайт 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 вот тут все понятно !

День 9

надо доверстать сайт и я доверстал парни

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

День 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 – обидно L

*** ОЧЕНЬ ВАЖНОЕ В ВЕРСТКЕ https://www.youtube.com/watch?v=HihYQVuH64U БЭМ *** ПОСТАРАЙТЕСЬ ПОСЛЕ ПРИМЕНЯТЬ ЕГО ***

День 20 PHP на ютубе все также мало уроков по пхп, нинаю шо вам и посоветовать.