46. Frontender[1.0] Container vs Wrapper. Классы HTML & CSS

preview_player
Показать описание
Привет!📢

Container vs Wrapper. Классы HTML & CSS

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

К каждому уроку также есть PDF файл по теме урока, который можете скачать у меня в телеграм-канале под анонсом данного урока.

Ваша обратная связь обязательна =)

Курс разделен на 3 модуля:
1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков);
2) JavaScript, решение задач, написание нескольких приложений;
3) React, Typescript, Redux написание полноценного приложения;

НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :)
Желаю приятного обучения! 🔥

Также тебе могут быть полезны эти уроки:

FRONTENDER[1.0] полный, структурированный и бесплатный курс по фронтенд разработке на Youtube.

📢 Автор курса: Дмитрий Колотильщиков
#html #frontend #frontender
  1. Дмитрий Колотильщиков
  2. Frontender[1.0]
  3. Дмитрий Колотильщиков
  4. frontend курс
  5. программирование с нуля
  6. html
Рекомендации по теме
46 frontender 1 0:02:32

46 frontender 1 0 container vs wrapper html css

46. Frontender[1.0] Container 0:08:27

46. Frontender[1.0] Container vs Wrapper. Классы HTML & CSS

10 CSS Pro 0:09:39

10 CSS Pro Tips - Code this, NOT that!

Flexbox Crash Course 0:40:22

Flexbox Crash Course - 9 Layout Examples

CSS Flexbox Crash 1:14:33

CSS Flexbox Crash Course

CSS Flex Shrink 0:06:32

CSS Flex Shrink (flex-shrink) Explained - Beginner Flexbox Tutorial

Learn Accessibility - 1:33:06

Learn Accessibility - Full a11y Tutorial

how to make 0:46:46

how to make a fully functioning company website from scratch part 1

This is a 0:46:01

This is a great front-end challenge for any developer to try!

Npm ERR code 0:00:46

Npm ERR code ERESOLVE react | Npm install error in visual studio code [Fast]

Learn HTML & 5:21:44

Learn HTML & CSS – Full Course for Beginners

Build a responsive 2:15:46

Build a responsive personal portfolio website using HTML, CSS & JavaScript

'Why Didn't I 0:47:13

'Why Didn't I Think of That?!' - Solution to the Result Summary Component Frontend M...

8 React Js 0:11:23

8 React Js performance optimization techniques YOU HAVE TO KNOW!

[COMPLETE COURSE] How 1:57:49

[COMPLETE COURSE] How to Build a WEB PORTFOLIO from SCRATCH | Learn HTML & CSS

React Testing for 1:17:14

React Testing for Beginners: Start Here!

How to create 0:27:19

How to create a responsive HTML table

Professional Website From 2:18:34

Professional Website From Scratch | HTML & CSS For Beginners

Local LLM with 0:11:57

Local LLM with Ollama, LLAMA3 and LM Studio // Private AI Server

How To Create 3:59:56

How To Create A Wordpress Website In 2024 | Elementor Flexbox Container Tutorial

Angular Material CDK 0:22:40

Angular Material CDK - Overlay Module Pt.1 (Comprehensive overview, Angular 9 / 2020)

Code Splitting in 0:16:10

Code Splitting in React JS - Lazy Loading Performance Optimization

Presentation 2020Q1. Day 5:17:56

Presentation 2020Q1. Day 1

HTML & CSS 0:23:31

HTML & CSS Made Simple: Navigating the Order Summary Challenge with a Soft Touch! 🍃💻

Комментарии
Автор

Привет! Ни разу не видел связку container + wrapper. 🤔
Продолжай своё дело, оно маленькими видеоматериалами делает большое дело.

KirylKurtsou
Автор

Найс, как раз недавно использовал это все, только сильной разницы не понимал, как я понял, это такие общие названия, чтобы если другой человек посмотрел на код, и если он увидит контейнер, то сразу будет понимать что это примерно такое, благодаря известному названию. Я вот как начал использовать контейнер, использую его именно там, где какое-то наполнение, ну типа header, main, footer, внутри них навигация, основной контент, контент подвала, для этого и добавляю контейнер, а основной тег использую, чтобы фоновый цвет был на всю ширину экрана, хз насколько это правильно, но просто если в контейнер все добавить, то как сделать фон на 100% экрана. Хотя и подобные сайты по типу первого варианта видел. Ну второй способ, так выглядит, как я и описывал

denzeroneYT
Автор

ваш любимый не lightcoral, но lightsalmon :)

PavelMikhalkevich
Автор

Приём, приём. Хух, интересно, но не понятно 🙂 Едем дальше. Пока что не в потоке, до конца нет понимая потока, гугл мне в помощь или на втором круге видео войду в поток 🙂

МихаилВедерников-ьш
Автор

Крайне странный подбор неймингов в 1 варианте. Я обычно использую 2 вариант, но все секции всё ровно оборачиваю во wrapper. Он как правило 100% по ширине. Для чего он нужен? Слои вашего сайта. Модалки это один слой, wrapper это другой слой. И мы всегда понимаем, всё что находится внутри wrapper, никак не перекроет модальное окно. Я считаю что при верстке надо предусмотреть это. Так как в будущем, появляются тултипы, мессаги т.п. И для каждого подобного типа надо выделить свой пул z-index. Обычно это: основной слой (контент сайта), слой модальных окон, слой алертов, слой тултипов. В идеале еще и в переменные вогнать.

mexvision-