Адаптивная верстка по макету PSD от А до Я


В этом видео мы верстаем одно страничный сайт по макету PSD с нуля и до его завершения. Это видео содержит в себе все уроки из курса Верстка из PSD. И для того чтобы вам было удобно его смотреть я сделал для вас интерактивное содержание.

Видео курс по HTML CSS для начинающих: youtu.be/MsDIIZbmsdU

Благодарность автору ( ₽ )
1. Сбербанк VISA: 4274 3200 3233 1582
2. Yandex: 410011260821995 — yasobe.ru/na/itdoctor
3. Станьте спонсором канала: www.youtube.com/channel/UC2Ev-rDSHBov0ZMChesLfrg/join

✅ Я, Исмаил Усеинов
ВК — vk.com/morphop
Группа ВК — vk.com/itdoctorstudio
Instagram — instagram.com/ismail_asanovich/
GitHub — github.com/morphIsmail
Twitter — twitter.com/ITDoctor_morph

00:00:50 Подготовка к верстке: youtu.be/pJFBGk1uQgU
00:16:20 Верстка меню: youtu.be/WgUBZaJPT5s
00:36:05 Шапка и О нас: youtu.be/PGQ20dpOFPI
01:01:50 Наши услуги: youtu.be/IjmWuJN7OHs
01:24:27 Портфолио на jQuery часть 1: youtu.be/d1zd15eMU-U
01:47:26 Портфолио на jQuery часть 2: youtu.be/ytidhTOeO_Y
01:57:19 Тарифные планы: youtu.be/2khHKa8ETSQ
02:15:32 Наша команад (Slick Slider): youtu.be/AJ11lOvytH4
02:39:57 Блог: youtu.be/_hfYufBu764
02:55:17 Форма и футер: youtu.be/HO28NiOc2m8
03:12:13 Адаптив под Планшет: youtu.be/1i07sWa-Ga4
03:42:34 Адаптив под Смартфоны: youtu.be/WBTWHrJ9MwE

Файлы на Google Диске: drive.google.com/file/d/1K7frlp9T83SF61GqccBD1mxO-KmvD_Me/view?usp=sharing
Файлы на Yandex Диске: yadi.sk/d/CtRanCZ06pEQBw
Репозиторий на GitHub: github.com/morphIsmail/bemWithBootsrap

Плейлист: www.youtube.com/playlist?list=PLuY6eeDuleIMbdiCzaZuPjxXE24eAG5qo

Верстка сайта с нуля, для новичков. Интенсив по верстке, день 1


Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.

Тема в VSC — плагин Material Theme

Макет — drive.google.com/file/d/1w5dkWhbh_LbGKCUfT-cXTlmo_405gmza/view?usp=sharing

Все исходники, инструкция и информация в телеграм канале.
Ссылка на телеграм канал:
bit.ly/3eaDJKi

Ссылка на телеграм канал с впн:
teleg.one/from0to1ru
Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.

Чат верстальщиков:
t.me/chat_from_0_to_1

Написать мне в ВК:
vk.com/vadimprokopchuk

Написать мне в телеграм:
t.me/silver8light

Отзывы о моем авторском курсе по верстке:
vk.com/topic-104892258_40476405

Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Как Сверстать Сайт Адаптивно? HTML/CSS


Как сделать сайт на html и css адаптивным? Быстрый видео-урок по адаптивной верстке и отзывчивому созданию сайтов для начинающих и интересующихся. Создать с нуля адаптивный Landing Page под моим присмотром: www.youtube.com/watch?v=xlwPU0BRQKQ

В видео я описал принцип создания адаптивных сайтов, которого придерживаются все современные фреймворки, типа Bootstrap.

Приятного просмотра!

ВСЯ Правда О Жизни Фрилансера В Таиланде


Давайте проведем день вместе в Таиланде? Я веб-дизайнер и фрилансер с 8-летним опытом, уже около 2 лет живу в путешествии благодаря возможности работать откуда угодно. Вы увидите мой распорядок дня на острове Самуи, мое рабочее место на вилле, тренажерный зал, продуктовый магазин и фуд корты, путешествие к мумифицированному монаху/водопадам и многое другое!

Смотреть все выпуски:
1) www.youtube.com/watch?v=UN5c9xlNAuU
2) www.youtube.com/watch?v=CUi_qUoeHRs
3) www.youtube.com/watch?v=CNnXLt1WftE
4) www.youtube.com/watch?v=ucM1xzkOosc
5) (текущий) www.youtube.com/watch?v=UZJvbrf5oeg

Получайте ежедневно полезные советы, мастер-классы, вебинары, реалити-шоу о фрилансе (веб-дизайне, верстке) на канале сообщества свободных фрилансеров WAYUP!

Быстрый старт карьеры веб-дизайнера-фрилансера с моей личной поддержкой, ДЗ и консультациями: wayup.in/library/course6?source=yt_video_UZJvbrf5oeg

