Note: This page is only for the directions for V.0.1.0 - V.0.3.0 of the Company Website Project.
If you are looking for the instructions for updates V.0.4.0 - V.1.0.0, go to the CW: Updates page.
The Company Website project is a CLASS project that will be completed in Code.org's WebLab environment. This project is usually started after completing the Web Development unit in the Code.org Computer Science Discoveries curriculum.
Once the Company Website has been created, the rest of your programming projects from this year will be showcased on your company website.
You are to design and build a simple multi-page website that we will use for the rest of the school year. This website will host all your other programming projects. It will act like our programming portfolio.
However, in order to avoid using any personally identifiable information online, we will instead create a fictitious software company. You will come up with a name, and a logo, and this "company" will produce all your projects.
As we go through the year, your other programming projects will be "produced" and "hosted" by your company on the Company Website.
Check out our Company Website Student Samples page to get an idea of what each iteration of your CW will look like throughout the school year.
Here are some of the specifics for your multi-page website:
You must come up with an original company name. You can't use anything that already exists.
You must build and design a logo that you will showcase on your site.
You must design a website that has the following content and structure (HTML):
Your multi-page website will have a minimum of FOUR pages (you can add more pages if you would like but your must have these four):
A HOME page (the landing page for your website)
A PROJECTS page (to host all the projects that you are going to build this year)
An UPDATES page (to keep track of each time you formally update your site - i.e., add new projects and/or add new design improvements. Note: This page was formerly called "Timeline.")
An ABOUT page (that describes the details of this project).
You must include at least one IMAGE on your site (your company logo can count as your image).
Site Design (CSS):
Your website should have a clear theme and consistency across all pages
You should incorporate CSS CLASSES into your design in some way
You should have at least ONE external CSS Style sheet. If you choose to have more than one CSS file, do not duplicate your CSS RULE SETS across your files. Each CSS file should contain unique RULE-SETS.
Website Navigation and UX (User Experience):
You website should be easy and intuitive to navigate.
Your main navigation should be consistent from page to page.
Any user should be able to quickly find and access any needed information on the site.
On the coding side you should demonstrate the following:
The correct html elements have been used to structure the page content
Elements are properly arranged and nested (as needed).
All rule sets are handled through an external CSS document.
All code demonstrates appropriate use of whitespace and indenting to maximize readability.
All outside media and/or sources have been properly attributed.
All outside media and/or sources demonstrate proper permission for use.
The final version of any update should be bug/error free. Everything should work perfectly.
As always, if you have any questions about these requirements, ask a question in class or post a question to the QPL.
Before you do anything, with this project, you need to create your company name. There are a couple of requirements for your company name:
Must be school appropriate (I have the final say in what is appropriate for this project.)
The name can't already be used in the "real world" for another company.
Other than those, you are free to come up with your own name.
Be as creative as you want. When you think you have a name, get on the internet and conduct a search for that name. If it's already being used, you can't use it for your project. Period. If you can't find any other companies using that name, and your company name is school appropriate, you should be good to go.
If you are unsure about your name, it's best to check with your teacher BEFORE you start working on your project. Otherwise, you might have to go back and redo all the prep work.
HINTS: It's hard to come up with a name that hasn't already been used somewhere in the world. Many students find that if they use some combination of their initials along with their original choice for a company name they are more successful creating a name that hasn't been used before. For example, I could come up with a generic name like "Digital Design Solutions." If I do a search for that name, I come up with lots of hits. However, if I take my first initial (J) and write my last name backwards (ssorc) and can combine them and get this: JSSORC Digital Design. If search for this, I get nothing. These are just ideas to get you started.
Don't dwell too long on making a name. It's not a real company. It's just a school project. Pick something and move forward with it.
Once you have your name, you need to design a logo.
Again, don't make this more difficult than it needs to be. Pick something and move on. This is not a design class. However, it is also a chance to show off your artistic skills if you choose to do so.
Use can use whatever program you like as long as you have a digital logo. Most students just create something simple in Google Drawing.
NOTE: The logo meets the requirements for having an image on your website.
Before attempting to sketch out your site, you should review some other gaming company websites and look for patterns in their designs that you model in your own site. There really aren't too many designs in use today for websites. Most companies - especially gaming companies - rely on the same basic layout. Each of them just tweak it slightly on the design side to personalize the look and feel of the page.
For example, let's look at the home page of these large software companies. Each has their own niche in the gaming universe but if you look closely at each site they all have similar home page structure:
You will notice that each site utilizes the following:
A horizontal main navigation at the top of the page
A large image below the navigation to highlight a specific game (usually a new release). In web design, this large type of image is usually referred to as a "hero" banner.
Below the large image, there are a series of other thumbnails to highlight other games, etc. on the website.
Check out other game/software companies on your own and you will find that most websites currently follow this basic pattern.
If you are having trouble figuring out how to layout your pages, you might want to mimic what you see with all the other large gaming software companies to get you started. However, you are free to come up with your own design layout if there is something else you would like to try.
Your sketches should all be in a wireframe draft format. In a wireframe draft, you don't put in every detail that you expect to have in your page. Instead, you design with placeholder elements and highlight the structure and location of elements on your page.
Do a quick search on the Internet for wireframe diagrams in web design and you will see hundreds of examples. There is no one right way to do a wireframe diagram. Once you get the feel for the basics, you are ready to attempt to sketch out your pages.
In your notebook, create sketches (wireframe drafts) of all your project pages. The sketches should represent what you think your final version will look like and should include the following:
Any pictures you plan to use (including your logo) and where you plan to place them in your layout.
The location of your main navigation
Any main headings and/or sub-headings
Where you plan to place any of your project content
The general layout options (are you going to use columns, simple paragraphs, etc.)
If you are having trouble trying to figure out what kinds of things to put on your pages (besides what is mentioned in the TASK section) take another look at some sample websites to give you inspiration.
Your CW Programming Journal is where you will document your project scope, your project planning and prep work, AND where we will keep record of periodic reflections about your work/progress throughout the school year.
As soon as you get access to your PJ, your should complete your COVER PAGE.
Make a copy of the Company Website: Digital Programming Journal.
The directions for completing each section of the PJ are embedded in the above document.
In order to make your document available for periodic checkups (as well as your final submission), you are going to SUBMIT your document NOW. Don't worry, you can keep on making edits to your document after you submit - the changes will update automatically.
Before submitting, be sure to keep the document PRIVATE but give your teacher COMMENTING rights. You can't earn any points for your work if your teacher can't see your work.
Follow the directions below to digitally submit your work:
Use the CSD: CWP: Programming Journal - Submission Form to digitally submit your work.
Use the submission form spreadsheet to make sure your work has been properly submitted.
You will not be able to earn any points for the PREP work on your project if your teacher cannot see your Programming Journal.
[Hidden]
After you complete your planning/prep, you need to start working on your first build (draft) of this program.
Login to Code.org and go to your Dashboard.
On the top main menu click on the PROJECTS tab.
On the PROJECTS page. Scroll down and find the section that says, "START A NEW PROJECT." You will see four choices (Sprite Lab, Artist, AppLab, and GameLab).
Underneath GameLab, select the VIEW FULL LIST option.
Scroll down the the BEYOND BASICS section and select WebLab.
We will name our file using the following naming convention:
ProjectName Version Semester LastName, FirstName
Here are the details for this project:
ProjectName = CompanyWebsite
Version = V.0.1.0
Semester = F22 (if it is not currently fall semester of the 2022-2023 school year, put the appropriate letter (F=fall, S=spring) and year for your current semester and school year)
LastName = [yourlastname]
FirstName = [yourfirstname]
Open your WebLab file. On the top menu bar, click on the RENAME button. Rename your file using our naming convention. For example, if If I was naming this project for myself, it would look like this:
CompanyWebsite V.0.1.0 F22 Cross, John
Your name should look exactly like mine except it should have YOUR name at the end (not my name).
You are now ready to start your first build.
There is no one right way to accomplish this first build. There are lots of options you can take and still be successful. The most important thing is to follow your planning documents and try to create a working HTML (only) version of your site.
TWO key things to remember as you are attempting to complete your HTML Draft Build:
First, YOU ARE ONLY CREATING AN HTML ONLY VERSION OF YOUR BUILD IN THIS STEP. Do NOT include any CSS at this stage. None. Zip. Zero.
Since we haven't (yet) completed any programming projects to add to your site, you will have very little usable content. Therefore, you will need to incorporate placeholder content and/or messages to your users about content that will be added in the future (we will talk more about this in class). The exception to this would be the ABOUT page. You should be able to add all the necessary content to that page. In fact, if you do this page correctly on this first update, you will likely never have to touch it again for the rest of the school year.
While you do NOT need to build your pages in any specific order, if you are having trouble getting started, I'd advise you to follow these steps:
Create a basic HTML file for your home page. Add an TITLE (<h1> element) to the page so you know what page you are on.
Create a basic HTML file for all your other pages. Again add TITLES (<h1> elements) to the pages so you know what page you are on.
Create the main navigation on your HOME page and create links to you other pages.
Build out the main navigation on all the other pages and make sure all the links work so you can navigate around your entire site with no errors.
Add all the content to your ABOUT page (since you already have all the necessary content for this page).
Start adding placeholder comments, texts, and/or images to your PROJECT page and your UPDATES page (as necessary).
Build out the placeholder comments, texts, and/or images to your HOME page.
Incorporate your company logo into your site.
Finally review your code.
Make sure all your content is properly contained within the appropriate HTML elements
Make sure your elements are properly organized and nested (if necessary)
Make sure you have used proper indentation and whitespacing for improved readability of your code.
Save this HTML only version. You will be submitting this build (this version) along with your HTML+CSS build after the next step.
After you complete the HTML build, you need to start working on your HTML+CSS build of your site.
Open your HTML Build (V.0.1.0) WebLab project.
There are three buttons at the top of your WebLab project window: RENAME, SHARE, and REMIX.
Select the REMIX button. This will make a new copy of your project. If this was my project, I would see the name change to:
REMIX: CompanyWebsite V.0.1.0 F20 Cross, John
Select the RENAME button at the top of your new WebLab project.
Remove the word REMIX from the beginning of the new filename.
Also change the "1" in the version number (V.0.1.0) to a "2" (V.0.2.0). Now you name should look like this (except that YOUR NAME should be at the end of the filename and not mine).
CompanyWebsite V.0.2.0 F20 Cross, John
While we haven't gone into much detail about the yet, you are getting an introduction into the versioning system we will use in class. We use the number 2 for our middle number because this is the second iteration of this project. (NOTE: We will talk about how the first and third numbers work at a later date. For now, we just need to worry about the middle number).
Your are now ready to continue working on this project. As the name implies, you should be working on adding style (CSS) to your site in this step.
Follow these steps:
Create an external CSS file to hold all your rule sets.
Code your rule sets for general elements (<body>, <h1>, <p>, etc.) first.
Next, code your "class" elements. Make sure you are using good naming conventions for your "class" names.
Review your code.
Make sure you have properly identified all your selectors.
Make sure you have NOT duplicated any of your selectors. If you have, combine the rule sets into ONE instructional block.
Make sure you have set up proper property:value pair statements.
Make sure all your property:value pair statements end with a semi-colon
Make sure all your property:value pair statements all fully contained within the appropriate instructional block.
Make sure you have used proper indentation and whitespacing for improved readability of your code.
Now that you have completed this update, you need to update the UPDATES page to reflect the changes you made for this update.
Do the following:
Create a new entry on the UPDATES page. Describe what changes you made from V.0.1.0 to V.0.2.0 AND provide a link to V.0.1.0. This way users can see both the HTML only version of your CW and the HTML+CSS version of your CW.
Finally, be sure you know your due dates and submit your HTML+CSS project on time. Due dates are always posted in the Daily Class Announcements.
There are three main steps to our class peer evaluations:
Step 1: Submitting your LATEST WORKING DRAFT BUILD.
Step 2: Completing the RESPONDER portion of the Peer Evaluations
Step 3: Completing the ARTIST portion of the Peer Evaluations
Follow all the steps below to complete the full peer evaluation for this project. Updated information for all these steps, including DUE DATES and DEADLINES, are always found in the Daily Class Announcements.
Remember that the Peer Evaluations account for a large chunk of your overall project grade. Make sure you understand what you need to do BEFORE you move forward.
If this is your first class peer evaluation for Computer Science Discoveries, go to the Peer Evaluations page on our class website. Read through the material and complete the practice problems. Then come back and complete the rest of these steps.
If you have already completed a Peer Evaluation with this class, you still may want to review the steps on the Peer Evaluations page before you begin.
When you are ready, move to the next section.
In order to get ready for the Peer Evaluation, you need to submit CW V.0.1.0 (HTML-Only Build) & CW V.0.2.0 (HTML+CSS build) to the CSD: Class Projects: CW: Peer Evaluation Prep Submission Form. Use the FORM link below to submit your document and then use the SPREADSHEET link to make sure your information was submitted correctly.
Note: The Daily Class Announcements will have all your DUE DATE and DEADLINE information. Make sure you are aware of all your DUE DATES and DEADLINES before attempting to submit your work.
Submission Form (this link will be LOCKED until we are ready to use it. If you think it should be unlocked, contact your teacher)
Submission Spreadsheet (this link will be LOCKED until we are ready to use it. If you think it should be unlocked, contact your teacher)
REMINDER: all students will have access to all submitted work on the spreadsheet so we can properly complete the Peer Evaluation activities.
NOTE: Groups will not be available on the spreadsheet until the day after the submissions from Step 1 (above) have closed.
When your teacher has directed you to complete this step, you use the Peer Evaluation Prep SUBMISSION FORM SPREADSHEET to find your group and group members.
Once you know your group and group members, you can move on to the next step.
Use the links provided on the Peer Evaluation Prep SUBMISSION FORM SPREADSHEET to review the work of every member of your group (except yourself).
After you review the work, you can move to the next step.
After you review the work of the Artist, you need to complete your Statements of Meaning (SoM) and you need to respond to the Artist's Questions.
Use the FORM below to enter your Statements of Meaning (SoM) for your Artist AND to respond to your Artist's questions. You need to submit one evaluation for each member of your group (again, do NOT complete an evaluation on yourself, just the other people in your group). You will still complete a submission form for a group member even if they did not submit the proper prep documents. The directions on the form will walk you through what to complete for each group member.
When you submit a form, you can use the SPREADSHEET link to make sure you have properly submitted all your evaluations.
If you have questions, post them to the PARKING LOT.
Make a copy of the CSD: Class Projects: Peer Evaluation: ARTIST document.
Note that there are TWO sets of instructions on the document: one set of instructions for those who DID submit work to be peer reviewed and one set of instructions for those who did NOT submit work to be peer reviewed. Be sure to follow the correct set of instructions.
You will need to reference the Submission Spreadsheet from the RESPONDER activity (above) to complete your ARTIST document. (Note: the spreadsheet will be specially formatted for this activity on the day this activity is assigned)
When you are finished, follow the instructions below for submitting your document.
Before submitting, be sure to keep the document PRIVATE but give your teacher COMMENTING rights. You can't earn any points for your work if your teacher can't see your work.
Use the Three-Week Project: Peer Evaluation: ARTIST - Submission Form to digitally submit your work.
Use the submission form spreadsheet to make sure your work has been properly submitted.
You will not be able to earn any points for the ARTIST portion of your Peer Evaluations if your teacher cannot see your work.
DUE DATES and/or DEADLINES for this assessment will be posted in the Daily Class Announcements.
Now it's time to take the feedback you received from your peers and complete your final build. Follow the directions below.
Before you start building your final version, you need to REMIX and RENAME your final build. We want to make sure you finish with three distinct saved files in your PROJECTS folder in Code.org:
Your HTML only build (V.0.1.0)
Your initial HTML + CSS build (V.0.2.0)
Your Website Launch submission (V.0.3.0).
Open your HTML + CSS Build (V.0.2.0) project.
There are three buttons at the top of your WebLab project window: RENAME, SHARE, and REMIX.
Select the REMIX button. This will make a new copy of your project. If this was my project, I would see the name change to:
REMIX: CompanyWebsite V.0.2.0 F22 Cross, John
Select the RENAME button at the top of your new WebLab project.
Remove the word REMIX from the beginning of the new filename.
Also change the "2" in the version number (V.0.2.0) to a "3" (V.0.3.0). Now you name should look like this (except that YOUR NAME should be at the end of the filename and not mine).
CompanyWebsite V.0.3.0 F22 Cross, John
Now use the information you received from the peer evaluations to make any necessary improvements to your project.
Additionally, as part of this update, you will need to add (to your site) at least one new HTML element and at least one new CSS rule set that was not included in any of the prior Code.org lessons nor included in your previous CW builds. You might want to use w3schools.com to help you with this task.
In the UPDATES section of your website, you will specify the new HTML element(s) and the new CSS rule set(s) you included in your site . . . along with a link to your old (V.0.2.0) site.
Make sure you are aware of all DUE DATES and DEADLINES for your final submission. All DUE DATE and DEADLINE information will be posted in the Daily Class Announcements.
Use the submission form below to submit your final project. Make sure you choose the V.0.3.0 option and then use the spreadsheet link to make certain your submission went through correctly:
Company Web Project: Submission Form (note: this form will be opened when we are ready for submissions)
Company Web Project: Submission Spreadsheet
At the end of each class project cycle, after you submit your final build (V.0.3.0 in this case), you will complete a Final Reflection.
Make a copy of the CWP: Final Reflection document.
Follow the instructions on the document. When you are finished, follow the submission instructions below.
Before submitting, be sure to keep the document PRIVATE but give your teacher COMMENTING rights. You can't earn any points for your work if your teacher can't see your work.
Use the Three-Week Project: Final Reflection - Submission Form to digitally submit your work.
Use the submission form spreadsheet to make sure your work has been properly submitted.
You will not be able to earn any points for the FINAL REFLECTION if your teacher cannot see your work.
Throughout the school year (usually once per grading period) you will complete another update where you will formally add additional projects AND design improvements to your Company Website. Sometimes we will do formal peer evaluations with our updates and sometimes we will not (it depends on where and when an update falls during the grading period). Full details will always be provided in the Daily Class Announcements.
Before you start building your next update, you need to REMIX and RENAME your final build. We want to make sure this update is a distinctly different from your other builds.
Open your current build.
There are three buttons at the top of your WebLab project window: RENAME, SHARE, and REMIX.
Select the REMIX button. This will make a new copy of your project. If this were my project, I might see something like this:
REMIX: CompanyWebsite V.0.3.0 F21 Cross, John
Select the RENAME button at the top of your new WebLab project.
Remove the word REMIX from the beginning of the new filename.
Change the version number (i.e., V.0.3.0) to the correct version for this update. See the list below for the version numbers for each grading period.
2nd Grading Period (Fall Semester) = V.0.4.0
End of Fall Semester = V.0.5.0
1st Grading Period (Spring Semester) = V.0.6.0
2nd Grading Period (Spring Semester) = V.0.7.0
End of School Year Update = V.1.0.0
For example, if I was submitting my update for the 2nd grading period of the Fall 2020 Semester, my name would look like this:
CompanyWebsite V.0.4.0 F20 Cross, John
Full details about naming conventions will always be in the Daily Class Announcements
Every CW update has THREE components:
Adding in your newly completed project(s) to the PROJECTS page
Incorporating new design elements to improve the UX (user experience)
Updating the UPDATES page with your new information.
Every update you need to make sure that all the appropriate programming projects have been added to your Company Website. Simply, everything new that you have created since the last major update needs to be included on your CW.
Additional details (as needed) for each update will always be listed in the Daily Class Announcements.
Throughout the school year, you will continually make UX improvements to your CW. You are required to make at least ONE significant UX / Design improvement each CW update.
The UX / Design improvement is up to you. It can be anything from improving your main navigation (consistent menu bar/tabs, drop down menus, etc.), to layout changes (better contrast between text and background, better arrangement of content, "hero" banner on the home page, etc.), to UX customizations (images that are links, embedded games, etc.).
Most students get new ideas for what they want to improve (or avoid) by peer evaluating other CW projects throughout the year.
New design / UX improvements for each update will be detailed in the TIMELINE section of the website (see below).
Every time you formally submit a CW update, you need to create an entry on the UPDATES page of your site. The UPDATES page documents all the improvements made to the site throughout the year.
Each entry on the page should contain the following parts:
Identify the NEW PROJECT ELEMENTS that have been added to the site.
Identify the DATE the new project elements were formally added to the site.
Identify the NEW DESIGN / UX IMPROVEMENTS that have been incorporated into the site and indicate WHY you chose to make those changes to your site.
Provide a link to the previous update so that users can compare the changes between the two sites. For example, if this is the CW V.0.4.0 build, I need to make sure I have links to all the previous builds (V.0.1.0, V.0.2.0, and V.0.3.0).
[Hidden]
Since we don't do a full PEER EVALUATION for every update, check the Daily Class Announcements to see we are doing a full PEER EVALUATION for this update.
If we are doing a full PEER EVALUATION for this update, use the form link below to submit your work and use the spreadsheet link to make sure your work has been submitted correctly.
Peer Evaluation Prep Submission Form (link will be available when we are ready to use it).
Peer Evaluation Prep Submission Spreadsheet.
If we are doing a PEER EVALUATION for this update, use the links below to complete the RESPONDER portion of the PEER EVALUATIONS.
Note: these links will only be active when we are ready to use them.
Use the Peer Evaluation Prep Spreadsheet to find your group and to review the work of your peers
Use the Peer Evaluation: RESPONDER submission form to submit your peer evaluations
Use the Peer Evaluation: RESPONDER spreadsheet to make sure that your work has been submitted correctly.
If we are doing a PEER EVALUATION for this update, use the information below to complete the ARTIST portion of the PEER EVALUATIONS.
[NOTE: This assignment will not be available in GC until the it is officially assigned]:
Go to Google Classroom
Navigation to the CLASSWORK section
Scroll down until you find the COMPANY WEBSITE PROJECT topic
Find the "Company Website: Peer Evaluations: Artist Response" assignment for the correct update (i.e., V.0.4.0, V.0.5.0, etc.) and follow the directions.
DUE DATES and/or DEADLINES for this assessment will be posted in the Daily Class Announcements.
Make sure you are aware of all DUE DATES and DEADLINES for your submission. All DUE DATE and DEADLINE information will be posted in the Daily Class Announcements.
Use the submission form below to submit your final build for this update. Make sure you choose appropriate version number in form (i.e., V.0.4.0, V.0.5.0, etc.) and then use the spreadsheet link to make certain your submission went through correctly:
Company Web Project: Submission Form (note: this form will be opened when we are ready for submissions)
Company Web Project: Submission Spreadsheet (note: this spreadsheet will be opened when we are ready for submissions)
[NOTE: We don't do a FINAL REFLECTION on every update. The Daily Class Announcements will state whether or not we will do a SELF REFLECTION for this update. Generally, we only do the SELF REFLECTION when we also do a full PEER EVALUATION]
You can find the final reflection for this project in Google Classroom.
Go to Google Classroom
Find the COMPANY WEBSITE PROJECT topic
Open the "Company Website: Final Reflection" assignment for this specific version.
Due Dates and Deadlines are always posted in Google Classroom as well as in the Daily Class Announcements.
[Hidden]