Определяем высоту и ширину окон и элементов с помощью JavaScript

Determining the height and width of windows and elements using JavaScript

Привет друзья, очередная небольшая заметка, в которой я постараюсь максимально разобрать тему определения ширины и высоты окон и элементов с помощью javascript. Вся загвоздка в том, что бывают ситуации когда нужно определить размер определенного элемента, который в свою очередь может быть динамическим, либо в зависимости от размера экрана делать определенные действия. В общем в своей … Read more

Какие ошибки в верстке недопустимы? 23 Важных совета

Привет, я думаю каждый начинающий либо более менее уже состоявшийся верстальщик рано или поздно должен вывести для себя несколько важных правил которые нельзя допустить или стоит придерживаться. Я назвал статью какие ошибки недопустимы, но по факту речь пойдет и об ошибках и о принципах при которых процесс создания шаблона становится максимально приятным и более простым. … Read more

Размеры экранов для адаптивной верстки: все необходимые брейкпоинты

Размеры экранов для адаптивной верстки - все брейкпоинты

Сознаюсь честно, давно уже назревал этот пост о том какие размеры экранов нужно учитывать при адаптивной верстке. Назревал этот пост по той причине, что я и сам будучи начинающим Frontend разработчиком не до оконца понимал какие размеры экранов нужно учитывать. С опытом я пришел к тому, какие размеры являются правильными, чем собственно я сегодня очень … Read more

Что такое миксины и как с ними работать? Scss Примеры

Sass и scss миксины

Миксины – страшное слово которое лично меня с самого начала как-то даже пугало. Сперва, когда я решил все-таки подробно узнать, что это такое, то возникло двоякое чувство. Первое говорило мол, а зачем они я ведь могу и без них сделать все максимально четко, а вторая мысль проскакивала, круто это ведь можно писать меньше кода, который … Read more

Mobile First — что это? Концепция, примеры, фреймворки, книги

mobile-first что это? Примеры

Я уже давно хотел обсудить тему Mobile First, хотя сам о ней у знал буквально полгода назад. Сегодня правда не все еще пользуются этой фишкой, а те, кто пользуется просто пожинает плоды и получает бонусы как от поисковых систем, так и от пользователей. И ниже я расскажу и покажу как работает эта концепция, где этому … Read more

Полное руководство по CSS Grid (Grid шпаргалка)

css grid полная шпаргалка

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

Полная шпаргалка Flexbox CSS с примерами

Самая полная инструкция по Flex box

Решил разобраться раз и навсегда что такое Flexbox? Сейчас расскажу и покажу. Но сперва теория, но будет и практика. На самом деле, это достаточно новая модель верстки, которая позволяет решить множество проблем, которые когда-то казались очень сложными. Лично для меня раньше самым непростым заданием казалось прижать footer ко дну. Если страница огромная, то переживать на … Read more

Как сделать адаптивную css верстку новичку

Как сделать адаптивную верстку новичку

Возможно ты только начал верстать, а возможно ты уже профессионал, который хочет подкрепить свои знания – и в том и в том случае ты найдешь пользу из ниже предоставленного материала. Сегодня я бы хотел пройтись по теме адаптивной html верстки, где ты узнаешь, как быстрее научиться делать адаптивную верстку, и при этом чтобы твое дело … Read more

Как пользоваться Prepros, что это и где скачать?

Prepros программа для сборки html проектов

Если ты верстаешь, то ты точно в курсе, как важно, чтобы твоя рабочая среда помогала тебе ускорить разработку твоего приложения. То мы используем Subline Text 3 с кучей плагинов, среди которых Emmet, TAG и другие им подобные. Глянь что нужно для того, чтобы стать профессиональным Front-end разработчиком. То бывает используем Gulp который собирает проект сам, … Read more

Учимся работать с переменными в SCSS

Как работать с переменными в sass scss

Если ты только начал осваивать scss или еще не решился, но уже близок к этому то попав на этот блог, ты попал в правильное место. Сегодня я постараюсь рассказать и показать, как работать с переменными в scss, в прошлой статье мы уже разобрались как правильно компилировать scss, поэтому в дальнейшей работе у нас не будет … Read more