Сайт начинающего верстальщика

Подключаем к странице другой каркас

Вы выполнили задание Кекса — разработали прототипы главной и внутренней страниц сайта. А заодно познакомились с устройством HTML-страниц и изучили теги, отвечающие за их крупные структурные блоки. В следующих частях мы наполним прототипы реальным содержанием.

Давайте ещё раз посмотрим на получившийся результат. Блоки сайта отображаются в браузере в том же порядке, в котором они идут в коде, и располагаются друг под другом, в одну колонку.

Но мы пока только проектируем сайт, правда? Поэтому можем подвигать блоки и прикинуть, как они будут смотреться в другой раскладке. За расположение блоков в браузере отвечает уже не HTML, а CSS. Такое разделение очень удобно: мы можем, не меняя разметку, экспериментировать с расположением блоков и их внешним видом.

Позже мы обязательно подробно изучим CSS и узнаем, как управлять внешним видом элементов страницы. А сейчас просто подключите в другие стили, в которых описана другая сетка страницы.

В этой и последующих частях доступен для скачивания архив с текущим состоянием вёрстки. Вы можете скачать его и самостоятельно посмотреть, как всё устроено. А вот и ссылка на первое промежуточное состояние.

Хотите научиться профессионально писать код на самом востребованном языке программирования? Записывайтесь на профессию «React-разработчик», которая стартует 5 сентября 2023. Всего от 4 410 ₽ в месяц.

Сайт начинающего верстальщика

Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

Раздел про навыки

Спасибо! Мы скоро всё исправим)

Источник

a1ip / script.js

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

const submitButton = document . querySelector ( ‘.submit-button’ ) ;

const error = document . querySelector ( ‘.error’ ) ;

const reviews = document . querySelectorAll ( ‘.review’ ) ;

for ( let review of reviews )

review . onchange = function ( )

if ( review . dataset . evaluation === ‘bad’ )

submitButton . disabled = true ;

error . classList . add ( ‘shown’ ) ;

> else

submitButton . disabled = false ;

error . classList . remove ( ‘shown’ ) ;

> ;

> ;

> ;

/*

1. У всех радиокнопок есть класс review.

2. Чтобы отслеживать переключение радиокнопок, нужно добавить обработчик событий onchange

каждой радиокнопке.

3. У каждой радиокнопки есть атрибут data-evaluation. Если отзыв хороший,

значение этого атрибута – ‘good’, а если плохой — ‘bad’.

4. Кнопка отправки имеет класс submit-button. Если пользователь выбрал плохой отзыв,

кнопку нужно заблокировать, а если хороший — разблокировать.

5. Чтобы показать сигнал об ошибке, элементу с классом error нужно добавить класс shown.

Сигнал нужно показывать, если пользователь выбрал плохой отзыв. Если выбран хороший отзыв,

сигнал об ошибке нужно спрятать.

*/

Источник

Знакомство с HTML и CSS

Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.

Тренажёр обновлён 12 мая 2023

Теория

Обязательный для прохождения материал, теория, задания и испытания.

5 частей , 83 задания , 5 испытаний

Часть 1: Структура HTML-документа

Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.

Часть 2: Разметка текста

Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.

Часть 3: Ссылки и изображения

Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.

Часть 4: Основы CSS

Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.

Часть 5: Оформление текста

Завершаем оформление страниц блога, учимся оформлять тексты с помощью CSS: задаём шрифты, цвета, отступы, размеры.

Практикум

Профессии

• HTML и CSS.
  Профессиональная вёрстка сайтов
• HTML и CSS.
  Адаптивная вёрстка и автоматизация
• JavaScript.
  Профессиональная разработка веб-интерфейсов
• JavaScript.
  Архитектура клиентских приложений
• React.
  Разработка сложных клиентских приложений
• Node.js.
  Профессиональная разработка REST API
• Node.js и Nest.js.
  Микросервисная архитектура
• TypeScript. Теория типов
• Алгоритмы и структуры данных
• Паттерны проектирования
• Webpack
• Vue.js 3. Разработка клиентских приложений
• Git и GitHub
• Анимация для фронтендеров

Информация

Услуги

Остальное

Вход

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Источник

Интерактивные онлайн-курсы HTML Academy

Научитесь создавать и программировать современные веб-интерфейсы, начните карьеру в IT, оттачивайте своё мастерство.

Подробнейшие тренажёры
по HTML, CSS и JavaScript

Мы выбрали одно направление — фронтенд — и сделали самые подробные тренажёры о веб-технологиях. Одну тысячу пятьсот заданий в среднем проходят за три месяца.

8 частей тренажёров — бесплатно

Сто тридцать интерактивных заданий — бесплатные. После их прохождения вы сможете создать свой сайт.

Обучение на практике

С самого начала мы учим работать с живым кодом и самостоятельно решать задачи, приближённые к реальным. Также вас ждут испытания, принцип которых — «сверстай, как показано в образце».

От новичка до профессионала

Разобравшись с тренажёрами вы сможете принять участие в профессиональных курсах. Это профессиональные программы, где под руководством личного наставника вы научитесь создавать современные сайты и веб-приложения по критериям качества, принятым в веб-индустрии.

Учиться весело

Интересные, наглядные и затягивающие курсы, интерактивные интерфейсы, достижения — всё для обучения с удовольствием. И конечно же, Инструктор Кекс. Заскучать не получится.

