Задать вопрос

Оцените первую верстку из psd макета?

Добрый вечер!

Неделю назад прочитала пост HTML Academy. Плохо или Хорошо? В комментариях нашла шаблон для верстки (https://drive.google.com/file/d/0B9yl2hPpnbyVT1RfW... Тоже проходила бесплатный курс от HTML Academy. Решила попробовать сверстать.
Слайдер и адаптивность не сделала.
Прошу оценить мою первую верстку и указать на ошибки.
На выполнение ушла примерно неделя.
Спасибо!

Выложила в интернете: aditii.esy.es

Не прошло и полгода как я доделала мобильную версию :)
И еще один сделала шаблон - aditii.esy.es/Modest
Если буду искать практику, стаж, стоит ли показывать эти шаблоны?

критика приветствуется :)
  • Вопрос задан
  • 2810 просмотров
Подписаться 6 Оценить 4 комментария
Пригласить эксперта
Ответы на вопрос 6
soprun
@soprun
Software Architecture
Начало хорошие :)
Советы на будущие:
Не используй position: absolute без необходимости.
top, right, left, bottom - Это очень плохо.

margin - это отступ от блока.
Например есть горизонтальный список и необходимо у каждого элемента списка сделать отступ с лева и права.

...

nav a:first-child {
    padding-left: 19px;
    margin-left: 128px;
}

К примеру у bootstrap есть класс container который центрует содержание страницы.

...

.hero-shirt {
    margin: 67px 0 0 78px;
}

Здесь нужно было использовать padding, так как по логике элемент должен идти внуторь, а не изнутри.

...
Так же очень важно использовать модульную сетку grid. Она помогает позиционировать элементы на страницы.
...

nav a:after {
    content: "|";
    padding-left: 18px;
}

Лучше было бы использовать как то так:

nav {
    /* ... */
}
nav ul {
    text-align: center;
    letter-spacing: -.3em; /* убирает пробелы между inline */
}
nav li {
    display: inline-block;
    letter-spacing: normal; /* нормализует пробелы */
}
nav li + li {
    border-left: 1px solid white;
}
nav a {
    display: block;
    color: white;
    padding: 0 10px; /* Но лучше использовать EM */
}


Не используй локальные шрифты!
Ну для начало, это не легально..
Есть специальные сервисы по хранению шрифтов. Они бесплатны и не нарушаешь права/лицензию и т.д.
Google Fonts,
fonts.com

А вообще ты умничка и у тебя очень здорово получилась первая работа, желаю дальнейших успехов ))
Ответ написан
Комментировать
@CapeRatel
Вот как у меня выглядит.
prntscr.com/8gsyzy

Сайт видимо "настоящий мужик", поэтому убежал влево.
Для первого раза очень хорошо. Но отцентровать нужно.
Ответ написан
@mr_ko
Javascript, Node.js. React.js, Vue.js, Wordpress
Для начала попробуйте ее выгрузить на какой то бесплатный хостинг.
Ответ написан
sabramovskikh
@sabramovskikh
1) папка CSS маленькими буквами надо css
2) шрифт прогнать через этот сервис Нужно несколько видов, не один ttf
3) joxi.ru/brRYOLxf94NlA1 меню по центру
4) joxi.ru/4AkGwv6Fz5YdAq кнопку тоже joxi.ru/LmGjQ8WhapdJrl joxi.ru/YmENe85SRj6B26
5) эффекты наведения на ссылки, на меню
6) joxi.ru/v29Ne4YS5OqJAG лишний комментарий скорее всего
7) joxi.ru/EA46e9YsVKq1mb комментарий сделать на одном уровне, добавить классы к батону и инпуту, задать стили для классов
8) joxi.ru/8235ebYiRXGJrO лучше делать классы, а не id, сделать не h1, а h2 или h3 (h1 только один должен быть на странице)
9) в футере заменить h2 на h3
10) joxi.ru/p27oeOYIwD6x27 товары разъезжаются некрасиво
11) не по центру joxi.ru/BA0ReMYfENzzmy на большой экране
Вообще сделано для первого раза очень хорошо
Ответ написан
@oaksaudio
Для первого раза очень хорошо)
Ответ написан
Комментировать
@DiasNurdicanov
Я бы дописал max-width для контейнера, для ссылки с логотипом написать display:block и обернуть это все, убрать inline js в отдельный файл, item-price и item-buy сделать inline-block и обернуть в div,
для display: inline-block дописать vertical-align
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы