Учебный проект Создание сайта для начинающих (HTML & CSS) — различия между версиями
Материал из НГПУ им. К.Минина
| (не показано 12 промежуточных версий этого же участника) | |||
| Строка 8: | Строка 8: | ||
== Краткая аннотация проекта == | == Краткая аннотация проекта == | ||
| − | Проект ориентирован на учащихся средних классов, | + | Проект ориентирован на учащихся средних классов, предлагая им создать свой первый веб-сайт на тему, которая вызывает их интерес. В ходе проекта ученики будут изучать основы веб-разработки с использованием HTML и CSS. Важными аспектами проекта являются разработка материалов по оцениванию, обсуждение преимуществ использования проектного метода в обучении и поддержка процесса обучения для каждого участника. Проект способствует практическому обучению и развитию навыков веб-разработки, а также стимулирует творческое мышление учащихся. |
== Вопросы, направляющие проект == | == Вопросы, направляющие проект == | ||
| − | #Как создать | + | #Как создать веб-сайт, отражающий интересы учащихся и способствующий изучению основ веб-разработки? |
| − | #Какие темы и материалы должны быть включены в учебный контент? | + | #Какие темы и материалы должны быть включены в учебный контент, чтобы обеспечить полноценное освоение HTML и CSS? |
| − | + | ||
===''Основополагающий вопрос''=== | ===''Основополагающий вопрос''=== | ||
| − | Как создать | + | Как создать веб-сайт детям, с использованием HTML и CSS, который позволит ученикам изучать и практиковать основы веб-технологий, учитывая их собственные интересы, и обеспечит эффективное оценивание и поддержку процесса обучения? |
===''Проблемные вопросы''=== | ===''Проблемные вопросы''=== | ||
| − | #Как | + | #Как эффективно оценивать и поддерживать успехи учащихся, предоставляя конструктивную обратную связь и дополнительные ресурсы? |
| − | + | #Как адаптировать материалы и методы обучения для удовлетворения разнообразных потребностей и уровней знаний начинающих веб-разработчиков? | |
| − | #Как адаптировать материалы и методы обучения | + | |
#Как оценить эффективность проектного метода в обучении HTML и CSS и определить, насколько он способствует активному участию и достижениям учащихся? | #Как оценить эффективность проектного метода в обучении HTML и CSS и определить, насколько он способствует активному участию и достижениям учащихся? | ||
| Строка 32: | Строка 31: | ||
План проведения проекта "Создание сайта для начинающих (HTML & CSS)" в разрезе недель: | План проведения проекта "Создание сайта для начинающих (HTML & CSS)" в разрезе недель: | ||
| − | <strong>Неделя | + | <strong>Неделя 1-2: Введение в веб-разработку и основы HTML</strong> <br> |
| − | + | - День 1: Знакомство с проектом.<br> | |
| − | + | - День 2-3: Основы HTML.<br> | |
| − | + | - День 4-5: Работа с текстовыми элементами.<br> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | - День 1 | + | |
| − | - День | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | - День 4-5: | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <strong>Неделя 3-4: Глубже в HTML и введение в CSS.</strong> <br> | |
| + | - День 6-7: Работа с изображениями и ссылками.<br> | ||
| + | - День 8-9: Основы CSS.<br> | ||
| − | + | <strong>Неделя 5-6: Дизайн и продвинутые темы CSS</strong> <br> | |
| + | - День 10-11: Макет и бокс-модель.<br> | ||
| + | - День 12-13: Работа с цветами и шрифтом.<br> | ||
| − | + | <strong>Неделя 7-8: Проектная работа и закрепление</strong> <br> | |
| + | - День 14-16: Закрепление материалов и проектная работа.<br> | ||
| + | - День 17-18: Консультация и разработка сайта.<br> | ||
| + | - День 19-20: Оценка и презентация проектов.<br> | ||
| + | == Визитная карточка проекта == | ||
| + | [https://docs.google.com/document/d/1YPzzRb9OKVsHxbPvVPq9TGFlztv9Mq3S/edit?usp=sharing&ouid=108194767847873518904&rtpof=true&sd=true Визитная карточка] | ||
| + | == Публикация преподавателя == | ||
| + | [[Изображение: Публикация преподавателя320.png | 600px]] | ||
== Пример продукта проектной деятельности учащихся == | == Пример продукта проектной деятельности учащихся == | ||
| − | + | [[Результат исследования учащихся по проекту Создание сайта для начинающих (HTML & CSS)]] | |
== Материалы по формирующему и итоговому оцениванию == | == Материалы по формирующему и итоговому оцениванию == | ||
| + | 1. [https://docs.google.com/document/d/1MiiAMRt1DvFLNqniv6bfdTf6L7GpphQ0O4WHrt4aYkY/edit?usp=sharing Итоговая рефлексия для учеников на самоанализ] <br> | ||
| + | 2. [https://docs.google.com/document/d/17WAcRLjYao3TVzmx6kO882tOB8iSYki6uxsf6m3_2C4/edit?usp=sharing Анкета] | ||
== Материалы по сопровождению и поддержке проектной деятельности == | == Материалы по сопровождению и поддержке проектной деятельности == | ||
| + | 1. [https://docs.google.com/document/d/1s4TauolJloP2caUuQRDQxvknhG5bhwHurmRGnaLIS_Y/edit?usp=sharinghttps://docs.google.com/document/d/1s4TauolJloP2caUuQRDQxvknhG5bhwHurmRGnaLIS_Y/edit?usp=sharing Тестовые задания по HTML - Неделя 1: Введение в веб-разработку и основы HTML] <br> | ||
| + | 2. [https://docs.google.com/document/d/1kRlMpKgqZIwfqn21TrRgTvS10f4I5wwGK_ksnGIwhbI/edit?usp=sharing Тестовые задания по HTML и CSS - Неделя 3-4: Глубже в HTML и введение в CSS]<br> | ||
| + | 3. [https://docs.google.com/document/d/12DHgr7Ic0fPVU7KdxWIuelUFHVU5rtcid_rGMp1IoNM/edit?usp=sharing Тестовые задания по продвинутым темам CSS - Неделя 5-6: Дизайн и продвинутые темы CSS]<br> | ||
== Полезные ресурсы == | == Полезные ресурсы == | ||
| + | 1. [https://www.labirint.ru/books/687374/ HTML и CSS. Разработка и дизайн веб-сайтов] <br> | ||
| + | 2. [https://developer.mozilla.org/ru/docs/Web/Tutorials mdn web docs] <br> | ||
| + | 3. [https://flexboxfroggy.com/#ru flexbox froggy] <br> | ||
| + | 4. [https://www.labirint.ru/books/528885/?p=2155&admitad_uid=7abd61a1a51cdcbd929c3bce8b2eb4fd&publisher_id=1002797 Дэвид Макфарланд: Новая большая книга CSS] <br> | ||
== Проекты с аналогичной тематикой == | == Проекты с аналогичной тематикой == | ||
| − | + | 1. [https://www.wiki.mininuniver.ru/index.php/%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D1%91%D0%BC_%D1%81%D0%B0%D0%B9%D1%82 Учебный проект Создаём сайт]<br> | |
| − | + | 2. [https://www.wiki.mininuniver.ru/index.php/%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82_%D0%92%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82_%D1%81%D0%B2%D0%BE%D0%B8%D0%BC%D0%B8_%D1%80%D1%83%D0%BA%D0%B0%D0%BC%D0%B8 Учебный проект Веб-сайт своими руками]<br> | |
[[Категория:Проекты]] | [[Категория:Проекты]] | ||
Текущая версия на 05:55, 7 января 2024
Содержание
- 1 Автор проекта
- 2 Предмет, класс
- 3 Краткая аннотация проекта
- 4 Вопросы, направляющие проект
- 5 План проведения проекта
- 6 Визитная карточка проекта
- 7 Публикация преподавателя
- 8 Пример продукта проектной деятельности учащихся
- 9 Материалы по формирующему и итоговому оцениванию
- 10 Материалы по сопровождению и поддержке проектной деятельности
- 11 Полезные ресурсы
- 12 Проекты с аналогичной тематикой
Автор проекта
Предмет, класс
Информатика, 7-9 класс
Краткая аннотация проекта
Проект ориентирован на учащихся средних классов, предлагая им создать свой первый веб-сайт на тему, которая вызывает их интерес. В ходе проекта ученики будут изучать основы веб-разработки с использованием HTML и CSS. Важными аспектами проекта являются разработка материалов по оцениванию, обсуждение преимуществ использования проектного метода в обучении и поддержка процесса обучения для каждого участника. Проект способствует практическому обучению и развитию навыков веб-разработки, а также стимулирует творческое мышление учащихся.
Вопросы, направляющие проект
- Как создать веб-сайт, отражающий интересы учащихся и способствующий изучению основ веб-разработки?
- Какие темы и материалы должны быть включены в учебный контент, чтобы обеспечить полноценное освоение HTML и CSS?
Основополагающий вопрос
Как создать веб-сайт детям, с использованием HTML и CSS, который позволит ученикам изучать и практиковать основы веб-технологий, учитывая их собственные интересы, и обеспечит эффективное оценивание и поддержку процесса обучения?
Проблемные вопросы
- Как эффективно оценивать и поддерживать успехи учащихся, предоставляя конструктивную обратную связь и дополнительные ресурсы?
- Как адаптировать материалы и методы обучения для удовлетворения разнообразных потребностей и уровней знаний начинающих веб-разработчиков?
- Как оценить эффективность проектного метода в обучении HTML и CSS и определить, насколько он способствует активному участию и достижениям учащихся?
Учебные вопросы
- Как создать основную структуру HTML-документа и какие элементы необходимы для правильного форматирования веб-страницы?
- Как применить CSS-стили для управления внешним видом и макетом веб-страницы, включая шрифты, цвета и расположение элементов?
- Какие методы использовать для создания адаптивного дизайна веб-страницы, чтобы она отображалась корректно на различных устройствах и разрешениях экранов?
- Как организовать мультимедийный контент, такой как изображения и видео, на веб-странице с использованием HTML и CSS?
- Какие методы и лучшие практики существуют для тестирования и отладки веб-сайта, а также для обеспечения оптимальной производительности без использования JavaScript?
План проведения проекта
План проведения проекта "Создание сайта для начинающих (HTML & CSS)" в разрезе недель:
Неделя 1-2: Введение в веб-разработку и основы HTML
- День 1: Знакомство с проектом.
- День 2-3: Основы HTML.
- День 4-5: Работа с текстовыми элементами.
Неделя 3-4: Глубже в HTML и введение в CSS.
- День 6-7: Работа с изображениями и ссылками.
- День 8-9: Основы CSS.
Неделя 5-6: Дизайн и продвинутые темы CSS
- День 10-11: Макет и бокс-модель.
- День 12-13: Работа с цветами и шрифтом.
Неделя 7-8: Проектная работа и закрепление
- День 14-16: Закрепление материалов и проектная работа.
- День 17-18: Консультация и разработка сайта.
- День 19-20: Оценка и презентация проектов.
Визитная карточка проекта
Публикация преподавателя
Пример продукта проектной деятельности учащихся
Результат исследования учащихся по проекту Создание сайта для начинающих (HTML & CSS)
Материалы по формирующему и итоговому оцениванию
1. Итоговая рефлексия для учеников на самоанализ
2. Анкета
Материалы по сопровождению и поддержке проектной деятельности
1. Тестовые задания по HTML - Неделя 1: Введение в веб-разработку и основы HTML
2. Тестовые задания по HTML и CSS - Неделя 3-4: Глубже в HTML и введение в CSS
3. Тестовые задания по продвинутым темам CSS - Неделя 5-6: Дизайн и продвинутые темы CSS
Полезные ресурсы
1. HTML и CSS. Разработка и дизайн веб-сайтов
2. mdn web docs
3. flexbox froggy
4. Дэвид Макфарланд: Новая большая книга CSS
Проекты с аналогичной тематикой
1. Учебный проект Создаём сайт
2. Учебный проект Веб-сайт своими руками
