Поиск по сайту

Здравствуйте. Оцените пожалуйста данную верстку. Судить строго! https://alex2033.github.io/ Использовал: сетку с поддержкой флексов (Flexbox Grid) На данный момент пока самый сложный макет, который верстал. Реализованы: - слайдеры - плавные переходы по ссылкам на якори - адаптивное меню Toggle(специально верхнюю часть хедера делал через флоаты, т.к. с флексами Toggle несколько конфликтует) - табы - scroll up - всплывающие окна и прочее

Добрый день. Кто верстает на ноутбуке, подскажите пожалуйста, как обстоит дело с удобством. Возникла необходимость поработать удаленно, но еще ни разу не сталкивался с вёрсткой на ноутбуке. Планирую покупать ноут с самым большим разрешением и самым большим экраном. Как верстаются сайты с разрешением в 1920px и более? Насколько вообще большая разница со стационарным компом с хорошим монитором? Не уверен, что правильно выбрал раздел. Если ошибся, перекиньте тему пожалуйста в нужный раздел.

Техническое задание. Базовые требования Платформы: Windows, Mac OS X. Браузеры IE8 и выше Chrome последние 2 версии Firefox последнии 2 версии Opera последнии 2 версии (на базе движка Blink) Safari последнии 2 версии В качестве эталонного браузера использовать Chrome или Firefox. Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий. Соответствие макету Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера. Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них. Стандарты HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно. В кажестве исходного кода для CSS использовать препроцессор LESS или SASS. Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия. Сброс стилей В качестве сброса стилей браузера использовать Normalize.css. Javascript: За основу взять фреймворк jQuery версии 1.11.х или 2.x.x. Для поддержки HTML5 тегов в IE можно использовать код: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--> Допускается применение modernizr если потребуется. Ширина сайта Стандартная ширина сайта - 960px. Grid За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка) Изменение/наполнение контентом Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал". Особености макета 1. Шапка 1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее. 1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок. 1.3. Возможно добавится пару языков. 1.4. Поле поиска 1.4.1. В поле поиска добавить placeholder с текстом "Искать...". 1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю. 1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете. 2. Слайдер в 4 колонки. Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним. Требуется поддержка для touch-устройств для прокрутки контента. 3. Промо-слайдер 3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот) 3.2. Кол-во слайдов может быть больше или меньше, чем на макете. 3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна). 3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера. 3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке. 3.6. Слайдер не влияет на 4 колонки под ним. 4. Контент 4.1. Меню слева. Пукты меню могут быть в несколько строк длиной. 4.2. Центральная колонка 4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером. 5. Футер 5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook. 5.2. Оступ снижу дл футера сделать высотой 20px. Дополнительно Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха. WYSIWYG Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE Масштабирование страниц Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение. Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem" HTML код Кодировка – utf-8 Структурный, не комментируемый код Семантическая разметка на уровне грамотного использования тегов. Имена классов и идентификаторов – осмысленные, на усмотрение разработчика. Классы служат для привязки оформления, идентификаторы – скриптов. LESS/SASS код Структурный, отбивка табами. Комментариями обозначены начало/конец крупных модулей/блоков разметки. Допускается использование вендорных префиксов. Стили для IE вынесены в отдельные CSS файлы, если они потребуются. Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation) Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика Javascript код Структурный, отбивка табами. Имена переменных осмысленные, на усмотрение разработчика. Снабжен комментариями: описаны назначения методов/классов функций условий. Для объемных задач используется ООП, для простых – обычные функции. Код должен быть без ошибок. При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика. Изображения Имена файлов осмысленные, на усмотрение разработчика. Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows) Малые изображения и иконки объеденить в спрайты. Для полноцветных RGBA картинок можно использовать инструмент Stitches Для векторных изображений иожно использовать IcoMoon Организация структуры файлов и папок HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов. Стили в папке - /css/ SASS/LESS в соответствующей папке - /sass/ или /less/ Javascript - /js/ Изображения оформления - /images/ Изображения содержания - /thumbs/ или /pic/ Шрифты - /fonts/ Наглядный пример Краткий вариант - только директории: Полный вариант -- директории и файлов: Удачи в обучении Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта design 1 - splat.zip

