cim643
Syllabus — Front End Fundamentals
This is the main document for the CIM 443/643 course at University of Miami, Fall 2022.
🗓 Classes on Tuesdays and Thursdays, from 12:30 to 1:45 pm.
| Lecturer | |
|---|---|
| Vinicius Sueiro | vss43@miami.edu |
Last updated on Dec 6, 2022. This document is subject to change.
About the Course
This course focuses on the job-ready skills and production workflow techniques in high demand for front end web developers. Students will learn, practice and demonstrate the skills and principles needed to make effective use of these technologies.
Course Goals
By the end of this course, students should be able to:
- Materialize ideas as interactive websites
- Collaborate with development teams efficiently
- Apply computational thinking skills to other fields
Course Topics
In order to reach the desired goals, students will learn concepts and techniques related to the 3 core technologies of the web (with an emphasis on the last one):
- 🧱 HTML (to define structure and content)
- 🎨 CSS (to apply visual styles)
- ✨ JS (to create interactions)
This course also covers tools that help us organize and scale up our projects:
- CodeSandbox (to write code without installing stuff)
- React (to organize your website into components)
Optionally:
- Vercel (to easily deploy your website)
- Visual Studio Code (to write code as files in your own computer)
- GitHub (to collaborate with others – and your future self)
- Google Domains (to rent a friendly name, like “example.com”)
All tools are free (or provide a free version), except Google Domains. 💸
Course Timeline
We will not learn everything at once. Instead, this 16-week course is split into 5 steps. Each step builds on top of what we learned from the previous one. Here is what this progression looks like:
After a couple of weeks of introduction, students begin working on projects. There are 3 individual projects (of increasing complexity) – and students will have around 3 weeks to create each one of them, from idea to coding.
Presentation week
At the end of each project step, we have presentation week – imagine this to be you 3× during the semester:
On presentation week, both classes of that week will be dedicated to presentation and discussion of projects. Half of the students present on Tuesday and half on Thursday. Each student has about 5 minutes to present their project and get feedback.
After the presentation, students are free to adjust the project (based on that feedback) and submit it for grading (prior to the beginning of the first class of the following week).
Course Content
The following tables briefly describe what we will be doing during class (“Content”) and what you are expected to do before each class (“Preparation”).
Introduction
| Week | Date | Preparation | Content | Materials |
|---|---|---|---|---|
| 1 | Aug 23 | Discussing course goals, topics, tools, timeline & grading | ||
| Aug 25 |
Watch this to learn how the “cloud” is actually a very tangible thing
Watch this, from 5:13 to 41:54, to learn how computers cleverly represent numbers, text, color, images & even emoji
Sign up for CodeSandbox |
Exploring the anatomy of the web:
servers (back end) & clients (front end)
Coding the simplest website (HTML) |
||
| 2 | Aug 30 |
Watch this to quickly grasp the full jargon of web development
Watch this to hear from a pro how problem solving is more relevant than memorizing |
Coding a website with a simple style (CSS) |
Topics |
| Sep 1 |
Pick a website you hate using
Pick a website you love using |
Analyzing examples & discussing improvements | Sandbox |
Assignment: 🔍 Analysis
Pick a website you hate using.
Pick another website you love using.
For each of them, submit the following:
• 📱 Screen capture or recording
• URL (https://example.com)
• What do you use it for?
• Why do you hate or love using it?
• How could it be improved?
• How could those improvements be implemented?
Due Sep 6, via Google Forms (exceptionally).
First Project: Personal Site
| Week | Date | Preparation | Content | Materials |
|---|---|---|---|---|
| 3 | Sep 6 |
Watch this, from 52:35 to 1:52:34, to better understand the potential of HTML & CSS
Read this to remember humans are behind all technology |
Presenting project goals, deliveries and due dates
Coding a minimalist personal site (one page) |
Planning example
Sandbox (pre-coded) Sandbox |
| Sep 8 | Read this to learn how to structure whole pages with meaningful HTML tags | Coding a more complex personal site (multiple pages) | Sandbox | |
| 4 | Sep 13 | Plan your website |
✨ In person ✨
Translating your content into a semantic (meaningful) HTML structure |
|
| Sep 15 | Read this to better understand the basics of CSS | Translating your sketch into CSS properties and values | Sandbox | |
| 5 | Sep 20 | Take note of 1-3 tasks you need help with | Pairing up with classmates to help each other (instructor may intervene) | Sandbox (pre-coded) |
| Sep 22 | Pairing up with classmates to help each other (instructor may intervene) |
Sandbox
Sandbox (pre-coded) Sandbox (pre-coded) |
||
| 6 | Sep 27 | Sign up for a presentation slot (½ of the students) | Presenting your work & getting feedback | |
| Sep 29 | Sign up for a presentation slot (½ of the students) | Presenting your work & getting feedback |
Assignment: ✏️ Planning
Plan your website:
• What is its purpose?
• What is its content?
• What could it look like?
Due Sep 13, via Google Forms (exceptionally).
Assignment: 🎤 Presentation
Present your website (5 min):
• Goals
• Process
• Learnings
Due Sep 27 or 29, during class.
Sign up for a presentation slot ↗
Assignment: 💻 Submission
Submit your website:
• URL
• Screen capture or recording
• Answers to reflective questions about your project
Due Oct 4, via Google Forms.
Second Project: Quiz
| Week | Date | Preparation | Content | Materials |
|---|---|---|---|---|
| 7 | Oct 4 |
Watch this, from 41:54 to 1:25:18, to learn how to break complex tasks into simple step-by-step instructions
|
Presenting project goals, deliveries and due dates
Discussing algorithms, data types & structures |
Sandbox |
| Oct 6 |
Watch this, from 1:50:50 to 2:25:40, to learn the basics of JavaScript
|
Coding a simple quiz with JavaScript | Sandbox | |
| 8 | Oct 11 | Plan your website | Coding a quiz with a score & lots of questions | |
| Oct 13 | 🚫 No class | |||
| 9 | Oct 18 | Take note of 1-3 tasks you need help with | Pairing up with classmates to help each other (instructor may intervene) | |
| Oct 20 | Pairing up with classmates to help each other (instructor may intervene) | |||
| 10 | Oct 25 | Sign up for a presentation slot (½ of the students) | Presenting your work & getting feedback | |
| Oct 27 | Sign up for a presentation slot (½ of the students) | Presenting your work & getting feedback |
Assignment: ✏️ Planning
Plan your website:
• What is its purpose?
• What is its content?
• What could it look like?
Due Oct 11, via Google Forms.
Assignment: 🎤 Presentation
Present your website (5 min):
• Goals
• Demonstration (classmates as play testers, ideally)
• Learnings
Due Oct 25 or 27, during class.
Sign up for a presentation slot ↗
Assignment: 💻 Submission
Submit your website:
• URL
• Screen capture or recording
• Answers to reflective questions about your project
Due Nov 1, via Google Forms.
Third Project: Dynamic Site
This project should be conducted in pairs.
Rubric
You (and your pair) are free to choose the topic of your project. Here is how you will be evaluated (pairs will obtain the same grade):
- Usage of semantic HTML: 3 points
- Usage of responsive CSS: 3 points
- Usage of third-party APIs or JS libraries: 4 points
No idea what to build?
Here are a few project ideas to get you started.
| Week | Date | Preparation | Content | Materials |
|---|---|---|---|---|
| 11 | Nov 1 |
Presenting project goals, deliveries and due dates
Coding a simple dynamic page with Fetch API |
List of free APIs
Sandbox Sandbox |
|
| Nov 3 | Exploring a variety of APIs and libraries | List of free libraries | ||
| 12 | Nov 8 | Plan your website | Coding a dynamic page with Google Sheets API (write) | Sandbox |
| Nov 10 | Coding a |
|||
| 13 | Nov 15 | Take note of 1-3 tasks you need help with | Debug session (online through Zoom! 💻) | |
| Nov 17 | Take note of 1-3 tasks you need help with | Debug session | ||
| 14 | Nov 22 | Submit a question via Google Forms | Answering most common questions from students (Zoom recording) | |
| Nov 24 | 🚫 No class | |||
| 15 | Nov 29 | Take note of 1-3 tasks you need help with | Debug session | |
| Dec 1 | Sign up for a presentation slot (½ of the students) | Presenting your work & getting feedback |
Assignment: ✏️ Planning
Plan your website:
• What is its purpose?
• What is its content?
• What could it look like?
Due Nov 8, via Google Forms.
Assignment: 🎤 Presentation
Present your website (5 min):
• Goals
• Process
• Learnings
Due Dec 6, during class.
Sign up for a presentation slot ↗
Assignment: 💻 Submission
Submit your website:
• URL
• Screen capture or recording
• Answers to reflective questions about your project
Due Dec 9, via Google Forms.
Looking Ahead (Cancelled)
⚠️ This step of the course was cancelled, to make room for project 3 presentations.
| Week | Weekday | Date | Preparation | Content |
|---|---|---|---|---|
| 16 | Tue | Dec 6 |
Optional
Read about no-code tools, AI “copilots”, native apps, 3D environments, tangible interfaces or the so-called “Web3” |
Discussing the future of the web – and paths we can take |
| Thu | Dec 8 | 🚫 No class |
Assignment: 🔭 Self-reflection
Submit a self-reflection considering:
• Your experience learning about web development
• How it relates to your future pursuits (personal & professional)
The format could either be:
• Written (up to a page); or
• Video recording (up to 5 minutes)
Feel free to include sketches, photos or any other media.
Due Dec 9, via Google Forms (instead of Final Exam).
Grading
I reserve the right to adjust the final grade according to class participation, attendance, overall quality of work, etc.
Grading Breakdown
| Step | Assignment | Points |
|---|---|---|
| Introduction | 🔍 Analysis | 5 |
| First Project | ✏️ Planning | 10 |
| 🎤 Presentation | 10 | |
| 💻 Submission | 10 | |
| Second Project | ✏️ Planning | 10 |
| 🎤 Presentation | 10 | |
| 💻 Submission | 10 | |
| Third Project | ✏️ Planning | 10 |
| 🎤 Presentation | 10 | |
| 💻 Submission | 10 | |
| Looking ahead | 🔭 Self-reflection | 5 |
Grading Scale
| Grade | Points |
|---|---|
| A+ | ≥ 97 |
| A | ≥ 93 |
| A- | ≥ 90 |
| B+ | ≥ 87 |
| B | ≥ 83 |
| B- | ≥ 80 |
| C+ | ≥ 77 |
| C | ≥ 70 |
| D+ | ≥ 65 |
| D | ≥ 60 |
| F | ≥ 0 |
Office Hours
Students may schedule individual sessions with the instructor. Please use Calendly to pick a specific time slot for our remote (Zoom) meeting.
Policies
Religious Holy Day Policy
It is the student’s obligation to provide faculty members with notice of the dates they will be absent for religious holy days. Students are responsible for material covered in class regardless of their presence. The University’s complete Religious Holy Day Policy can be found in the current Bulletin.
Attendance Policy
Class attendance is critical to the success of this hands-on class, including class participation in discussions and completion of in-class assignments. All students are responsible for material covered in the classroom regardless of their presence; therefore, check the Blackboard class for announcements and assignment requirements and due dates. Do not email your instructor to find out what has been posted to Blackboard. Late work will not be accepted unless an extension has formally been requested prior to the deadline and approved on a needs only basis.
Recording Policy
Students are expressly prohibited from recording any part of this course. If any recordings are available to students they are intended to supplement the classroom experience. Students are expected to follow appropriate University policies and maintain the security of passwords used to access recorded lectures. Recordings may not be reproduced, shared with those not in the class, or uploaded to other online environments.
If the instructor or a University of Miami office plans any other uses for the recordings, beyond this class, students identifiable in the recordings will be notified to request consent prior to such use. Instructors are the copyright owner of the courseware; individual recordings of the materials on Blackboard or Microsoft Teams and/or of the virtual sessions are not allowed; and that such materials cannot be shared outside the physical or virtual classroom environment.
Honor Code & Plagiarism Statements
Students enrolled in this course are expected to abide by the University of Miami Honor Code. The purpose of the Honor Code is to protect the academic integrity of the University by encouraging consistent ethical behavior in assigned coursework. Academic dishonesty of any kind, for whatever reason, will not be tolerated.
No honest student wants to be guilty of the intellectual crime of plagiarism, even unintentionally. Therefore, we provide you with these guidelines so that you don’t accidentally fall into the plagiarism trap.
Plagiarism is the taking of someone else’s words, work, or ideas, and passing them off as a product of your own efforts. Plagiarism may occur when a person fails to place quotation marks around someone else’s exact words, directly rephrasing or paraphrasing someone else’s words while still following the general form of the original, and/or failing to issue the proper citation to one’s source material.
In student papers, plagiarism is often due to:
- Turning in someone else’s paper as one’s own
- Using another person’s data or ideas without acknowledgment
- Failing to cite a written source (printed or internet) of information that you used to collect data or ideas
- Copying an author’s exact words and putting them in the paper without quotation marks
- Rephrasing an author’s words and failing to cite the source
- Copying, rephrasing, or quoting an author’s exact words and citing a source other than where the material was obtained.
- Using wording that is very similar to that of the original source, but passing it off as one’s own.
The last item is probably the most common problem in student writing. It is still plagiarism if students use an author’s key phrases or sentences in a way that implies they are their own, even if they cite the source.
Well-Being Resources & Support
As you complete your coursework, consider how you can maintain your health and well-being as a top priority. To help you become familiar with the many programs and services available on campus, review the information collected on the Student Well-Being and Resiliency website available at miami.edu/well-being.
Please reach out to me or any of the resources listed on the site if you need assistance or support throughout the semester.