« Back to Main Page

Web Developer Level 1 - Activities

From Bold Idea Knowledgebase

References

Reference guides are designed to encourage self-directed learning. The activity guides will prompt students to look at their “HTML Reference” or their “CSS Reference”. Students may use these references any time they need a thorough introduction or refresher on any given concept.

Activities

The time estimates given here are approximate, and are meant to help you establish a reasonable learning timeline with your students.

Depending on the total number of session hours at your site, you may not be able to complete all activities in one semester. If your site has fewer than 21 total session hours (# of sessions × hours per session), then it is recommended that your students end the semester completing the Guided Project and earning their HTML & CSS skill badges. Students may attend the following semester to complete their Creative Project and earn their soft-skill and Web Developer Level 1 badges.

Click an activity below to view the PDF

Starter Activities
Activity name Est time Activity Description
online pre-survey
https://boldidea.org/pre-survey
5 min At any point during the first session , have students complete the pre-survey at https://boldidea.org/pre-survey . Bold Idea uses this data to ensure we are meeting our overall impact goals.
What are digital badges? 5-15 min Introduce students to the "Web Developer Level 1" digital badge, and how to earn XP (handout available)
Peek behind the curtain 20-30 min Students explore existing websites using their browser's "inspect" tool
Tag-it 10-15 min Students learn the basics of HTML elements, and "mark up" a pretend document with tags in this interactive activity (Note:the online version of this activity is still under construction)
About my mentor 30-45 min Students will interview mentors to learn about their interests and what they do for work. They will then write an HTML page about their mentor.
Make a simple how-to page 1-1½ hrs Students will create their own "how-to" page. A "how-to" page is simply a step-by-step instructional page on how to do some kind of task.
Guided Project ( Download PDF )
Activity name Est time Activity Description
Part 1 - Create a home page 1-1½ hrs Students create a home page to the ""client's"" requirements, complete with <h1>, <p>, <ul>, <ol>, <img>

Students use CSS for the first time to change the style of the <h1>

Part 2 - Improve the lists 15-30 min Students use sections to group lists with headings.

Students use CSS to add spacing inside and around their lists

Part 2 - Create the product page 45-60 min Students create a new page to showcase a list of products and information about those products using <table> elements.
Part 3 - Add unique style 15-25 min Students add specific styles to each list on the homepage so that they look different from each other
Part 3 - Change the layout 5-10 min Students make the lists side-by-side by enabling flexbox on the container element.
Part 3 - Add a Hyperlink 5-10 min Students create a hyperlink, allowing users to navigate back to the product page.
Part 3 - About Us page 35-45 min Students create an "about us" page with a heading, paragraph, and a javascript slideshow
Part 4 - Formatting text 5-10 min Students add markup to indicate emphasis or importance in their existing code, and use CSS to style emphasized or important text in whatever way they want
Part 4 - Finding help online 15-20 min Students learn to use resources on the internet to add style to their table
Part 4 - Contact Us page w/ Google Map 20-30 min Students create a new page with a heading and two sections, one for contact info and another for a map, each with its own subheading.

Students follow a set of instructions to embed a map in the 2nd section

Part 4 - Navigation menus 20-30 min Students add a navigation menu to each of their pages so that users can easily navigate the site.

Students use additional flexbox properties to customize the spacing of the menu items

Creative Project
Activity name Est time Activity Description
Brainstorming, Planning, & Prototyping 1½ - 2 hrs Students team up to ideate and brainstorm, ideate, & plan a website of their choosing. Students also learn how to prototype a web page on paper using wireframes.
Iteration 1 1½ - 2 hrs Students assign work, set up their team workspace, and begin to transition their paper prototypes to code.
Iteration 2 1½ - 2 hrs Students continue their project while thinking more about color and design.
Iteration 3 1½ - 2 hrs Students continue the next iteration of their project
Iteration 4 1½ - 2 hrs Students continue the next iteration of their project
Iteration 5 1½ - 2 hrs Students continue the next iteration of their project
Iteration 6 / Demo Day Prep 1½ - 2 hrs Students finish work on their projects and prepare for Demo Day.
Demo Day 1½ - 2 hrs