Помогите пожалуйста) Оцените мой первый сайт) Сойдет ли для новичка ? Я только учусь. Решил сверстать с PSD шаблона. Начал изучать недавно ! Ссылочка на мой сайт (Это мой первый сайт)

Всем привет. Недавно я самостоятельно сверстал макет и хотелось бы услышать мнение опытных верстальщиков. Приму и учту любой совет и критику. Ссылка на скачивание файлов: https://drive.google.com/drive/folders/0B4tKSvnDdweseFpjbERpUnVJcHM?usp=sharing <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> </head> <body> <header> <div class="container"> <div class="heading clearfix"> <div class="icon_menu"> <i class="fa fa-align-left " aria-hidden="true"></i> </div> <ul class="menu"> <li> <a href="#">Main</a> </li> <li> <a href="#">Demos</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Shortcodes</a> </li> </ul> <div class="search"> <i class="fa fa-search" aria-hidden="true"></i> </div> </div> </div> <hr class="line"> </header> <section> <div class="container"> <div class="content clearfix"> <div class="social_network"> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i> <i class="fa fa-pinterest-p" aria-hidden="true"></i> <i class="fa fa-google-plus" aria-hidden="true"></i> <i class="fa fa-tumblr" aria-hidden="true"></i> <i class="fa fa-rss" aria-hidden="true"></i> </div> <div class="tagline"> <hr class="line_titles"> <h5>your tagline will go right here</h5> <hr class="line_titles"> </div> <div class="logo"></div> <div class="photo"></div> <div class="text_content"> <h2>This is a headline just right here</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <br> <br> <br> <span class="left_quotation">&#8220;</span> <span class="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip mollit anim id est laborum. </span> <span class="right_quotation">&#8221;</span> <br> <br> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> </div> </section> <section> <hr class="line"> <div class="container"> <div class="mail clearfix"> <div class="logo_mail"></div> <div class="to_top"> <i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i> <p>TO TOP</p> </div> <div class="subscription"> <label for="#">Subscribe now to receive our daily updates.. <br> <input type="email" placeholder="Enter your e-mail here..." > <input type="submit" value="SUBSCRIBE"> </label> </div> </div> </div> </section> <section> <div class="container"> <div class="instagram"> <a href="#">MY INSTAGRAM</a> </div> </div> </section> <footer> <div class="container"> <p class="copy">@2015 - Copyright All Right Reserved. Designed and Developed by Whoever.</p> </div> </footer> </body> </html> @import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,400i|Montserrat:400,700|Permanent+Marker|Playfair+Display:400,400i'); *, *::after, *::before { margin:0; padding:0; } .clearfix:after { content:''; display: table; width: 100%; clear: both; } div{ box-sizing: border-box; } section:last-of-type{ background-color: #808080; } section:first-of-type{ background: url(img/bg.png); } .container{ width: 1170px; margin: 0 auto; } .heading{ position: relative; overflow:hidden; height:70px; } .icon_menu{ margin-top: 25px; color: #c4c4c4; float: left; border-right: 1px dotted #c4c4c4; padding-right: 30px; margin-left: 20px; } .icon_menu i{ margin-top: 1px; } .icon_menu:hover{ color: #22bb66; } .menu{ list-style:none; position: relative; top: 38%; left:40%; float:left; } .menu li{ position:relative; left:-39%; float:left; border-right: 1px dotted #c4c4c4; padding:0 30px; } .menu a{ color: #4d4d4d; display:block; text-decoration:none; text-transform:uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; } li:last-child{ border: none; } .menu a:hover{ color: #22bb66; } .menu a:active{ position: relative; top: 3px; } .search{ float: right; margin-top: 25px; color: #c4c4c4; border-left: 1px dotted #c4c4c4; padding-left: 30px; margin-right: 20px; } .search:hover{ color: #22bb66; } .line{ border: none; background-color:#eaeaea; color: #eaeaea; height: 2px; } .content{ text-align: center; } .social_network{ padding-top: 67px; color: #c7c7c7; } .social_network i{ padding-right: 11px; } .social_network i:hover{ color: #000000; } .tagline h5{ font-size: 12px; font-weight: 400; font-family: 'Permanent Marker' , sans-serif; } .line_titles{ border: none; height: 2px; width: 102px; background-color:#22bb66; color: #22bb66; position: relative; margin-top: 20px; } .line_titles:first-child{ left: 380px; top: 10px; } .line_titles:last-child{ float: right; right: 380px; bottom: 28px; } .logo{ background: url(img/logo.png); width: 333px; height: 112px; position: relative; left: 414px; margin-top: 20px; } .photo{ margin-top: 100px; height: 566px; background: #595959; } .text_content{ background: #ffffff; margin-top: 67px; margin-bottom: 57px; padding: 62px 30px; border: 2px #eaeaea solid; } .text_content h2{ font-family: 'Montserrat', sans-serif; font-size: 30px; color: #262626; } .text_content p{ margin-top: 44px; font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #4a4a4a; } .quote { font-size: 18px; font-style: italic; padding: 0 144px; display: block; } .left_quotation{ font-size: 92px; color: #dcdcdc; font-style: italic; padding-right: 82px; float: left; } .right_quotation{ font-size: 92px; color: #dcdcdc; font-style: italic; float: right; position: relative; top: 22px; } .mail{ padding: 54px 0; } .logo_mail{ background: url(img/logo.png); width: 333px; height: 112px; float: left; margin-right: 35px; } .subscription { font-family: 'Montserrat', sans-serif; color: #666666; font-size: 15px; float: right; border-right: 1px dotted #c4c4c4; border-left: 1px dotted #c4c4c4; padding: 5px 80px; margin-right: 67px; margin-top: 5px; } input[type="email"]{ border: 1px solid #eaeaea; background-color: #f8f8f8; width: 347px; height: 42px; font-family: 'Montserrat', sans-serif; font-size: 20px; padding: 17px; margin-top: 15px; box-sizing: border-box; outline: none; } input[type="submit"]{ background-color: #22bb66; width: 103px; height: 42px; border: none; border-radius: 0 5px 5px 0; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 12px; text-align: center; box-sizing: border-box; position: relative; bottom: 3px; right: 3px; outline: none; } input[type="email"]:focus{ border: 1px solid #22bb66; } input[type="submit"]:hover{ color: #22bb66; background-color: #ffffff; border: 1px solid #22bb66; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; padding-top: 5px; } ::-moz-placeholder { /* Firefox 19+ */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } :-ms-input-placeholder { /* IE 10+ */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } :-moz-placeholder { /* Firefox 18- */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } .to_top{ border-radius: 50%; background-color: #f1f1f1; width: 109px; height: 109px; float: right; text-align: center; font-family: 'Montserrat', sans-serif; color: #262626; font-size: 13px; font-weight: 700; padding: 30px 0; } .instagram{ text-align: center; height: 341px; padding: 170px 0; } .instagram a{ background-color: #22bb66; width: 167px; padding: 20px 25px; border-radius: 5px; font-family: 'Montserrat', sans-serif; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; } .instagram a:hover{ color: #22bb66; background-color: #ffffff; border: 2px solid #22bb66; } .instagram a:active{ position: relative; top: 3px; } .copy{ font-family: 'Playfair Display'; color: #262626; font-size: 14px; font-style: italic; text-align: center; padding: 22px 0; }

