Решил стать фронтэндером. Оцените верстку.
3557 повідомлень
3557 повідомлень
#11 років тому
Спасибо за ответы!UniText, я противник использйовани Бутстрапа при обучении. Тут все писал сам, ручками, кроме скрипта плавного скролла и слайдера(хотя кнопочки пришлось прикручивать свои). Бутстрап начну использовать, когда буду брать по 3-4 заказа в неделю

pettson, до этого делал только мелкие правки в шаблонах Вордпресс и то, методом тыка. А тут в августе сел с целью научиться и понимать, и вот, только 3 дня назад перешел от теории к практике) (впереди посилання)
1132 повідомлення
3557 повідомлень
51 повідомлення
#11 років тому
Круто =) Я только не согласна с aside в качестве блока для иконок, всё-таки он должен использоваться для сайдбаров, и заданием классов абсолютно ко всем параграфам.
Почти у всех верстальщиков (у вас в т.ч.) вижу, что зачем-то в nav вставляют ul, это неверно, nav должен состоять из ссылок.
В целом действительно замечательная вёрстка, сложно поверить, что новичок))
3557 повідомлень
#11 років тому
Mideliya, спасибо за ответ)Про aside - когда смотрел курсы на codeschool, там говорилось о таких тэгах, как footer, header, aside, что их можно использовать не только глобально, но и локально, например, если вы пишите твиттер, то в каждом блоке микросообщения будет свой футер и хэдер, так же и с асайдом.
Надо почитать подробнее спецификацию и точно уточнить этот вопрос, спасибо за наводку.
Про nav - тоже почитаю, заставили задуматься. :idea:
1613 повідомлень
#11 років тому
vicodin, В целом - очень хорошо, а для первой рботы так отлично но у меня один вопрос: На макете написано responsive... А сам макет ни разу не responsive. Может стоит сделать? Чтобы форма соответствовала содержанию.
51 повідомлення
#11 років тому
vicodin, не за что) Я так понимаю, на курсах имелось в виду несколько иное. К примеру, на каком-то форуме шапкой сообщения можно назвать дату-время отправки, сайдбаром - блок справа с аватаром, ником, информацией об авторе и ссылками аля "пожаловаться", а футером, соответственно, нижние ссылки после текстового поля. В любом случае aside содержит какую-то второстепенную информацию, но всё равно остаётся сайдбаром, хоть и "внутренним".
На истину в последней инстанции не претендую)
3557 повідомлень
#11 років тому
Mariya_web, спасибо за ответ!)я забыл тут указать, что макет делал фиксированной ширины, т.к. не хотел для первого раза заморачиваться настолько) Итак получилась не верстка, а готовый сайт(если приделать отправку данных с формы).
У меня впереди еще 3 тренировочных макета, второй я уже буду делать адаптивным, а третий и четвертый mobile-first + буду подключать sass.
Mideliya, даже со посилання так и не могу однозначно утверждать кто из нас с вами прав

