Ребята помогите! Вот не могу понять если на ноутбуке разрешение 1920х1080 и на телефоне разрешение 1920х1080 px.

Это физические пиксели у вас совпадают А в CSS и HTML и я больше чем уверен что они абсолютно не совпадают Потому на этапе верстки надо сразу предвидеть эти подводные камни чтоб вёрстка более менее смотрелась адекватна на разных устройствах потому надо делать адаптивную вёрстку  
Советую вам изучить @media и display: flex; могут вам сильно помочь в этом деле и указывайте размеры в % vh wv rem а не в  px

⚤

Разрешение одно 1920×1080 точек, а плотность разная. Кроме того, разговор о разрешении в пикселах не совсем верен. Каждая точка — три пикселя (красный, зеленый и синий).

Плотность это сколько точек на дюйм (длинны и ширины) экрана. Измеряется в DPI (произносится как ди-пи-ай) — сокращение для английского dots per inch.

Стандартное плотность экрана компьютера 72 DPI (×1). Для сравнения плотность при печати на бумаге. 150 DPI (> ×2) — черновая (тестовая) печать, 300 DPI (> x4) — стандартная, от 600 DPI ( > x8) — качественная

Retina это патентованно название технологии высокого разрешения от Appel. Плотность точек на таких экранах была изначально в два раза больше — 144 DPI. Что позволяет повысить четкость изображения.

Другие компании также применяют свои технологии экранов повышенной плотности. Она может быть выше стандартной в… ×1,5 (108 DPI), ×2 (144 DPI), ×3 (216 DPI), ×4 (288 DPI) раза больше. Именно так работает разрешение 1920×1080 на 13 дюймовом экране. Но при этом текст такой мелкий, что нужно устанавливать масштабирование экрана 150%. То есть по сути экран выводит тот же объем информации, что и 1280×720, но при в 1,5 раза большей четкости.

С телефонами все еще интереснее. Там для используется логическое разрешение (по сути постоянное масштабирование). Например, физическое разрешение iPhone X — 1125 x 2436, а логическое 375 x 812. Именно логическое разрешение определяет какая контрольная точка (breakpoint) из CSS будет использована.

Вывод изображений при этом делаться так. Если есть изображение, указанное именно для этого разрешения и плотности — используется оно. Если нет изображений высокой плотности, берется изображение подходящие под логическое разрешение и масштабируется до физического. Современные аппаратные решения способны это делать так качественно, что не всегда можно определить («без лупы»), что изображение изначально было в меньшем разрешении.

P.S. Дальнейшая специализация — Front-End Developer?

Обучение

• Джош Кауфман «Первые 20 часов. Как научиться чему угодно... быстро»
• HTML & CSS The Right Way.
htmlcsstherightway.org
• «Вёрстка — это не тупо.»
webmasters.teamdev.com/?ct=t(hamail_20170415)
• «Что должен уметь HTML-верстальщик?»
github.com/crecotun/ui-developer-skills
• «От нуля до героя фронтенда»
medium.com/russian/от-нуля-до-героя-front-enda-часть-1-f524d668f328
medium.com/russian/от-нуля-до-героя-фронтенда-часть-2-25f19e56eb29

Интерактивное обучение
• ru.learnlayout.com/
• htmlacademy.ru/program
• codebra.ru/

В игровой форме
• flukeout.github.io/ (изучение селекторов в CSS)
• flexboxfroggy.com/#ru (изучение flexbox в CSS)
• flexboxdefense.com/ (изучение flexbox в CSS)
• dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
• cssgridgarden.com/#ru (изучение gridbox в CSS)

Видеокурсы

• htmlacademy «Базовый HTML и CSS»
coursehunters.net/course/bazovyy-html-i-css-18-2017
• htmlacademy «Продвинутый HTML и CSS»
coursehunters.net/course/prodvinutyy-html-i-css-potok-2017
• htmlacademy «Профессиональный HTML и CSS Уровень 1»
coursehunters.net/course/professionalnyy-html-i-css-uroven-1-potok-26-fevralya-4-aprelya-2018
• htmlacademy «Профессиональный HTML и CSS Уровень 2»
coursehunters.net/course/professionalnyy-html-i-css-uroven-2-potok-15-yanvarya-21-fevralya-2018

Задачи для практики:
• htmlbook.ru/practical

Макеты для практики:
• drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSGticGREcUtkeGs
• freebiesbug.com/psd-freebies/website-template/
• symu.co/freebies/templates-4/
• dcrazed.net/free-photoshop-psd-website-templates/

Git Book
git-scm.com/book/ru/v1/

Гарвардской курс по программированию CS50
habr.com/post/426943/

пиксели меньше

Изменяются размеры пикселей, и скорее всего расстояние между ними, при увеличении размера экрана, тоже увеличивается. Потому что смотря на экран смартфона чёрной сетки не замечаю, а вот когда подхожу к телеку Full HD, то сетка уже очень хорошо видна.