Homework Assignment: Research Paper and Webpage Design Wireframe/Storyboard on HTML, CSS, and JavaScript
Project Description:
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 Javascript 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.