Цитата:
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
1613 повідомлень
#11 років тому
vicodin, Да не за что,Антон. Пришла домой и посмотрела детально...
Антон, CSS файл, как я понимаю, позаимствовали?
Просто applet вы даже не использовали, хоть и описали.
Сразу все прописано... , понимание когда нужен класс, когда ID,
когда div, когда section,
в body интерлиньяж прописан, а не для конкретного параграфа, честно сказать, для первого раза CSS у вас уж очень профессиональный.
Что делает fancy box у вас?
А стиль zoom в теге body? Вы сразу уже поняли что делать, чтобы натянуть на CMS? Для чего он прописан - поделитесь. Вы ведь стили вынесли в CSS.Ни одной ошибки или бага. Все просчитано "до миллиметра". Вы либо гений, либо одно из двух.
Либо тут позаимствовано не только CSS.
3557 повідомлень
#11 років тому
Mariya_web, спасибо за комплимент о гение )У меня css закоментирован, там есть участок спосилання (первые 44 строчки),
И участок с закрашиванием плэйсхолдеров у инпутов и текстареи (405-421 строки).
Остальное сам.
Ошибки в JS проверял на посилання
Из js - сам сделал фильтр портфолио, а фэнсибокс, слайдер и смуф скролл - использовал библиотеки. На гитхабе указано в readme.
Фэнсибокс - работы в портфолио на макете - кликабельны.
1613 повідомлень
#11 років тому
vicodin, Супер. А zoom:1 для чего в body html файла? Мне уже просто интересно понять зачем это и как работает.
Цитата (vicodin):
Фэнсибокс - работы в портфолио на макете - кликабельны.А почему именно он? Почему не просто скрипт модального окна, если уж Bootsrap некошерно для обучения.
Только сейчас увидела... У вас ещё и слайдер в fancy box есть? Мега-круто.
/*global $, document */
var buttonAll = $('.works-button'),
buttonWeb = $('.works-button'),
buttonGraphic = $('.works-button'),
buttonArt = $('.works-button'),
worksWeb = $('.category-web'),
worksGraphic = $('.category-graphic'),
worksArt = $('.category-art'),
worksAll = $('.work-image-link'),
showOnly = function (cat) {
return function (evt) {
$('.work-buttons').children().each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
worksAll.hide();
cat.show('fast', function () {
cat.appendTo('.works-flow');
});
};
};
$(document).ready(function () {
"use strict";
// lightbox
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
// works filter
$(buttonAll).on('click', function () {
$('.work-buttons').children().each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
worksAll.show('slow', function () {
worksAll.appendTo('.works-flow');
});
});
$(buttonWeb).on('click', showOnly(worksWeb));
$(buttonGraphic).on('click', showOnly(worksGraphic));
$(buttonArt).on('click', showOnly(worksArt));
// slider
$(function () {
$('#slides').slidesjs({
width: 800,
height: 500,
callback: {
loaded: function(){
$('.slidesjs-pagination, .slidesjs-navigation').hide(o);
}
}
});
});
$('.control-next').click(function(e) {
e.preventDefault();
$('.slidesjs-next').click();
});
$('.control-prev').click(function(e) {
e.preventDefault();
$('.slidesjs-previous').click();
});
// smooth scroll
var hashTagActive = "";
$(".scroll").click(function (event) {
if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 600, 'swing');
hashTagActive = this.hash;
}
});
});
Запускающий скрипт - гроссмейстерски просчитан. Только что отправила его верстальщику с опытом почти в 10 лет. Он так не напишет. Даже с валидатором.
Это все сверстано за день?
3557 повідомлень
#11 років тому
Mariya_web, где?Не понимаю, в чем вы меня пытаетесь уличить)
Я нигде не утверждал, что фэнсибокс написан мною, вот его сайт посилання
А вот история коммитов: посилання (правда я в конце немного лишней пурги наделал, когда пытался захостить макет на гитхабе, поэтому там есть несуразные коммиты).
Или вы думаете я 42 коммита потихоньку методично добавлял, чтобы меня никто не уличил, что я пытаюсь кого-то обмануть на форуме в ветке оценки работ ?
Додатки:
1613 повідомлень
#11 років тому
vicodin, И все-таки для чего zoom? Уже просто интересно.
Цитата (Mariya_web):
Супер. А zoom:1 для чего в body html файла? Мне уже просто интересно понять зачем это и как работает.Он не в CSS - потому я и спрашиваю.
3557 повідомлень
#11 років тому
Mariya_web, я же вам прислал скриншот) и вопрос. Что за зум и где вы его нашли? У меня такого в css файле нет. Более того, проверил css слайдера и фэнсибокса, там тоже нет.
798 повідомлень
#11 років тому
Mariya_web,Правда интересно где вы zoom:1 нашли, покажите 
А вообще используется (использовался) для какого-то фикса c IE
1613 повідомлень
#11 років тому
И на будущее: ресетовский код выносится в отдельный файл, для того, чтобы не заставлять тех, кто возьмет вашу верстку читать со 100500 строки.b0nn1e, В самом начале HTML файла. Он там один в body. посилання
Цитата (vicodin):
Не понимаю, в чем вы меня пытаетесь уличить)
Я нигде не утверждал, что фэнсибокс написан мною, вот его сайт ]http://fancyapps.com/fancybox/
Я знаю где его сайт ) Это довольно старая штука.
Я про запускающий скрипт (точнее лежит запускающим), который был написан очень опытным гуру-фронтендером, который совершенно свободно владеет Java.
Форкать проект не буду, скачивать частями не хочется.
Для первого сайта за день - нереальный уровень, что сказать... Ну удачи, Антон