1 507 Заданий и испытаний

1 291 743 Пользователя

103 754 181 Задание выполнено

Всё начинается с сущей шалости. «Я только попробую», — говоришь ты. А утром обнаруживаешь себя за компьютером и не можешь ответить, как долго просидел за ним, проходя онлайн‑курсы один за другим. Именно в этот момент всё выходит из-под контроля: базовый интенсив, продвинутый, JavaScript. И вот ты уже меняешь свою работу, жизнь и мечтаешь теперь об одном: стать ниндзя веб-разработки, в арсенале которого HTML, CSS, SVG и JavaScript. Ребятам из HTML Academy удалось невозможное: увлечь за собой многих «скучающих и сомневающихся» и занять их сложным, современным и очень классным делом. Ирина Смирнова, фронтенд-разработчик в Bookmate

Обучаясь в Академии, вы сэкономите огромное количество времени и научитесь правильно писать код, работать с реальными проектами и очень легко сможете продолжить свою карьеру фронтенд-разработчика самостоятельно. А также работа с наставником даёт большой опыт работы с кодом, потому что он всегда готов помочь в трудную минуту. Богдан Васкан, веб-разработчик в Synergic Software

Курсы Академии мне порекомендовали. Всегда скептически относился к вебинарам, но обучение в Академии изменило это представление. Учиться действительно интересно, занимательно, и, самое главное, не скучно. Интенсив Академии просто «вбивает» в голову нужные и современные навыки и знания, которые пригодятся вам в любимом деле. Павел Цыганов, преподаватель

Для меня знакомство с миром вёрстки началось с книжек и скринкастов на YouTube. Это было интересно, но непросто. И вызывало больше вопросов, чем ответов. В процессе появилось понимание, что без структуры и обратной связи от опытных практиков обучение может растянуться до бесконечности. В какой-то момент я наткнулся на сайт Академии. Это было что-то принципиально новое, интересное и увлекательное. Я стал проходить курсы по HTML и CSS. Это напоминало увлекательную игру, в которой хочется пройти на новый уровень. Сразу вспомнилась моя любимая игра World of Warcraft. Выполнил задание — получил достижение. В какой-то момент захотелось большего, и естественным продолжением стал интенсив. Месяц бессонных ночей, взорванный мозг, и вот, я смотрю на мой первый сайт. Потом на второй. И этот загадочный мир вёрстки начинает становиться понятным и уже родным. Для меня Академия стала прекрасным стартом, и я уверен, что будет отличным продолжением! Сергей Фоменко, ученик Академии

Если бы в школьную программу добавили обучение по таким интерактивным курсам, думаю, дети быстрей поняли, что им нравится, и лучше усваивали. Регулярно захожу на сайт, чтобы отдохнуть и вдобавок вспомнить, что давно не использовал в вёрстке. Советую всем тем, кто хочет держать себя в тонусе, и тем, кто учится. Поверьте такой подход обучения покажет свой результат, а если вы добавите ещё видео и книги, то пойдёт как по маслу. Поехали! Владислав Ридвановский, младший фронтенд-разработчик

HTML Academy — это новый уровень в онлайн-обучении. Я даже представить не мог, что такой уровень подачи материала может быть в онлайн. Академия учит тебя думать как профессионал, делать как профессионал. Плюс ко всему Академия — это семья и сообщество в одном лице, где каждый найдёт себе собеседника, ответ на волнующий его вопрос. Ни разу не пожалел, что год тому назад решил попробовать их курсы! Дмитрий Руднев, фронтенд-разработчик в Greensight

Обучение в HTML Academy позволяет быстро погрузиться и качественно прокачаться в сфере фронтенда. Круто стать частью огромного волшебного мира и так скоро уже оказаться одним из лучших среди новых коллег. Артемий Альтигин, системный администратор

Источник

a1ip / script.js

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

let list = document . querySelector ( ‘.todo-list’ ) ;

let input = document . querySelector ( ‘.todo-input’ ) ;

let form = document . querySelector ( ‘.todo-form’ ) ;

let priority = document . querySelector ( ‘.todo-priority’ ) ;

priority . onclick = function ( )

priority . classList . toggle ( ‘is-important’ ) ;

if ( priority . classList . contains ( ‘is-important’ ) )

priority . textContent = ‘Важная задача’ ;

> else

priority . textContent = ‘Обычная задача’ ;

>

> ;

form . onsubmit = function ( evt )

evt . preventDefault ( ) ;

> ;

form . onsubmit = function ( evt )

evt . preventDefault ( ) ;

let task = document . createElement ( ‘li’ ) ;

task . textContent = input . value ;

if ( priority . classList . contains ( ‘is-important’ ) )

task . classList . add ( ‘is-important’ ) ;

> else

task . classList . remove ( ‘is-important’ ) ;

>

list . append ( task ) ;

input . value = » ;

> ;

/*

1. Каждая задача в списке — это элемент li. При отправке формы (переменная form) новая задача добавляется в конец списка (переменная list).

2. Текст задачи берётся из поля ввода (переменная input).

3. Если у переключателя приоритета (переменная priority) есть класс is-important, то новой задаче также добавляется класс is-important.

4. Бонус: после того, как задача добавится в список, поле ввода можно очистить. Но можно не очищать. Подходят оба варианта.

*/

Источник