How Can I Build My Own Interactive Website?

Question

Required Materials
Weebly (requires login)
Art supplies (optional)
Graphic design software (optional)
Welcome to the beginning of your web programming journey! Throughout this course, you will work on a cumulative project that involves creating a website and enhancing it in subsequent units.

Being able to publish information in a variety of ways, including web pages, is a valuable skill today. In the lessons, you have already seen methods used to create and publish web pages employing web-based languages such as HTML, Java Script, and XML.

In your cumulative project, you will work through the process from storyboarding to completion, and once you’re done, you will have a complete portfolio of some of the work you’ve created in this course! Are you ready to go?

Step 1: Create a Storyboard
The first step in any new website endeavor is to plan. You learned about storyboarding in the lesson and saw an example. Using paper, posterboard, or graphic design software, create a basic storyboard for your website.

Keep in mind that this website will showcase the work you do in this course, so make it look professional and smart. Try to include a good mixture of images and text.

For now, your website will just have a homepage. We will add additional pages throughout the course in future activities.

Step 2: Choose a Theme
With your storyboard handy, log in to Weebly and choose a theme for your website. Remember that you can always change the theme later, but it may involve some shifting of content. So, try to pick a theme that you can live with!

Step 3: Insert Content
The homepage of your website should introduce yourself and the purpose of the website. For security purposes, do not include any personally identifiable information such as your birthdate, address, Social Security number, or phone number. You might consider including images that represent your interests or hobbies as well as multimedia content (text, images, videos, etc.) that describes your future life goals.

Make sure to follow the design principles that you learned about in the lesson like spacing, font, and colors. It is important to use generally accepted design standards for spacing, fonts, and color schemes to create functional user interfaces, including static and interactive screens.

Step 4: Add a Widget
An important skill to develop is the ability to insert external standalone objects such as scripts or widgets into web pages. Using an online widget creator like Elfsight or another website, find a widget that you’d like to include on your website. It might be a countdown timer, a social media feed, a chat, a map, an audio player, background music, or something else. Following the steps from the lessons, embed the code into your Weebly website’s homepage.

Step 5: What to Submit
When you have finished your website’s homepage, click Publish in the upper-right corner. Then, submit your storyboard and URL to the dropbox. If you created your storyboard by hand, take a well-lit, high-quality picture and submit it to the dropbox.

Cumulative Project 1 Grading Rubric
Content Format Create
Full Credit
Creates a storyboard and website that meet all the requirements.
Follows the majority of generally accepted design standards.
Produces a website that is visually appealing.
Creates a well-thought-out product based on their research.
Partial Credit
Creates a storyboard and website that meet some of the requirements.
Follows some of the generally accepted design standards.
Produces a website that could be more visually appealing.
Creates a product based on their research but could have put more time or creativity into it.
Little Credit
Creates a storyboard and/or website that does not meet the requirements.
Follows few or none of the generally accepted design standards.
Produces a website that is unappealing.
Does not create a project based on their research.

Answer 1

It sounds like you have a great plan laid out for creating your interactive website! Below is an expanded guide that divvies up each step further to help ensure you have a smooth process from storyboard creation to website launch.

Step 1: Create a Storyboard

1. Define Your Purpose: Write down the main goals of your website. What do you want to showcase? Personal projects? Skills? Achievements?
2. Sketch Layout: On your paper or posterboard, draw the layout for your homepage. This could include:
   • Header (site title, navigation bar)
   • Main content area (introduction, images, multimedia)
   • Sidebar (optional, can include links or additional content)
   • Footer (contact info, copyrights)
3. Plan Content: List out the text you want to include, any images you may need, and where you plan to place the widget.
4. Consider Aesthetics: Think about color schemes, font types, and the overall feel you want to convey.

Step 2: Choose a Theme

1. Explore Options: After logging into Weebly, browse through different themes. Look for ones that align with your storyboard vision.
2. Preview Responsiveness: See how your chosen theme looks on different devices (desktop, tablet, mobile) to ensure it’s user-friendly across platforms.
3. Select and Customize: Once you’ve found a theme you like, select it, and personalize it to suit your style, even if just minimal tweaks.

Step 3: Insert Content

1. Create Sections: In Weebly, create sections based on your storyboard. Add headers for each area distinctly.
2. Writing Content: Write an engaging introduction that encapsulates who you are and what the website is about. Keep it concise and inviting.
3. Add Visuals: Upload images or select them from the Weebly library that represent your interests and hobbies. Ensure the images are of high quality.
4. Multimedia Content: Embed videos or audio related to your future goals, or any other relevant multimedia items. Make sure they are properly cited if necessary.
5. Design Principles: Revisit design principles such as color harmony, proper font sizes, and spacing to make your site visually appealing.

Step 4: Add a Widget

1. Select a Widget: Research on sites like Elfsight for a widget that fits your website’s purpose. For example, a countdown timer for an upcoming event or a music player for your favorite songs.
2. Generate Embed Code: Follow the site’s instructions to generate the embed code for the selected widget.
3. Embed in Weebly: In your Weebly editor:
   • Drag an “Embed Code” element to where you want the widget.
   • Paste your widget code into the appropriate box.
   • Adjust the size to ensure it fits with the overall design.

Step 5: What to Submit

1. Final Review: Before publishing, review all content for spelling errors, broken links, and formatting consistency.
2. Publish Website: Click the “Publish” button in Weebly. This makes your website live.
3. Capture Storyboard: If created by hand, take a well-lit photo and consider using image editing software to crop or enhance the image for clarity.
4. Submit Your Work: Save your webpage URL and submit both the URL and your storyboard (or image of it) to the dropbox as required.

Additional Tips

• Feedback: Get feedback from peers or mentors while creating your storyboard and website. Fresh eyes can offer valuable insights.
• Iterate and Improve: After receiving feedback, make necessary revisions before finalizing.
• Explore Future Additions: As you progress through the course, think about other sections you might want to add to your website, such as portfolio pages or a blog.

Conclusion

By following these steps, you’ll achieve a well-structured website that represents you and your work effectively. Don’t forget to enjoy the creative process, and good luck with your web programming journey!