Строительство проектов очень важно для изучения программирования. Когда вы создаете проект, вы расширяете свой портфолио и учитесь применять свои навыки в новых ситуациях.

Мы только выпустили 2-часовый курс на YouTube-канале freeCodeCamp.org на испанском языке, который пошагово проведет вас через создание 3-х проектов с HTML, CSS и JavaScript. Вы будете практиковать свои навыки, создавая респонсивную навигационную панель с выпадающими меню, слайдер и страницу входа сカスタム модальным окном.

Если у вас есть друзья, говорящие на испанском, вы можете разделить испанскую версию этой статьи с ними.

Курс читает Jordan Alexander Cruz Garcia. Он веб-разработчик, который любит делиться своими знаниями и учить других о замечательном мире CSS.

💡 Совет: Обратите внимание, что курс сфокусирован на HTML и CSS, но также требует базовых знаний JavaScript для реализации интерактивности.

HTML, CSS и JavaScript

HTML означает HyperText Markup Language (HTML) и CSS означает Cascading Style Sheets (CSS). HTML обеспечивает структуру и содержимое веб-сайта, а CSS определяет, как это содержимое будет отображаться. CSS контролирует внешний вид веб-сайта, такие как шрифты, цвета, макеты, интервалы и анимации.

С помощью CSS вы можете легко создавать различные стили и макеты для различных размеров экранов, чтобы ваш сайт выглядел great на desktop, tablet и mobile devices.

💡 Tip: Сайты, адаптированные для различных размеров экранов, называются “responsive websites” (отзывчивыми сайтами).

Generalно мы пишем CSS в внешнем файле, которого мы называем “stylesheet” (стилевым файлом). затем мы связываем этот стилевой файл с HTML-файлом, применяя все стили к соответствующим HTML-элементам на основе CSS-селекторов и свойств.

Разделение содержимого веб-сайта от его представления очень полезно. Это приводит к более maintainable (долговечному) структуре проекта и более эффективному процессу отображения, поскольку браузеры могут отображать структуру быстрее, загружая CSS-стили в фоновом режиме.

Основно CSS является essentialным (необходимым) инструментом для создания beautiful, visual, and user-friendly websites (красивых, визуально привлекательных и удобных для пользователей сайтов), которые мы видим сегодня.

JavaScript добавляет интерактивность в сайт. Он превращает plain elements (простые элементы) в интерактивные, чтобы создавать engaging user experiences (захватывающие опыты для пользователей).

HTML, CSS, and JavaScript Projects in Spanish

Awesome. Now that you know more about HTML, CSS, and JavaScript, let’s check out the projects that you will build during the course. (Super). Теперь, когда вы более знаете о HTML, CSS и JavaScript, посмотрим на проекты, которые вы создадите во время курса.

Project 1: Navigation Bar (Проект 1: Navigational Bar)

You will start by building a navigation bar with dropdown menus. This navigation bar will be responsive, so it will expand or shrink to fit the size of the screen. If the screen is too small, it will automatically transform into a sidebar. (Вы начнете создание navigational bar с dropdown menus. Этот navigational bar будет responsive, поэтому он будет expand или shrink, чтобы соответствовать размерам экрана. Если экран слишком мал, он автоматически преобразуется в sidebar.)

💡 Совет: Основные опции постоянно отображаются. Когда пользователь нажимает на “О проекте” или “Проекты”, появляется выпадающий список с дополнительными опциями.

Домашняя версия

Вы можете увидеть домашнюю версию здесь.

Мобильная версия

Это мобильная версия, которую вы увидите на маленьких устройствах.

💡 Совет: Эта техника скрытия и переключения навигационного меню используется очень часто для оптимизации пространства для содержимого как можно больше.

Проект 2: Слайдер

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

💡 Совет: Слайдеры полезны для обмена отзывов пользователей, цитат и рецензий.

Проект 3: Landing Page

В конце вы построете шаблон Landing Page с использованием CSS Grid.

Когда пользователь нажмет на кнопку “Присоединяйтесь!” появится customs modal. Вы реализуете этот модальный окно с помощью HTML, CSS и JavaScript, шаг за шагом.

Если вы готовы начать заниматься навыками HTML, CSS и JavaScript, посмотрите на курс на YouTube канале freeCodeCamp.org на испанском:

✍️ Курс подготовлен Jordan Alexander Cruz Garcia (AlexCG).