Верстка сайта с нуля. Начало, шапка сайта.

260 ratings | 3802 views


Верстка сайта с нуля. Начало, шапка сайта.

Наконец то на канале верстка адаптивного сайта с нуля. В этом видео я покажу процесс создания сайта для новичков. Мы начнем проект с самого начала, с создания index.html и последующей адаптивной версткой. В этом курсе верстки мы сделаем полноценный сайт с несколькими страницами за 10 уроков. В нем будут различные компоненты от применения flexbox с css grid до встраивания видео и слайдеров на сайт. Вообще html верстка это занятие не сложное но творческое и весьма время затратное. Курсы верстки я разделил на уровни. В данном курсе первого уровня будут самые простые моменты верстки. Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 - WebDeveloper (вводить при регистрации на сайте ). Для активации бесплатного периода необходимо пополнить баланс на 100 руб. Активационный платеж не расходуется, оставаясь на балансе и является всего лишь барьером против злоупотреблений со стороны спамеров, мошенников и т.п. Группа вк: Пост с логотипом в группе:

Comments to the video: Верстка сайта с нуля. Начало, шапка сайта.

Alex Banzai 20 days ago
Неплохо. Особенно нравится формат уроков, дудки воды - все по делу. У +Web Developer Blog мозг работает на 147% :)
Olexandr Coder 21 days ago
Снимите видео о macaw, думаю будет весьма любопытно. Сам на данный момент изучаю и думаю код я сейчас буду не строчить, а редактировать
sparko3run 21 days ago
Не работает иконка ,которая должна мастерить перечень. Она кушать,однако не кликабельная. несколько один с нуля все начинал мастерить., однако не могу с ней разобраться. Если отворить в браузере инструменты разработчика и поглядеть код этой иконки, то там кушать отличия от видео(хотя код таковой же пишу в в sublime text). У меня вот этак: <div class= topnav id= myTopnav >. НЕ ХВАТАЕТ СЛОВА responsive. ЕСЛИ ЕГО ПРИНУДИТЕЛЬНО ДОПИСАТЬ НЕПОСРЕДСТВЕННО В БРАУЗЕРЕ,ТО СПИСОК ПОЯВЛЯЕТСЯ СТАТИЧНО(не раскрывается\прячется при нажатии иконки). Что мастерить? может у кого-то такое было??
Zhenya Mironovich 22 days ago
Автор , издавна смотрю ваши видео , однако не понимаю будто в этом уроке все работает без viewport))) <meta name= viewport content= width=device-width, initial-scale=1 >
The GangstaRR Cool 22 days ago
Я в теории уже не самый зеленоватый новенький, потому мне понравилось - будто один нужно набивать руку практикой, просматривая примеры. У меня еще созрел не связанный с темой урока реквест. У вас в видео реклама веб-сайта хостингов. Там потрясающий слайдер. Такие на современных веб-сайтах попадаются нередко, однако я не могу отыскать будто их мастерить. Такой, в котором рисунки сменяются автоматом чрез n-ное число секунд, и вручную можно перелистывать стрелочками, время от времени даже появляющимися при наведении. Отдаленно понимаю, что там бытуют settimeinterval из js-а, и :after из css-a, однако весьма смутно. На тот веб-сайт еще этот похож , хотелось бы уметь мастерить этак же прекрасно. Вы сможете сбросить видео с схожим практическим примером?
Web Developer Blog 22 days ago
+The GangstaRR Cool конечно, сделаю в последующей практике
SHADERSHOW 23 days ago
Когда последующий выпуск? Очень жду
Web Developer Blog 22 days ago
+SHADERSHOW сейчас сходу два будет)
Нуритдин Жумахмет 23 days ago
краса спс
Web Developer Blog 22 days ago
+Нуритдин Жумахмет главное сделайте эту красоту
span4 23 days ago
Хорошее и обычное решение адаптивного меню на js. Спасибо
Web Developer Blog 22 days ago
+span4 и вам благодарю
Nicholas Ovsiannikov 23 days ago
Здравствуйте! Почему потом нажатия меню(три полосы) меню отображается справа? а не слева будто у вас на видео?
Web Developer Blog 22 days ago
+Nicholas Ovsiannikov я не ясновидящий не могу произнести вам наверное, однако уверен что неувязка где то в коде.
Andrew Vlasoff 24 days ago
Спасибо за задание. Если позволите, привнести свою лепту, то я в.topnav a ещё добавил border-bottom: 2px solid transparent; max-width: 80px;. Теперь при наведении меню не дёргает и в мобильном меню, border-bottom, будто по мне, малость лучше смотрится при наведении. Прокомментируте изволь. Как вам?
Web Developer Blog 22 days ago
+Andrew Vlasoff отлично
Fury Rage 24 days ago
Ну а Ларавель будет? Ты же обещал.
Web Developer Blog 22 days ago
+Fury Rage все будет. Только необходимо пора. Один задание это два-четыре часа.
Vladislav Yuzhakov 24 days ago
Мне весьма понравилось, животрепещуще, веб-сайт смотрится современно и живо даже в самом начале! Но мне, будто новенькому, хотелось бы более разжевано касательно тегов :D И БЫЛО БЫ ОООЧЕНЬ ЗДОРОВО, ЕСЛИ БЫ К ВИДЕО БЫЛИ ПРИКРЕПЛЕНЫ ЭТИ ФАЙЛЫ С КОДОМ, ЧТО ПОЛУЧИЛИСЬ В ВИДЕО
Web Developer Blog 22 days ago
+Vladislav Yuzhakov моя мысль заключается в том что б вы параллельно со мной писали код, потому файлы не выкладываю. Касательно тегов это если встречается какой то неизвестный то сходу хтмл бук открываешь и узнаешь в чем дело. (Если внезапно я не растолковал)
Golion TV 24 days ago
Хотелось бы уже узреть полную вёрстку веб-сайта без применений посторониих программ и иной фигни. Тоесть, готовь уроки по написанию веб-сайтов на чистом html, css, php и js. Да и пускай новенькие сами обучаются, ты же хоть один сделай уроки для продвинутых программистов!
Web Developer Blog 22 days ago
+Golion TV конечно будут уроки высочайшего уровня.
Эдуард Богатый 24 days ago
Почему 3 равно, что это означает? ===
Web Developer Blog 24 days ago
Оператор == ассоциирует на равенство, а вот === — на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обыкновенно и употребляется.
Dimaster 24 days ago
Урок пригодный. Спасибо за подробности. Было бы замечательно еще прикрутить гитхаб, чтоб узреть готовый эталон для определения синтаксических ошибок у себя.
Web Developer Blog 22 days ago
+Dimaster благодарю! Возможно
Eugen Listopadskiy 24 days ago
Для тех, кто имеет трудности с адаптивной кнопкой.
Eugen Listopadskiy 24 days ago
window.onload = function () document.getElementById('menu').onclick = function () var x = document.getElementById('myTopnav'); if (x.className === topnav ) x.className += responsive ; else x.className = topnav ;
Web Developer Blog 22 days ago
+Nazar Klimenko тот же код
Nazar Klimenko 23 days ago
Помогло, бо по коду з відео невиходило.
aNfain 24 days ago
телефон не указывает иконку меню! А ещё лучше прибрать пустое пункт перед нашими a .top-nav.responsive margin-top: 0;
Kira khan 24 days ago
большущее благодарю за задание!
Ascold Channe 24 days ago
Алексей, ваши видео вечно были лучшими из величавого огромного количества уроков на ютубе! Но уже по первому видео этого курса вижу кучу косяков, которые новенькому (я этак сообразил этот курс будто мало-мало потом htmlacademy необходимо глядеть) лишь в ступор поставят. Теперь аргументировано: 0. ок, верстаем без псд, сочту за фишку. для человека которому верстать 1-ый один в жизни - отлично. Но 1. Где адекватное именование классов? icon? что за icon? ну-ка давайте уж hamburger либо menu__toggle - необходимо ведь слету приучивать к правильному неймингу. 1-2 часовое видео по бем неймингу на ютубе не все поглядят, а неплохую практику из видео в видео - перенимут многие. То же про семантичные теги (это на будущее) - эти вещи схожу необходимо демонстрировать, повсевременно, в каждом видео. Чтоб втерлось в мозг. 2. css селекторы - тоже поадекватнее. не нужно для контраста. вы думаете что для новенького это обилие, а на деле выйдет попросту мешанина невалидного цсс. бест практисес слету! это не трудно. 3. цсс стили. Алексей, умоляю, будто верстальщик верстальщика - не нужно мешать флоаты с флексами и гридами! Забудьте уже эти гребаные флоаты, у флекса 98% поддержки! Это смотрится будто ламборгини с заводскими дисками ваза 4. js нативный. Вот это отлично! А то все на jquery слету пишут, а на нативном и не слыхали. Итого: курс видать что рассчитан на людей понимающие базы html css, лишь что прошедших курс htmlacademy.ru По нему можно приступить верстать самый 1-ый макет. Но! Исправьте сходу нездоровые моменты - люд на которых нацелен этот курс будут повторять за вами будто обезьянки (это не в обиду, сам этак делал, это нормально) и перенимать ошибки, будто нейминг, теги, селекторы и css. не нужно излишнешо контраста! Давайте демонстрировать наилучшие практики! Спасибо за ваши видео!
Ascold Channe 21 days ago
Cana GT на сейчас далековато не наилучший материал, однако если гласить про новенького какой СОВСЕМ не знает что такое хтмл и цсс - наилучшее что покамест знаю. Наглядно и незаморочно. Главное запаситесь блокнотом для записи новых параметров и не торопитесь на автопилоте протекать. Основы дает отлично, я потом этого курса за 5 мин исследовал flexbox и начал верстать бесплатные шаблоны, с второго макета с адаптивкой. По пути осваивая мелочи. Поверстаете пару шаблонов - сами поймете что не этак. Главное посматривайте этот канал и пару других (одинешенек я сжег в коментариях уже). Потом задачка - не спустить руки когда с javascript столкнетесь.
Cana GT 21 days ago
Ascold Channe вы гласите про даровой курс html academy? Он вправду большой и толковый?
Ascold Channe 21 days ago
Александр Романов я гласил про даровой курс, платный не проходил и не пригодилось. 2-3 месяца самообучения мне хватило чтоб отыскать первую работу в маленький вебстудии.
Александр Романов 21 days ago
Это реклама академии? У Русакова уроки верстки стоят 3000 рублей, и он все по делу и без воды учит, лишь то, что необходимо для верстки на крышка 2017 года. А html академия немало берет за ту же информацию. Или может там кушать что-то, чего не знаю? К примеру помогают заработать 1-ые средства на фрилансе. Вот WayUp тебя не отпустят, если ты не заработаешь средств на фрилансе благодаря ихнему курсу, истина стоимость там тоже не малая )) Понимаю, что познания бесценны, однако переплачивать за одну и ту же информацию не вижу смысла. В верстке особо не развернешься и ничему уникальному в ней не научишь.
Cana GT 23 days ago
Подскажите уроки где всё что вы обрисовали производится? Новичку не попросту осознать где толковый задание, будет здорово многим думаю.
Евген Пупкин 24 days ago
может ну-ка его эти флоаты )) малость подташнивает от их )
Web Developer Blog 22 days ago
+Евген Пупкин конечно, далее флексбоксы)
Letton 24 days ago
Зачем растрачивать трафик юзера, когда ссылки на главную страничку можно поставить ?
Aleksey 24 days ago
Рекламы естественно. Спасибо за уроки!
Отборочка! 24 days ago
Круто делаешь. Только капсом невозможно строчить наименования меню, для этого кушать text-transform: uppercase;
Web Developer Blog 24 days ago
Спасибо!
Nikita Pro 24 days ago
Лучший ютубер по web разработка, вечно смотрю твои уроки и вечно все понятно!
Web Developer Blog 24 days ago
Спасибо!
Nikita Pro 24 days ago
Крутое видео! И не лишь это!
for.ВИДЕОs.you 24 days ago
Vuetify в планах кушать? Вообще пригодный фрейм?
Web Developer Blog 24 days ago
покамест что весьма немало планов, фрейм вроде пригодный
Богдан # 25 days ago
Спасибо.
Web Developer Blog 24 days ago
И вам благодарю за просмотр!
heisenberg102 25 days ago
Не срабатывает адаптивная кнопка, хотя код неизменный :(
heisenberg102 24 days ago
По новейшей переписал, заработала, хотя сначала тоже всё было этак, я даже перепроверял, однако, видимо, что-то упустил всё таки. Спасибо за уроки, btw :)
SHADERSHOW 24 days ago
Nikita Pro Мне комфортно строчить с пробелом, + это никак не мешает коду верно воспроизводится
Nikita Pro 24 days ago
SHADERSHOW пиши myFunction() демон пробела
SHADERSHOW 24 days ago
menu.onclick = function myFunction () var x = document.getElementById( myTopnav ); if(x.className === topnav ) x.className += responsive ; else x.className = topnav ; Вот, у меня все работает
Web Developer Blog 24 days ago
в js все верно написали?
Валентин Стратович 25 days ago
Топ!
Web Developer Blog 24 days ago
Именно!
Orbita_Studios 25 days ago
Привет, друг! Конечно проблема не по теме. Но макбук норм? Нормально тянет (без зависаний разные программки и т.д?) И 128гб памяти страшно либо терпимо?
Web Developer Blog 24 days ago
Макбук норм, тянет отлично, у меня в связке с компютером на винде мне на маке 128 хватает)
Vlad Radigin 25 days ago
top
InCome zfnzfn 25 days ago
Почему разработка не ведеться с помощью gulp и других престижных штуковин-дрючек. Ведь курсов где с нуля пишут веб-сайт без современных фич МНОГО
vernie dannie 24 days ago
Просто применяй intellij idea и отпадет нужда в этих штуковинах
Web Developer Blog 24 days ago
Не этак уж и немало, а я в начале видео произнес что я поделю курсы по уровням, поначалу будут обыкновенные макеты, потом сложные, с фреймворками, с препроцессорами и со собирателями
Aram Minimum 25 days ago
Планировал за эту неделю поглядеть пару видосов по верстке веб-сайтов, чтоб поправить свои ошибки(излишние стили). И здесь извещение от тебя. Как один твою и посмотрю :) жду продолжения! Возможно меня помнишь, я издавна смотрю за твоими видосами:)
Web Developer Blog 24 days ago
О пять, конечно помню! Спасибо!
valera romanchuk 25 days ago
Касательно js: использованеи var считаеться дурным тоном (чтоб не засорять scope), пускай новенькие cразу привыкают к let, const. getElementByid лучше выплеснуть из фнукции, чтоб не находить DOM элемент любой один. воззвание к menu (к id) без подборки, это наследство от которого откажутся в наиблежайшее пора (в спеках к новенькому ecmascript про это кушать)
valera romanchuk 24 days ago
Это попросту засорение глобального объекта. Hoisting знакомо понятие?
Nikita Pro 24 days ago
Николай Михайлюк var это не хлам
Николай Михайлюк 25 days ago
Учитывая то что вы тут написали, не могли бы вы порекомендовать каким образом обучать js, без вот такового хлама, которые уже или не употребляют норм разработчики, или быстро не будут?
Kempriol 25 days ago
Делать вначале все пункты меню большими некорректно, нужно это прописывать в цсс
Web Developer Blog 24 days ago
Да, можно и чрез uppercase
Bekzat Kamen 25 days ago
У меня чет адаптивная кнопка не работает при нажатии (не сходить вес меню стоит лишь HOME)
Bekzat Kamen 24 days ago
Web Developer Blog конечно все нормально
Web Developer Blog 24 days ago
а стили? все в норме?
Bekzat Kamen 24 days ago
menu.onclick = function myFunction() var x = document.getElementById( myTopnav ); if(x.className === topnav ) x.className += responsive ; else x.className = topnav ; Вот код Js в Siblime Text 3
Web Developer Blog 24 days ago
js проверьте
Владислав Дидковский 25 days ago
Почему чрез Jquery не пишешь меню, этак легче?
Web Developer Blog 24 days ago
слайдеров уже груда на канале, в плейлисте js практика кушать подробное видео этак же
Владислав Дидковский 24 days ago
Да, меню не этак принципиально, я слайдер жду :]
Web Developer Blog 24 days ago
таковой метод, сможете у себя на jquery
Vitalii Taranik 25 days ago
Всё весьма круто,благодарю.Только вот media я засунул в отдельный файл,мне будто этак лучше.
Web Developer Blog 24 days ago
Спасибо!
Владислав Дидковский 25 days ago
Для того чтоб скрипт загружался потом загрузки странички со стилями, существует прекрансый атрибут defer. Автору благодарю за задание
Web Developer Blog 24 days ago
Спасибо
aNfain 25 days ago
огромное благодарю за такие видео.
Web Developer Blog 24 days ago
И вам благодарю что смотрите
Ваня Ляшук 25 days ago
Очень здорово!Спасибо, жду последующий задание
Web Developer Blog 25 days ago
+Ваня Ляшук и вам благодарю! Постараюсь любой денек спускать.
Слава 1992 Илюшин 25 days ago
Автор молодчина!Лайк!
Web Developer Blog 25 days ago
+Слава 1992 Илюшин благодарю огромное!!
ALLANIT 25 days ago
Я этак глядя на этот задание понимаю одно не для новенького этот задание ))
Art Vas 20 days ago
хороший видос учусь у тебя все понятно!
Web Developer Blog 24 days ago
благодарю!
Nikolai Pogoji 24 days ago
А мне вот напротив будто, что конкретно для новичков, ну-ка, если естественно учесть, что слова переменная и html/css не стращают и не вводят в ступор. Наоборот, весьма мотивирует посиживать и колупать в справочнике(тот же htmlbook.ru), то что не знакомо либо нехорошо понимаешь. Отличный задание, хотя JS для меня покамест темноватый лес, однако ни чего сверх непонятного я не отыскал, у создателя на изумление приятная и обычная подача. Жду продолжение, создатель молодчина! Спасибо!
Web Developer Blog 24 days ago
Ну это будет самый обычный задание
ALLANIT 25 days ago
Нет дудки извини я не про то что конкретно я новенький )) Есть более подробное видео о таких делах и углублено на настолько что более понятно. Я бы что то добавил и порекомендовал .
rimo rur 25 days ago
Спасибо за труды! Актуальная тема в свете новых, укрепляющихся эталонов во fronte. Лайк не смотря! Ещё-бы с помощью scss либо less все это забубенить и новенькие будут строчить кипяточком )) ИМХО. Буду ожидать последующего видео!
Web Developer Blog 24 days ago
согласен, однако 50тыс подписчиков на нем не наберешь(
rimo rur 24 days ago
однако он более надежен и функционален. от 3-х-страничника и до магазина.
Web Developer Blog 24 days ago
modx вроде еще не этак популярен)
rimo rur 25 days ago
пять! а позже все это запилить на modx (с подробными опциями) и +50тыс подписчиков до Н.Г. для тебя обеспечено будет точно!
Web Developer Blog 25 days ago
+rimo rur конечно, далее будут и препроцессоры в последующих курсах непременно
Top Secret 25 days ago
Так содержать !👍
Web Developer Blog 25 days ago
+Top Secret далее лишь лучше!
Roman Krasnolutskyi 25 days ago
Супер!
Web Developer Blog 25 days ago
+Roman Krasnolutskyi благодарю
Серёга Серёга 25 days ago
Я одинешенек не увидел макета что верстается?)
Web Developer Blog 24 days ago
чего
Серёга Серёга 25 days ago
Сорри прослушал) Так для себя мысль.
Web Developer Blog 25 days ago
+Серёга Серёга а вы видео смотрели?
assa45547 25 days ago
Хорошо бы нумеровать уроки. Спасибо
Web Developer Blog 25 days ago
На превью у видео кушать Часть 1