Teams of 2-3 students will build a 3-page functional website using HTML and CSS based on specifications from their fictional small business client.
Main Event
Event Description
Teams of 2-3 students will build a 3-page functional website based on specifications from their small business client (fictional). The website will be coded in HTML and CSS and needs to include common elements (see more below) and style rules. The final project must be uploaded by 10:00 pm on March 15, 2024, to the TOT App Submission Portal.
Common Core Standards
| ELA-CC | K-12 CS | 4C’s |
| CCSS.ELA-LITERACY.W.8.1 | 2-AP-11 | Communicate |
| CCSS.ELA-LITERACY.W.8.2 | 2-AP-15 | Collaborate |
| CCSS.ELA-LITERACY.W.8.7 | 2-AP-18 | Critically Think |
| 2-IC-20 | Create |
Project Details
You have been hired by one of the following small businesses to build a website using HTML and CSS for their business. You will need to consider their business in your content and design choices. You will work on a team with the following roles: Programmer, content developer, and style designer. (In teams of two, one person will take on two roles).
Content Developer: creates the overall layout and content for each page of the website. Decide on where pictures, navigation bar, and written content will go. Responsible for creating the website mockup document.
Style Designer: Decides on the color scheme including submitting color codes to be used. Chooses fonts that will be used and works with the content developer on an organized layout. Writes the CSS code and submits it to the programmer to add to the website
Programmer: Uses the content developer’s mockup to code the website on the web hosting platform. Links the Style Designer’s CSS code to the website.
- Business 1: A bakery. This business owner makes cakes, cupcakes, and cookies to order. They will need a main page with their address and phone number, a gallery page with their different baked goods, and a contact/order page.
- Business 2: A Mexican Restaurant. This restaurant uses Abuela’s recipes to make its menu. They pride themselves on their tradition and heritage of Mexican culture. They will need a main page, a menu page, and a contact/order page.
- Business 3: A shoe store. This business sells high-end shoes for men, women, and children at discount prices. They will need a main page all about their business, a page for their products, organized by men, women, and children, and a page for sales/upcoming products people can look forward to.
Technical Requirements
The website you build for any of the businesses will need the following:
| Content | Structure | Style |
| Business Name | Use at least two different Heading tags (ie, h1-h6) | A consistent, clear, color scheme of 2-4 colors that represent the business |
Business Logo | Use of Paragraph tags for all paragraphs | Consistent font style and color |
| About the Business | Use of either list tag (ordered or unordered) | Use of at least 2 classes |
| Contact information (phone, address, email, etc) | Use of Div tag | Intentional and organized layout |
| Photographs of their products ( all photos need to be attributed based on creative commons licensing) | Use of Image tags as appropriate | |
| Content spread on 2-3 pages | 2-3 active hyperlinks separate from the navigation bar. | |
| Social Media Buttons | ||
| Working Navigation bar/menu on all pages |
Resources
You can use any online (cloud-based) HTML editor to build your website. You will need to submit an active link to your website for your final submission.
- code.org’s weblab or codepen.io can host your website (there are many other possible hosts as well)
- Google Fonts is a great place for free fonts and Google color picker for getting color codes.
- Web Safe colors list
- Coolors.co or Paletton.com can help you find a color scheme.
- Freepik.com, Pexels and Unsplash give you access to royalty-free stock photos.
- W3schools can show you how to create social media buttons
- Free Logo Design will help you build your company’s logo.
- FontAwesome provides icons for social media.
- Favicon will help you create the icon for your tab.
Learn HTML and CSS
- Khan Academy has free courses on HTML and CSS
- W3schools has short tutorials on any HTML or CSS topic
- CodeHS has a free 1-hour course on HTML and CSS
- Codecademy has free demos for HTML and CSS
- Free Code Camp has guided tutorials on creating web pages in HTML and CSS
Live Challenge
Scenario
Your team of programmers has been hired to fix a local business’ website. The website has some major errors and needs some serious help. You must quickly identify 3 errors in the website’s code and then implement a creative solution for each mistake. Then your team will present the modified website to the client (judges) to demonstrate the corrections and explain how these changes improve the website.
Challenge
- Identify 3 errors in the website code and work together to correct the errors.
- Plan a quick presentation to show the judges how you fixed the errors and improved the website.
Possible errors include (but are not limited to)
- Images not loading/displaying correctly
- Images too large/small
- Elements having incorrect CSS code. (Paragraphs displaying like Headers, etc)
- Broken links
- Incorrect tag use and syntax
Time
Your team will have:
- 15 minutes to edit the HTML and CSS code AND plan a presentation
- 3 minutes to present your modified program to the judges and explain the correction.
Scoring
You will receive up to:
| Points | Judging Criteria |
| 6 pts | Team Collaboration while editing the website. |
| 6 pts | Successfully correcting the errors in the website. |
| 6 pts | The creativity of your corrections to the website. |
| 6 pts | Explain your corrections to the judges. |
| 6 pts | Incorporating all team members into the presentation. |
Tips
As with most of the Live Event challenges, teams will need to be very careful with time management. They should allocate at least a few minutes to review what they did and prepare for the presentation to the judges. It is highly recommended that a note taker is chosen to keep track of what changes are made so that a clear and concise presentation can be made.
Getting Help
Contact Alaina Tudman at Alaina.Tudman@fresnounified.org if you have any further questions about this event.