Homework Assignment: Research Paper and Webpage Design Wireframe/Storyboard on HTML, CSS, and JavaScript
Project Descriiption:
The objective of this assignment is to research and write a paper defining HTML, CSS, and JavaScript, and then design a wireframe or storyboard for a basic webpage layout. The goal is to understand the foundational web development technologies and apply design principles similar to algorithm design in programming by creating a blueprint for a webpage.
You will use the GCFGlobal Programming Tutorials as your primary resource to explore these technologies and then visualize your understanding through a wireframe or storyboard.
Assignment Details:
1. Research and Writing:
Utilize the GCFGlobal Programming Tutorials to understand the following key concepts:
• HTML (HyperText Markup Language): Research how HTML forms the structure of a webpage by organizing content such as text, images, and links.
• CSS (Cascading Style Sheets): Explore how CSS is used to style the webpage, focusing on design elements such as colors, fonts, spacing, and layout.
• JavaScript: Investigate how JavaScript adds interactivity and dynamic content to webpages, allowing users to engage with the website beyond simple text and images.
2. Writing the Research Paper:
• Introduction: Provide an introduction that outlines the role of HTML, CSS, and JavaScript in web development.
• HTML Section: Define HTML and explain its components, such as tags, elements, and attributes, that structure the content of a webpage.
• CSS Section: Define CSS and explain its role in styling the webpage, covering concepts like selectors, properties, and responsive design.
• JavaScript Section: Define JavaScript and explain how it enhances user interaction through events, dynamic changes, and form validation.
• Conclusion: Summarize the importance of wireframe or storyboard design to a webpage design using HTML, CSS, and JavaScript.
3. Webpage Design Wireframe/Storyboard:
• Wireframe/Storyboard: Create a basic wireframe or storyboard for a webpage that introduces yourself. No need to design the page using HTML, CSS, and Javascriipt yet! This is similar to designing an algorithm before coding, where you plan the structure and features of the webpage in a visual form.
• The wireframe or storyboard should include:
• Page layout with headings, text, images, links, and buttons.
• Visual indication of where CSS styling (colors, fonts, spacing) will be applied.
• Areas where JavaScript interaction or dynamic features will be included (e.g., buttons, forms, or animations).
• You can create the wireframe or storyboard using any of the following tools:
• Hand-drawn sketches scanned and submitted.
• You may also use other digital tools like Balsamiq, Figma, or even PowerPoint.
4. Submission Requirements:
• Your paper should be 300-500 words and include clearly labeled sections for HTML, CSS, and JavaScript.
• Submit a wireframe or storyboard in either PDF, image, or digital format.
• Upload both the research paper and wireframe/storyboard to BrightSpace by the due date shown below.
Due Date: Sunday at noon, October 6, 2024
Grading Criteria:
• Research Paper Content (40%): Clear and accurate definitions of HTML, CSS, and JavaScript based on the GCFGlobal tutorials.
• Wireframe/Storyboard Design (30%): Thoughtful and detailed wireframe or storyboard that demonstrates understanding of webpage structure and design principles.
• Structure and Organization (20%): Clear organization of the research paper with logical flow and distinct sections.
• Grammar and Style (10%): Proper grammar, punctuation, and clarity in writing.
Hints:
• Use the GCFGlobal Programming Tutorials or W3Schools.Com to guide your research.
• Think of the wireframe or storyboard as the webpage’s “algorithm”—a step-by-step design plan before coding.
• Keep your wireframe simple but clear, focusing on how HTML, CSS, and JavaScript will be integrated.
Good luck, and we will learn about webpage design and development next week!