Орг. предложения по поводу курсов

Есть организационное предложение для администрации и создателей курсов.
Возможно имеет смысл заканчивать курс не финальным заданием, а разбором авторского кода.
Придумывая итоговое задание, автор наверняка видел, по его мнению, оптимальное решение задачи. Как бы он её решал.
Слайд с разбором расположить после прохождения задания, тогда ученик увидит код учителя после решения задачи. Важно, чтобы выкладывался не просто код, а подкреплялся логическими размышлениями. Таким образом, у ученика будет формироваться не просто багаж операторов, но и логика - с чего начинать, на что обращать внимание.

Приведу примером код, решённого мной финального задания. Допустим он авторский, какие мысли следует донести до ученика (как мне кажется):

1) имеется сетка, относительно которой можно позиционировать элементы;
2) ширина и высота родительского элемента .scene - 260х260px, что соответствует
размеру поля внутри рамки. 
3) .scene имеет свойство position: relative; Значит логично его потомков 
позиционировать через absolute, тогда их смещение будет завязано за поле 
сетки, ограниченного рамкой (ближайшего родителя с relative позиционированием).
4) Слово находится на одной линии, значит смещение по вертикали для 
вертикальных элементов можно прописать общему классу .v  Поскольку буквы примыкают
к сетке нижним краем, то задаётся через bottom;
5) Если все элементы позиционировать через absolute, достаточно будет прописать
свойство общим классам .h .v 
6) Элемент .h3 имеет ширину 40px, его можно поставить для буквы H либо L.
Но для H надо смещение рассчитывать, принимая во внимание ширину вертикали,
т.е. left: 30px; (одна клетка + ширина вертикали). А для L достаточно
внести right: 20px;
7) Вертикальное смещение углового элемента можно рассчитать так:
 смещение задаём  от низа 40px(клетки)+50px(высота вертикали)-20px(толщина углового эл-та)
8) Изображение своей централью лежит на сетке, значит положение left равно
расстояние минус половина ширины рисунка (здесь мои математические ожидания
не оправдались на 1px).

Подход с разъяснениями своих размышлений не исключает ученических вариантов решений, как сказано в задании “приёмы, которые вам больше понравились”. Но у автора может быть более короткий путь, и мы так научимся оптимизировать код.

html {
    padding: 0;
}

body {
    margin: 0;
    padding: 20px;
}

.scene {
    position: relative;
    width: 260px;
    height: 260px;
    background: none;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
    display: inline-block;
    background: white;
}

/* горизонтальные элементы */
.h {
    position: absolute;
    width: 50px;
    height: 10px;
}

.h1 {
    left: 20px;
    bottom: 60px;
}

.h2 {
    left: 80px;
    bottom: 80px;
}
.h3 {
    right: 20px;
    bottom: 40px;
    width: 40px;
}

/* вертикальные элементы */
.v {
    position: absolute;
    bottom: 40px;
    width: 10px;
    height: 50px;
}

.v1 {
    left: 20px;
}

.v2 {
    left: 60px;
}

.v3 {
    left: 100px;
}

.v4 {
    left: 140px;
    
}

.v5 {
    left: 180px;
}

.v6 {
    left: 200px;
}

/* уголки */
.corner-top {
    position: absolute;
    right: 80px;
    bottom: 70px;
    border: 15px solid white;
    border-top-width: 20px;
    border-bottom-width: 0;
    border-top-color: transparent;
    background: none;
}

.corner-bottom {
    position: absolute;
    bottom: 50px;
    right: 80px;
    border: 15px solid transparent;
    border-top-width: 20px;
    border-bottom-width: 0;
    border-top-color: white;
    background: none;
}

/* лого */
.logo {
    position: absolute;
    top: 80px;
    left: 87px;
    width: 64px;
    height: 64px;
    background: url('/assets/course10/logo.png');
    
    
}
3 лайка

Что-то похожее будет, да. Спасибо!

Дабы не создавать отдельный топик, Виталий, откройте чуть-чуть карты и поведайте, что запланировано на ближайшее время? Можете даже сроки какие-то)?
П.С. Хотелось бы видеть

  1. JS в стиле подачи информации академии, ибо learn.ja… хороший ресурс, но сухая теория - это не хорошо,
  2. Работа с медиа-выражениями \ адаптив,
  3. Работа с ретинизацией (столкнулся с проблемой при адаптивной верстке, что разные картинки нужно грузить, а что и как и почему - до конца не понял),
  4. SVG продолжение :),
  5. ГРИДЫ

Такая вот хотелка)

4 лайка

Привет!

Всё, о чём в рассказали, задумано и часть сейчас разрабатывается. По срокам точно не скажу.

1 лайк

Тогда все дружно ждем)! Удачи и скорейшей реализации!

1 лайк

В плане “мелких удобняшек”. Думается будет весьма удобным возможность сворачивать окно редактора html.

Если в CSS редакторе много кода, одновременно не возможно видеть низ CSS-редактора и верхушку мини-браузера (приходится прокручивать туда-сюда). Утрачивается возможность сразу наглядно видеть изменения.
Если добавить сворачивание HTML-редактора, а CSS-редактор при этом будет занимать освободившееся пространство - будет, как мне кажется, “удобняшка”.

3 лайка

Про “удобняшки”.
Некоторые задания и особенно недоделанные испытания (97%, например) хочется положить в закладки, чтобы потом вернуться.

1 лайк