Difference between revisions of "Module 1"
| (100 intermediate revisions by 9 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | __NOTOC__ | |
| + | Module 1 introduces the fundamentals of HTML and CSS. You will first make a static document using HTML and CSS, and then you will make a portal to a DuckDuckGo search. This module is worth 80 points. | ||
| − | + | === Learning Goals === | |
| + | |||
| + | * HTML | ||
| + | * CSS | ||
| + | * Git | ||
| + | * VS Code | ||
| + | * HTML Forms | ||
| + | |||
| + | == Reading == | ||
| + | |||
| + | The following articles on the online class wiki textbook contain information that will help you complete the assignment. | ||
| + | |||
| + | * [[Git]] | ||
| + | * [[HTML and CSS]] | ||
| + | * [[HTML Forms]] | ||
| + | * [[VS Code]] | ||
| + | * [[FAQ - Mod 1]] | ||
== Assignments == | == Assignments == | ||
| − | |||
| − | + | === Write a Birthday Card === | |
| − | + | '''Write a birthday card to a friend or family member using HTML and CSS.''' Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas: | |
| − | + | * Make the background-color of the page baby blue and use purple ink to write a card to a little boy | |
| + | * Make the text big and include pictures of hearts | ||
| + | * Use a font with text shadows (more advanced) | ||
| − | + | Use this opportunity to experiment with the plethora of CSS properties. Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately. | |
| − | === | + | ==== AI-Powered Animation Requirement ==== |
| − | + | For this assignment, you are required to use an AI tool (e.g., ChatGPT, GitHub Copilot) to generate one creative CSS animation for your birthday card. This component is worth 10 points of the overall grade, split as follows: | |
| − | + | * '''Implementation (5 points):''' Integrate the AI-generated CSS animation into your birthday card so that it runs correctly. | |
| + | * '''Documentation (5 points):''' In your project's README file, document the AI tool you used, the prompt you gave, and how you applied the generated code. | ||
| − | + | Example prompts you could use include: | |
| + | * Generate CSS code to make a heart icon pulse using keyframes. | ||
| + | * How can I create a bouncing animation for text with CSS? | ||
| + | * Provide code for a smooth color-changing background animation. | ||
| − | + | You must implement the AI-generated code, ensure it works, and document its use in your project's README. | |
| − | |||
| − | + | ==== How to Edit Your File ==== | |
| − | + | Throughout this course we '''highly''' recommend using VS Code https://code.visualstudio.com/download, and have included tips for each module specific to VS Code. | |
| + | Visit the wiki page [[VS Code]] and check out the Module 1 section | ||
| − | ''' | + | '''Important Note:''' Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will ''not'' work. You need a plain text editor. |
| − | === | + | ==== How to View Your HTML Document ==== |
| − | + | Once you have ''birthday.html'', you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol. | |
| − | In | + | In Module 2, we will install a web server that serves up pages on the http:// and https:// protocols. |
| − | + | ==== Validation ==== | |
| − | ''' | + | '''Your birthday card and search portal pages must pass the W3C Validators for both HTML and CSS with no errors or warnings.''' You can upload your HTML to [https://validator.w3.org/ the HTML validator] and your CSS to [https://jigsaw.w3.org/css-validator/ the CSS validator]. |
| − | + | For more information on validation, see the HTML and CSS guide: [[HTML and CSS#Validation]] | |
| − | + | === Make a Portal to a DuckDuckGo Search === | |
| − | ''' | + | '''Write an HTML document containing a form that searches DuckDuckGo's web site.''' You should be able to type in a search term and have your form load the DuckDuckGo search page. In this HTML document you must also include this course's regrade policy to ensure that you have read it and understand it. [https://www.arl.wustl.edu/~todd/cse3300/regrade.html Regrade Policy] |
| − | |||
| − | |||
| − | + | # Visit [https://www.duckduckgo.com/ www.duckduckgo.com]. Search for something easy to spot in the URL, like "QUERY". | |
| + | # Look at the URL of the search page. What is the query variable? | ||
| + | # Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page. | ||
| + | |||
| + | - Additionally, we want you to copy/paste this course's regrade policy somewhere into this html document to ensure your familiarity. | ||
| + | |||
| + | === Git Tutorial === | ||
| + | |||
| + | Complete all of the levels of the Main and Remote sections of [https://learngitbranching.js.org/ this Git tutorial]. After you finish the tutorial, take two screenshots showing the completion of all of the levels of the Main and Remote sections. Place these two screenshots in your repo. | ||
== Grading == | == Grading == | ||
| − | + | We will be grading the following aspects of your work. There are 80 points total. | |
| − | + | ||
| − | + | ||
| − | + | '''Assignments (including code) must be committed to GitHub by the end of class on the due date. Commit early and often. Failing to commit by the end of class on the due date will result in a 0. | |
| − | + | ||
| − | + | ||
| − | + | # '''Birthday Card (35 Points):''' | |
| − | + | #* Correct usage of HTML and CSS in your birthday card (10 points). | |
| − | + | #*: ''Make sure that you use HTML for "content" and CSS for "appearance." Don't write inline styles: use a separate stylesheet and link your HTML file to it.'' | |
| − | + | #* Experimenting with at least 5 different CSS properties in your birthday card (10 points). | |
| − | + | #* Implementation of an AI-generated CSS animation (5 points). | |
| − | + | #* Birthday card and search portal pages pass the W3C validation for HTML 5 and CSS. (10 points). | |
| − | + | # '''Search Portal (10 Points):''' | |
| − | + | #* DuckDuckGo search portal is functional (9 points). | |
| − | + | #* Your search portal page includes the text of this course's regrade policy (1 point). | |
| − | + | # '''Account Creation and Version Control (10 Points):''' | |
| − | + | #* GitHub account created (2 Points) | |
| − | + | #* Module 1 repo created using the link provided on Piazza (2 Points) | |
| − | + | #* Account created on Amazon Web Services and an image file containing a screenshot of your account page pushed to GitHub. (4 Points) | |
| − | + | #* Files pushed to repo on GitHub using Git (2 Points) | |
| − | + | # '''Git Tutorial (20 Points):''' | |
| − | + | #* Two screenshots showing the completion of all of the levels of the Main and Remote sections placed in your individual assignment repository. | |
| − | + | # '''AI Reflection (5 Points):''' | |
| − | + | #* Document use of AI for this assignment in the AI Reflections as described in [[AI Best Practices]] (5 Points) | |
| − | + | ||
| − | + | ||
| − | |||
| − | |||
[[Category:Module 1]] | [[Category:Module 1]] | ||
[[Category:Modules]] | [[Category:Modules]] | ||
Latest revision as of 13:07, 23 June 2026
Module 1 introduces the fundamentals of HTML and CSS. You will first make a static document using HTML and CSS, and then you will make a portal to a DuckDuckGo search. This module is worth 80 points.
Learning Goals
- HTML
- CSS
- Git
- VS Code
- HTML Forms
Reading
The following articles on the online class wiki textbook contain information that will help you complete the assignment.
Assignments
Write a Birthday Card
Write a birthday card to a friend or family member using HTML and CSS. Use HTML to define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas:
- Make the background-color of the page baby blue and use purple ink to write a card to a little boy
- Make the text big and include pictures of hearts
- Use a font with text shadows (more advanced)
Use this opportunity to experiment with the plethora of CSS properties. Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately.
AI-Powered Animation Requirement
For this assignment, you are required to use an AI tool (e.g., ChatGPT, GitHub Copilot) to generate one creative CSS animation for your birthday card. This component is worth 10 points of the overall grade, split as follows:
- Implementation (5 points): Integrate the AI-generated CSS animation into your birthday card so that it runs correctly.
- Documentation (5 points): In your project's README file, document the AI tool you used, the prompt you gave, and how you applied the generated code.
Example prompts you could use include:
- Generate CSS code to make a heart icon pulse using keyframes.
- How can I create a bouncing animation for text with CSS?
- Provide code for a smooth color-changing background animation.
You must implement the AI-generated code, ensure it works, and document its use in your project's README.
How to Edit Your File
Throughout this course we highly recommend using VS Code https://code.visualstudio.com/download, and have included tips for each module specific to VS Code. Visit the wiki page VS Code and check out the Module 1 section
Important Note: Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will not work. You need a plain text editor.
How to View Your HTML Document
Once you have birthday.html, you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol.
In Module 2, we will install a web server that serves up pages on the http:// and https:// protocols.
Validation
Your birthday card and search portal pages must pass the W3C Validators for both HTML and CSS with no errors or warnings. You can upload your HTML to the HTML validator and your CSS to the CSS validator.
For more information on validation, see the HTML and CSS guide: HTML and CSS#Validation
Make a Portal to a DuckDuckGo Search
Write an HTML document containing a form that searches DuckDuckGo's web site. You should be able to type in a search term and have your form load the DuckDuckGo search page. In this HTML document you must also include this course's regrade policy to ensure that you have read it and understand it. Regrade Policy
- Visit www.duckduckgo.com. Search for something easy to spot in the URL, like "QUERY".
- Look at the URL of the search page. What is the query variable?
- Make an HTML document containing a text field and a submit button. Typing a search query into the text field and pressing the submit button should load the DuckDuckGo search page.
- Additionally, we want you to copy/paste this course's regrade policy somewhere into this html document to ensure your familiarity.
Git Tutorial
Complete all of the levels of the Main and Remote sections of this Git tutorial. After you finish the tutorial, take two screenshots showing the completion of all of the levels of the Main and Remote sections. Place these two screenshots in your repo.
Grading
We will be grading the following aspects of your work. There are 80 points total.
Assignments (including code) must be committed to GitHub by the end of class on the due date. Commit early and often. Failing to commit by the end of class on the due date will result in a 0.
- Birthday Card (35 Points):
- Correct usage of HTML and CSS in your birthday card (10 points).
- Make sure that you use HTML for "content" and CSS for "appearance." Don't write inline styles: use a separate stylesheet and link your HTML file to it.
- Experimenting with at least 5 different CSS properties in your birthday card (10 points).
- Implementation of an AI-generated CSS animation (5 points).
- Birthday card and search portal pages pass the W3C validation for HTML 5 and CSS. (10 points).
- Correct usage of HTML and CSS in your birthday card (10 points).
- Search Portal (10 Points):
- DuckDuckGo search portal is functional (9 points).
- Your search portal page includes the text of this course's regrade policy (1 point).
- Account Creation and Version Control (10 Points):
- GitHub account created (2 Points)
- Module 1 repo created using the link provided on Piazza (2 Points)
- Account created on Amazon Web Services and an image file containing a screenshot of your account page pushed to GitHub. (4 Points)
- Files pushed to repo on GitHub using Git (2 Points)
- Git Tutorial (20 Points):
- Two screenshots showing the completion of all of the levels of the Main and Remote sections placed in your individual assignment repository.
- AI Reflection (5 Points):
- Document use of AI for this assignment in the AI Reflections as described in AI Best Practices (5 Points)