Подскажите как правильно такое нарисовать? Может быть canvas? Пробовал на нем, но линия какая-то размытая получается и не знаю как в произвольных точках этой кривой рисовать круги Возможно за это отвечает какой-нибудь jquery плагин? Вот скриншот http://www.fotolink.su/v.php?id=03b5a0c45dd734ab866094f13307e8a5

Добрый день всем! Я с довольно элементарным вопросом, но я в замешательстве. На определенном этапе обучения перешел с ознакомлением Photoshop для нарезки макета. Почти все нюансы и тонкости понял. Но столкнулся с одной элементарщиной, которую не уловил из видеоуроков, а именно - как мне добыть фоновое изображение(к примеру, не повторяющиеся узоры, а фото... пейзаж) из макета, к примеру, из Header? Просто убрать все наложенные поверх слои и сделать экспорт изображения? Как-то этот нюанс я сам не понял до конца, а в видео, которые я смотрел, работа с фоном заключалась в вырезке как раз куска фона для цвета, или с узором.

То о чем я говорю представлено на скриншоте. Через padding-top по пикселям делал, как-то неудобно получается. Есть ли еще варианты?

Добрый вечер. Вот только закончил верстать свой второй адаптивный дизайн. Первый делал на бустрапе. Здесь же я решил использовать flexbox причем сразу же с сеткой. Вот что получилось: https://alex2033.github.io/ Оцените пожалуйста и покритикуйте, если есть что) P.s. Вот действительно практика - лучший инструмент обучения. Когда только начинал этот макет верстать, о флексах ничего не знал и не понимал как они работают. А щас чувствую себя этаким специалистом:DD

