Identifying and Understanding HTML and Sass (CSS), Using a Review Article of Nosferatu.

This small exercise will help students understand, identify, and build upon a website example given from this repository. This repository will be given to the students who are advanced enough on web development, UI design, coding on HTML, CSS or Sass, and JavaScript in the Basic Programming Class.

What will students learn

• Have students understand the UI design given in the website.
• Have students better grasp the needed ideas of both arts and coding using web development.
• Have the students understand the JavaScript microlibrary code.
• Have the students understand either the CSS styling code, or the Sass predecessor.
• Have students understand the small details found in the HTML5 code.
• Have students work together, which later on (if optional) be given a small project based on this repo.

This exercise will better shape students mind on teamwork, code reading, and UI (and possibly UX) design.

Pre-requisite before moving on

• An understanding of the three (3) (arguably four (4)) fundamental coding languages for web design: HTML, CSS or Sass, and JavaScript.
• Basic understanding of UI (and not needed but helpful, UX) design.
• Basic understanding of text-editors such as VScode or Notepad++.
• A small team (more than 2).
• And lastly, an open-mind.

Materials

• Laptop/Desktop
• Text editor (VScode, Notepad++, Atom)
• Paper (Lined or printer)
• A small team

Procedure

1. Have the team look through the code in the HTML and CSS (Sass) code files.
2. Have students illustrate that code using pencil and paper, trying to recreate that website from scratch.
3. When students are complete with the task, check illustrated work with a teacher and/or teacher's aid, it will be graded for accuracy, timing, and the use of teamwork.
4. When all students are finished, they may look at the website at hand.
5. Have the student reflect on what has been accurate or what was inaccurate.

Website

When all students have recreated the website by paper, you can now display the site to the students: https://nosfuratu-article-example.netlify.com/.

Recognition

I will like to thank Christopher Wallis and Stephen Shaw for the Scroll-Out JavaScript microlibrary. This will engage the students into creating more websites.

---

(c) Hansel Chávez

All media (photos, videos, articles and other) found in this repo or projects directory(s) may or may not be from the creator of the repo. All credential will be added if necessary.

This can be used for educational purposes without permission.