Web Developer Level 1 - Activities
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.
Note: The following PDF documents are outdated since we switched to using Codio. The general structure of the course is the same, however the guide on Codio is more interactive and integrated with the IDE. Please refer to the course Roadmap in Hive to view the updated curriculum. |
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. |
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 |