Начинающий верстальщик сделает вёрстку сайта бесплатно, по вашему psd макету, с возможностью добавить в портфолио. Знаю: html5, css3, адаптивную вёрстку, могу применять готовые скрипты на jQuery. Пишите на почту: [email protected]

Ищу верстальщика который не успевает выполнять все заказы, готов оказывать помощь в верстке из PSD макетов, за смешную цену Почта: [email protected]

Добрый день, нужно сделать слайдер в шапке сайта. Причем меняется только выделенная красной зоной область, то есть не вся шапка. Как сделать так, чтобы у слайдера не было фона? Должен быть прозрачным как на скриншоте.

Добрый вечер. Создал свой первый адаптивный сайт. Оцените пожалуйста! https://alex2033.github.io/ Есть несколько вопросов, которые возникли, пока верстал: 1) На телефоне при нажатии на любую ссылку возникает синее выделение на полсекунды,можно ли это как-то убрать или это стандартная тема для телефонов? 2) Не считается дурным тоном прописывать колонки бутстрапа следующим образом:col-md-3 col-sm-2? Вопрос к тому, что при небольших разрешениях я хочу, чтобы в портфолио в строку отображалось не четыре работы, а две например. 3) Стоит ли в секции, где представлены работы, делать наложение темного блока на изображение с текстом и иконкой плюса с помощью background-image, притом, что возникает необходимость прописывать для ховера !important? 4)Нужно ли прописывать медиа-запросы для нестандартных разрешений? Например, у меня в коде есть: min-width: 600px and (max-width: 768px) Стоит ли это прописывать?

Решил попрактиковаться в адаптивности. Что бы не верстать с нуля взял свёрстанный мною раньше интернетовский шаблон, слегка его модифицировал и сделал адаптивным. Оцените что получилось. http://chromov-adapt.zzz.com.ua/

Здравствуйте. Если вы учите верстку только, то можете добавляться в скайп, будет не скучно. У нас есть небольшая компания людей,изучающая совместно. Кому интересно - дам адрес скайпа.) Можно и профи, для закрепления знаний. мои знания - html css. учу js - только начала

Всем привет! Я начинающий верстальщик ищу работу, постоянную или на один проект. Удаленно. Умения: HTML5/CSS3; SASS, Bootstrap 3; JavaScript & jQuery (базовый уровень); Фиксированная\Адаптивная\Резиновая - верстка; Кроссбраузерная верстка; Понимание модульной верстки; При написании HTML кода соблюдаю семантику; Именование классов по методологии БЭМ; Навыки работы c веркторной графикой в формате SVG Поскольку у меня нет портфолио я не могу взять заказ на фрилансе, а в моем городе очень мало студий где новичку можна устроится на работу. Скажите с такими навыками можна взять заказ или устроится на работу? Сделаю для вас верстку Могу сверстать бесплатно, для того чтоб пополнить свое портфолио Готов на постоянное сотрудничество, если понравится мое исполнение. Мои контакты: e-mail: [email protected] skype: +380999470645 vk: https://vk.com/id180852321