Связаться со мной:
reg@wayup.in
vk.com/andrewgavrilov_me
facebook.com/andrewgavrilovme
instagram.com/andrew.gavrilov

День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив


Бесплатный урок (обучение) верстке сайта с нуля на html5, css3, js из psd-макета. Расскажу, как сделать эффекты и анимацию. Работа над настоящим лендингом. Скачать файлы из занятия для прохождения: wayup.in/lm/frontend-day?from=xlwPU0BRQKQ

Еще больше бесплатных мастер-классов для веб-дизайнеров, верстальщиков и фрилансеров: www.youtube.com/watch?v=ztYs5mLL2J0

Урок 1. JavaScript. Что такое prototype. JavaScript Prototype (English Subs)


Как стать востребованным JavaScript разработчиком: clc.to/senior

Подписывайся на соц сети:
Telegram: teleg.one/js_by_vladilen
Instagram: www.instagram.com/vladilen.minin
VK: vk.com/vladilen.minin
Группа VK: vk.com/js_by_vladilen

Мой Курс Стань JavaScript Senior: clc.to/senior

Мои Udemy Курсы:
Angular 9: clc.to/angular
React Native: clc.to/rnative
ReactJS: clc.to/react
NodeJS: clc.to/nodejs
Angular Fullstack (MEAN): clc.to/fullstack

Что такое prototype в JavaScript — я расскажу про то, что такое Javascript prototype и как он работает на простых примерах. В видео про JS Prototype

Сложный JavaScript простым языком:
www.youtube.com/watch?v=aQkgUUmUJy4

Понимание javascript - работа с DOM


Подключение первого скрипта
Объектная модель документа
Ключ к пониманию языка
Свойства, события, методы
innerHTML и style
Обработка событий
Слайдер фотографий в 20 строк

Исходники: yadi.sk/d/ACGhscUtsxYD6
Курс: js.dmitrylavrik.ru/

CSS свойствах необходимые начинающему / CSS уроки


CSS свойствах необходимые начинающему / CSS уроки
В этом выпуске: CSS свойства. Что, для чего и как применяется, свойства, которые стоит запомнить в первую очередь, и всё это с примерами!

=======================================

Записаться на консультацию:
prosto-razrabotka.ru/

Стать спонсором канала:
www.youtube.com/channel/UCn-P_F0tfY21cfnkyv2lsRQ/join

=======================================

В прошлом видео мы говорили о том, что нужно знать о html тегах начинающему верстальщику. А в этом видео мы рассмотрим основные css свойства, кастомные css свойства и посмотрим в целом на список свойств css. Помимо этого, рассмотрим порядок свойств в css, это понадобится нам для того, чтобы создать стиль css. Не забывай, что мы пишем сайт с нуля html css, поэтому и проходим уроки по css с нуля. Если тебя интересует веб разработка с чего начать и верстка css для начинающих, то этот контент, именно то, что тебе нужно. На канале мы проходим уроки по верстке сайтов для начинающих, изучаем в css начало работы и разбираем наглядно css свойства примеры. Обращаю твое внимание на то, что команды css стилей разбиты на разные категории. Кроме того, в видео мы разберем в css самые используемые свойства и не обойдем стороной свойство flex в css. Поговорим о том, что такое наследуемые свойства css и как вообще происходит в css наследование свойства. Оставляйте ваши вопросы в комментариях и подписывайтесь на канал, приятного просмотра!

=======================================

Файл со CSS свойствами из видео:
bit.ly/2P4oQA0

=======================================

Полезные ссылки:
bit.ly/2o8yRkE — проверка кроссбраузерности свойства
bit.ly/35TTphV — статья про Flexbox
bit.ly/2VYYy3y — статья про CSS Grid

=======================================

Telegram
Канал — t.me/prostorazrabotka
Чат — t.me/prostorazrabotkachat

=======================================

Подписывайтесь в соц. сетях:
Facebook — www.facebook.com/vitaliy.kirenkov
VKontakte — vk.com/vitaliy.kirenkov
LinkedIn — www.linkedin.com/in/kirenkov
Twitter — twitter.com/VitaliyKirenkov
Instagram — www.instagram.com/vitaliy.kirenkov

=======================================

Мой второй канал:
www.youtube.com/channel/UC-QLh1F3Rzp6HY-FW1E3Eaw

=======================================

Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React Redux Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только.
Больше информации обо мне: kirenkov.me/

=======================================

Содержание:
00:00 Вступление
02:01 Background
05:48 Border
10:13 Color (color, opacity)
11:09 Dimension (height, width)
13:21 Generated content (content, counter-increment)
15:17 Font
17:08 List (list-style)
17:44 Margin Padding
22:17 Outline
22:45 Print
23:24 Table (border-collapse, border-spacing)
24:58 Text (text-align, text-decoration, text-shadow, line-height, vertical-align, letter-spacing, word-spacing)
31:38 Transform
33:11 Transitions
35:01 Visual formatting (display, position, float, visibility, box-shadow, box-sizing)