In this assignment, we will explore the basics of web development to create a self-promoting webpage using HTML, CSS, and JavaScript. In particular, we will learn how to use an AI tool to generate the codes. The goal is to understand how to design and structure a personal portfolio page that showcases your skills and personality. Additionally, we will leverage W3Schools’ “Try it Yourself” feature to experiment with code, helping you build confidence in applying your knowledge.
Summary of Key Concepts of Lesson 6
1. HTML (HyperText Markup Language): The backbone of any webpage, used to structure content on the web. HTML provides the basic framework of how your page is laid out.
• Tags: , , , , , , etc.
• Semantic HTML: Understanding meaningful tags like
, , , and .
2. CSS (Cascading Style Sheets): Controls the appearance of your webpage, including layout, colors, fonts, and responsiveness.
• Selectors: class, id, element selectors.
• Layout: flexbox, grid.
• Styling: color, font-family, background, padding, margin, etc.
3. JavaScript: The scripting language used to add interactivity and dynamic behavior to your webpage.
• Event handling (e.g., form submissions, button clicks).
• Manipulating the DOM (Document Object Model) to update page content dynamically.
4. Wireframe/Storyboard: Before coding, it’s essential to plan your webpage layout by creating a wireframe or storyboard. This visual guide helps outline the structure and content placement, providing a blueprint for your design.
Instructions
W3Schools offers a fantastic hands-on coding experience through its Try it Yourself editor. You can write and test your code in real-time without needing to install software or set up a local environment. Here’s how to use it:
1. Visit W3Schools: Navigate to W3Schools HTML Try It Yourself.
2. Experiment with Code: Use the editor to modify HTML/CSS/JavaScript and see the live results.
3. Apply to Your Project: Take the concepts learned and implement them into your self-promoting webpage design.
4. ChatGPT to generate HTML/CSS/JavaScript codes
5. Take a screenshot of the HTML Editor and the resulting page and submit it for credit.
Step-by-Step Instructions to Create a Self-Promoting Webpage
1. Set Up Basic HTML Structure
First, remember what you did for the class participation credit assignments and use the W3Schools Try it Yourself tool to experiment with creating the basic structure for your webpage. For your self-promoting webpage, include the following sections:
• Header
• Navigation
• About Me Section
• Skills Section
• Contact Form
2. Steps to generate the sample codes using ChatGPT:
Search ChatGPT on a browser and open its free trial page
In the text field, enter the following prompt ( you may copy and paste it):
Generate HTML/CSS/JavaScript code for a self-promoting webpage that includes the following sections:
Header: your name
Navigation that has About Me, Skills, and Contact Me sections
CSS style to produce a visually appealing webpage
To make the Contact Me section to be interactive by using JavaScript to handle form submission and to display dynamic content, or show alerts.
CSS and JavaScript must be included in the HTML code
Copy the HTML code by clicking the “copy” button, and paste it on the W3Schools.COM Try Yourself Editor
RUN the code and see the result on the right window
Take a screenshot and submit it for credit.