Качественная верстка HTML/CSS/JS/JQuery Мои контактные данные: Skype: vetalil11 E-mail: [email protected] Работаю 6 дней в неделю На связи с 8:00 по Киеву Примеры работ: http://savindesign.ru/verstka/vsdl/ http://savindesign.ru/verstka/vsdl/all_ask.html http://savindesign.ru/verstka/scorista/ Отзывы на сайте weblancer https://www.weblancer.net/users/vetal_il/reviews/

Вот решил в тренировочных целях сверстать чего-нибудь. Потратил некоторую часть свободного времени на изучение Wordpress. Бесплатный шаблон нашёл на просторах интернета. Слегка его модифицировал на свой вкус. Вот что из этого вышло. Буду рад если услышу какие-нибудь конструктивные замечания, по вёрстке, функциональности и т.д. - Так сказать для учёта в будущем. http://chrome3.zzz.com.ua

Здравствуйте, добрые форумчане) Очень нужна Ваша помошью Нужно сделать такой календарь с выбором диапазона дат и выводом ниже, совершенно не вижу выхода Прикрутила плагин Jquery datapicker но он дает только выпадающее меню у инпута Очень надеюсь на Ваашу помощь

С удовольствием сверстаю Ваш сайт Вам нужен сайт, а мне работы в портфолио, давайте поможем друг другу) Верстаю адаптивно, кроссбраузерно с помощью bootsrapa и iquery плагинов Пишите: [email protected] skype: LizzyEra1 telegramm: +66945107303 vk: https://vk.com/eremizevich

Всем привет! Есть страница: http://krls.beta3.ceteralabs.com/ На ней баннер, который под видео, закрывает собой текстовый слайдер (подробнее во вложении) а браузере FireFox. В Chrom'е всё нормально. Подскажите, где тут CSS подправить можно? Ещё к странице подключено app.js , там тоже стили прописаны, но почему то для FireFox они не срабатывают. Помогите пожалуйста

Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: [email protected]

Привет, друзья и соратники. Наверняка подобные темы создавались не однократно здесь, поэтому заранее очень извиняюсь за плагиат =) Я занимаюсь дизайном сайтов (psd-фотошоп) уже несколько лет, всё устраивает, всё нравится. Очень давно хочу изучить верстку, но всё руки не доходили, то проекты, то еще какие-то дела, то лень =) Товарищ посоветовал начать изучение с видеокурса Петрова (Специалист по-моему называется). Что скажите? Насколько хороший курс? Просто хочется изначально получать грамотную информацию (я страшный перфикционист), чтобы потом не пришлось переучиваться. Посмотрел первые пару серий, вроде понравилось. Планирую после прохождения данных уроков, изучить Самоучитель Html и Css. Я иду правильным путем или возможно есть более информационные уроки? Заранее всем спасибо и хорошего дня.

Здравствуйте. Я начинающий верстальщик, и, в принципе, могу сверстать сайт по макету с нуля. Но я понятия не имею, как происходит наполнение моего сайта контентом, кто этим занимается, и какова моя роль как верстальщика в этом процессе. Должен ли я каким-то специальным образом подготавливать свою верстку, или это уже вне моей компетенции? И если да, то что конкретно я должен знать об этом, как простой верстальщик? С чего начать и где копать?

Здравствуйте. Столкнулся с такой проблемой: На стационарных компьютерах верстка отрабатывает нормально, а на мобильных браузерах нет. В мобильных браузерах средняя колонка занимает всего 50% ширины контейнера, предназначенного для нее. http://c3w.ru/fotogalereya/ - альбомы должны располагаться в два столбика, а на мобильных браузкрах располагаются в однин столбик. В общем ширина элемента со значением id="center" на мобильных устройствах почему-то меньше. Кто поопытнее: Подскажите пожалуйста в чем может быть дело и как эту проблему решить.