День 4. А нафиг нам картинки?
Привет друзья. Быстро летит время. Совсем недавно у старшего начали выпадать молочные зубы (смотрим фото) и я это запечатлел просто супер-удачно 
Получилось очень интересно, в стиле ретро.
На фоне черно-белой фотки так и просится какая-нибудь надпись. Однако я сколько не ломал голову, так и не смог придумать ничего путного. Может кто из вас поможет?? В любом случае – буду признателен.
А вот и новые 10 уроков:
PS: ориентировочно у нас впереди еще 2 дня. Если получится, то выложу завтра и послезавтра. Сами видите – не успеваю.
Ура! Вот и "четвертая серия"! Даешь наку в массы
Опечатался
Даешь науку в массы! Должно было быть...
Не опечатался, а "очепятался"
Вот только закончил третий, ну буду ломать стереотипы, сразу за следующий.
Давай давай
Подпись: Папа, а у меня скоро такие-же, как у тебя клыки вырастут? (шутка).
Не не пойдет.
Я хочу больше такую, общую фразу. Не завязанную на мне или ком то из ближних. Будто эту картинку я нашел в нете и пацана этого вообще не знаю.
Так ведь это задумывалось, как обращение вампиренка к Дракуле.
По настоятельной просьбе Сереги. Коммент - к фотографии Сергеевича-старшего. "Только не лишайте меня мяса, яблок и не отпускайте к деффченкам, они меня не любят, "сепелявого и беззубого"....ЫЫЫЫЫЫЫЫЫЫ. Как вариант - "А чем грызть гранит науки???".
ВО! Отлично!
Не первый раз закачиваю и перекачиваю РАР-чики, проблем-с с архиватором или криво качается? И чем плохи ZIP-ы?
Лучше задать вопрос - чем RAR лучше?
Я использую RAR по нескольким причинам:
1. Больше функционал
2. Лучше сжимает (основная причина)
3. Надежнее
Это то, что пришло ко мне с опытом. Раньше я использовал и то и то. Потому как зипы были популярнее и не надо было ставить лишний софт. Но сейчас рары стали популярнее. Поэтому у него все основные плюсы.
Сергей, есть вопрос:
В твоих уроках идут классы - в HTML
и в CSS . После того, как я занялся уроками плотно, я стал просматривать структуру интересных мне (с точки зрения оформления) сайтов, и заметил, что некоторые сайты используют классы и , некоторые идентификаторы и , а некоторые и дикий винегрет из обоих вариантов.Суть вопроса:
Какая разница между классами и идентификаторами? В чем их преимущества и слабости?
Я раньше тоже использовал индификаторы и винигрет
Но пару лет назад перешел полностью на классы. Так как сделал у себя в голове четкое распределение - зачем одни, и для чего другие.
Разница следующая. Индентификаторы и классы:
1. Идентификаторы должны быть уникальны, то есть использоваться ТОЛЬКО один раз в HTML коде страницы. Классы можно использовать сколько угодно раз на странице.
2. Идентификаторы используются вместе с JavaScript (так как для него нужны именно уникальные переменные в некоторых случаях)
3. Еще идентификаторы используются для задания якорей (потому как они тоже должны быть уникальны)!!! А раньше они задавались через атрибут name у ссылки.
4. Идентификатор имеет более высокий приоритет чем класс. То есть если мы пропишем для одного и того же блока в идентификаторе зеленый цвет для текста, а в классе красный цвет - цвет будет зеленым.
Вот собственно и все основные отличия.
Однако если мы будем нарушать правила и использовать идентификатор несколько раз на странице - браузер все поймет и будет обрабатывать код нормально.
Но это уже будет не правильный код и по моему не валидный.
Поэтому при написании кода помните эти простые истины и ваш код на сайте будет намного аккуратнее.
Правильно ли я понимаю:
Если мой div будет использовать подключаемые скрипты java, то ему надо задавать "id". Если же div обрабатывается только CSS, то достаточно класса?
Ну практически. В некоторых случаях для работы скриптов достаточно и класса, но иногда скрипты работают только с id.
На будущее, Java - это не JavaScript.
Java разработан компанией Sun (ныне принадлежит Oracle).
JavaScript разработан Бренданом Айком (Netscape Navigator).
По сути это два разных языка программирования
Даешь пятый урок! Иначе каждый час буду удалять по одному видео :D.
Выкладываю уже... Скоро придет письмо.
Что Вы можете сказать по поводу среды разработки NetBeans и Brackets? И что бы Вы посоветовали юзать в верстке и дальнейших веб-разработках???
Brackets довольно интересный вариант. Очень похож на саблайм, но с русским и, наверное, новичкам более удобный. Так там есть живой просмотр.Следующий курс (обучение HTML с нуля) я планирую попробовать сделать на нем - новичкам понравится.
NetBeans - никогда не использовал.
Здесь с разгона не ответишь - подумать надо. Вопрос не так прост как кажется.
Спасибо большое! Уроки супер! Сергей Вы молодец!))) Желаю Вам удачи, всегда позитива, и крепких зубов Вашим парням
)
Спасибо. Зубы уже выросли - здоровые лопаты такие
Добр-бобр 
Надпись: ну купи сшоколафку
Попробуйте загрузить свои видеоуроки на яндекс диск. Это классный сервис с виртуальным диском ...
https://disk.yandex.ua/?auth&source=main-nonlogin
Извините, вопрос личного характера.
Зачем вы выкладываете эти видеокурсы? (я не спорю, курсы хорошие, полезные, мне в том числе)
Почему вы тратите время в пустую на эти уроки, без выгоды для вас?
..если вы можете "работать" в этой сфере, приэтом зарабатывать, нежели записывать эти курсы без малейшей выгоды для вас, только минус - трата времени.
Мне нравится это. При том я делаю как бесплатные курсы, так и платные. Так что трата времени не в счет - мне приятно это делать
Спасибо!!!
Серёга МОЛОДЧИНА... Так-держать!!!!
"Стоматологу лучше зубы не показывать!... правда, папа?"
Это подпись к фото....)))))
Сергей! а мне лучше не показывать Ваши уроки... Теперь не сплю по ночам, грызу гранит азов CSS. Ибо сие есть для меня настолько новое и ( до Ваших уроков НЕДОСТУПНОЕ!!!) очень ЖЕЛАЕМОЕ! Я вообще-то алюминиевый чайник в этом деле, но однажды наткнулся на WysiWyg и поверил, что тоже могу делать нечто, похожее на сайт. На уровне дилетанта нечто и получалось... даже опубликовал, и таким же дилетантам как и сам это НЕЧТО нравилось... Но чем больше я увлекался этим визивигом, тем больше понимал, что без знания CSS выше чайника не прыгнешь! В моем возрасте веры в то, что я смогу разобраться в этом деле не было ... и вдруг Ваши уроки!!!
Теперь вот вижу свет в конце тоннеля и очень надеюсь на результат!
Первые три дня обучения прошел на одном дыхании, правда пока как мартышка щелкаю на незнакомые термины в надежде что со временем ( а его у меня предостаточно... ) завеса тайны падет и с них... с Вашей помощью!
Еще раз благодарю за НАУКУ!
С уважением, Сергей.
Я так скоро лопну от гордости
Спасибо!
Здравствуйте, Сергей!
У меня возникли пару вопросов:
1) Правильно я понимаю, что вместо картинок лучше использовать код (когда это возможно), как в примере с картинкой headline.png, которую заменили кодом?
2) Имеет ли значение наличие/отсутствие пробела перед фигурными скобками? Например:
div.menu ul{margin:...;} div.menu ul li {display:...;}или как здесь
div.footer span {margin: 0 20px;} div.clear{clear: both;}Спасибо за уроки!
1. Нет, не всегда. Иногда такое может сильно грузить процессор пользователя.
2. Имеет только в плане оптимизации файла стилей. Весит немного меньше, а так - по барабану.
К фото:
...Хорошо быть с зУбками,
ровными, не лопатою...
Как хочу - посвИстаю, где хочу - поАкаю...
Сергей, такой практический вопрос.
Я, к примеру, в свое время учил немецкий язык, а не английский.
Поэтому на "чужом" языке речь на слух не воспринимаю. Приходится просто запоминать написание тегов визуально...
Так вот: есть ли смысл, во-первых, составить для себя некий словарь из этих тегов с описанием их значения?
А второй вопрос возникает из первого: Может, стоит перенести на отдельные карточки и более крупные элементы из таких тегов, для составления "шапок", заголовков, обрамления статей и прочего? И использовать их как "кирпичи" для построения общего дома-сайта?
Эти вопросы риторическими являются лишь отчасти, - мне интересно для себя выяснить, насколько эффективной может быть подобная методика для более быстрого самообучения. Или лучше сразу все делать собственными ручками?
Кстати, платформа CSS как раз и нацелена на блочное построение сайтов: взял фото и залил через ридер, так же вставил готовый блок текста.
Лучше сразу всё ручками. Так быстрее всего запоминается.
В скором будущем CSS уже будет не только блочной, но и FLEX вёрсткой.
Привет из Австрии ;)
Серега, отличные уроки, просматривал много курсов по HTML и CSS, но всегда чего-то не хватало или было не досказанно, у тебя все доходчиво и ясно, рад что нашел твои уроки ;)
Извиняюсь если есть ошибки и Спасибо за уроки
Спасибо.
Сергей, большое спасибо за уроки! Надпись к фотке как вариант такая: "ЗубНая Осень"
Очередную серию уроков, ждал с нетерпением! СПАСИБО БОЛЬШОЕ!
Пожалуйста друзья!
Я по уважительной причине первый урок пропустил. Как можно картинки и иконки для создания сайта скачать?
https://yadi.sk/d/m82DOhjEnHLsE
Спасибо за помощь!
Огромное спасибо за Эти уроки! Четвёртый день прошёл на ура=)))) Начинаю реально обдуманно всё делать=))) Огромное вам Спасибо! Вопрос: Можно ли сразу все уроки получить! Хотелось бы возможно заучить, пройти курс дважды для хорошей сцепки=)
Извените но я не получил 3й день занятий)!
Надпись можно вставить: "За что???"
) спасибо за уроки
у меня что то пошло не так
благодарю за новые уроки))
Добрый день, Сергей. Пожалуйста, скиньте ссылку на видеокурс по редактору кода Sublime Text3
Сергей, не сочтите за труд скиньте ссылку на видеокурс по работе редактором кода Sublime Text3
Серега привет!!!
C праздничками!!!
Вчера за вечер освоил 4 урока ))) СПАСИБО !!! курс здоровский !!!
у меня не получается background: linear-gradient - ну не отображается с браузере и все тут !!!
windows 10 x 64
Главная
Тренинг
Шаблоны
Контакты
Стань профессиональным верстальщиком всего за 2 месяца и зарабатывай по 30 000 рублей!
<p> Смотрите здесь!</p>
CSS
div.afisha {
padding: 20px 50px 0 50px;
margin-top: 20px;
background: linear-gradient(
90deg,
#c16a8a 100px,
#a367ba 100px, #a367ba 200px,
#2b798f 200px, #2b798f 300px,
#76a7ac 300px, #76a7ac 400px,
#93ae65 400px, #93ae65 500px,
#dbb16f 500px,);
background-color: #f2f2f2;
background-size: 600px 10px;
}
Спасибо
Сергей! Я очень расстроен, так как нет поддержки с вашей стороны! Уже четвертый день пишу, а ответа нет! И вы хотите, что бы у вас купили вторую часть. Во первых, - нет помощи в первой и во вторых - вы даже не объяснили, вернее не указали, что там будет и т.д.
А покупать кота в мешке.... сами знаете...
Блин. Новый год же был)))
Извиняюсь)
По поводу фотки: немного ироничная подпись -"Думаете нам, вампирам легко?"
По вопросу скачивания:пришлось лечить файл.
По поводу занятий: Не успеваю проходить, скачиваю авансом. Уже супер-мега в 6-м занятии, а я застрял у истоков.Проблема в 10-м винде, не могу подобраться к созданию файла HTML. Также проблемы личного характера (смена работы,+ у друга несчастье). Завтра подойду к товарищу, он волокет в компах, попробуем сделать или 7 или XP. Оттуда можно проще подобраться к HTML.
Я тоже на 10. Номер винды и HTML совершенно не при чём.
Добрый вечер!
Я тоже извиняюсь, не подумал об этом!
Тогда помогите решить одну проблему.
Урок №40.
Решил по вашему примеру сделать флаг России! Вроде все нормально, но в браузере Сафари при 100% размере в место белого цвета появляется черный. Смена размера, так же меняет цвет. В остальных только при смене размера. Как сделать так что бы цвет не менялся. Да и еще, float - нужен в этом случае!
Спасибо!
.rus {
width: 31px;
height: 24px;
float: left;
margin: 50px;
border: #999 solid .5px;
background: -webkit-linear-gradient(#fff 8px, #00247d 8px, #00247d 16px, #cf142b 16px, #cf142b 24px);
background: -mz-linear-gradient(#fff 8px, #00247d 8px, #00247d 16px, #cf142b 16px, #cf142b 24px);
background: -o-linear-gradient(#fff 8px, #00247d 8px, #00247d 16px, #cf142b 16px, #cf142b 24px);
background: linear-gradient(#fff 8px, #00247d 8px, #00247d 16px, #cf142b 16px, #cf142b 24px);
}
Не все браузеры поддерживают ещё градиенты. Сафари какой версии?
И при увеличении - что значит? Имеешь ввиду масштабирование страницы средствами браузера?
FLOAT к градиентам вообще никаким боком не относится. Можно не использовать.
Да, масштабирование!Когда, я добавил 0px, то все начало работать нормально.
background: -webkit-linear-gradient(#fff 0px, #fff 8px, #00247d 8px, #00247d 16px, #cf142b 16px, #cf142b 24px);
Правда на форуме ребята сказали, что все размеры в коде заданы статически, поэтому когда изменяешь размер блока фон не влазит. По этому не знаю что и думать, что правильней?
Так пробуй проценты. В чем проблема?
А вообще - при таком масштабировании никто не проверяет. Так как браузеры каждый по своему обрабатывает этот процесс.
Большое спасибо Вам, за уроки!!!
Пожалуйста.
комент к фото:"Я вот тут стою, а чего я тут стою, подскажи" и этот взгляд)))))
Дяденька помогите найти в траве мои зубы.Мы с Мамой и братом искали не нашли.
Поел бы редьки, да зубы редки.
Не по зубам мне Ваши орешки.
Зуб даю!
Всё впереди!
Не ешьте таблетки!
Ооооооооо! Чувак! ты просто супер спасибо тебе за все. Благодарю за то что ты трудишся так снимаеш, фотографируеш, записываеш и за все, все что ты для нас делаеш спасибо!
Ну можно мне icecream пап! Мхм так себе получилась)
Подскажите где ошибка????
.fon{
background: #fff;
border: 1px solid #ccc;
border-top: none;
padding: 40px;
}
.block{
width: 440px;
}
.anons {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 3px;
padding: 20px;
}
Нету
Спасибо за уроки. Очень Вам благодарен!
А насчет подписи для фотографии, незнаю к сожалению!
#Denis_Zhelakovich
Большое спасибо за уроки! Очень помогли разобраться в некоторых вопросах.
У меня почему не работает linear-gradient. В чем может быть дело ?
А параметр Alt у вашего фото всё еще "Это настоящий Я".)))
мне кажется туда таки и просится надпись "печенки есть???"