JCHS Intro Web Design Assignments

We have been building to this point all trimester, the Web Design Final Project! I am excited to see how you will finish up your website this trimester. I have enjoyed seeing your creativity and ideas take shape. Think back to the beginning of this trimester, you have learned a lot of new material and from that you have created a site that you can share with family and friends. You should be proud of the work you have done, you have learned a lot!
Every project has points where there the drafts must be submitted. This is just the first draft of your web site. After this class, you are free to continue exploring new ideas and modifying as much as you desire, and I hope you do.

The attached document lists the required criteria needed to complete the Web Design Final Project.

This lesson will be focusing on what version control is and how it used in Computer Science. We will also talk about the tools Git and GitHub and how they are used to manage software projects. These tools are used throughout the CS industry, and are considered essential knowledge.

Objectives:
1) Review the slides, video and class summary about version control.
2) Complete the Version Control and Git/GitHub Quiz attached to this document.

This week we will finish the Web Development Tools introduction. These lesson are to help you learn about Web Development tools. It is not expected that you know how to pull/push, fork/merge, stage and commit changes in GitHub, but that you know what those terms are. If you continue on a Computer Science pathway, you will learn more about these tools.

There is so much more to learn, but we have run out of time for this trimester. Code.org, Raspberry Pi Code Club, Khan Academy and W3Schools are all great resources to continue to learn about Web Design. We were not able to complete all of Code Clubs' HTML & CSS Module 2, and it has some great resources about learning how to do animation and interactivity. While I will not require you to complete/submit any more of the Raspberry Pi Code Club activities, you will be required in the Final Web Site Project to include at least one extension in your project, i.e. a tag or style or animation/interactivity that we did not cover in class(that you could learn from the Code Club activities). There will be more direction in the Final Web Site Project that will be shared on Wednesday.

The remainder of the trimester is going to have the following pace, modified from them original Course Outline:
Monday June 1: Web Development Tools (Lesson 13 - Version Control and Git/GitHub)
Wednesday June 3: Additional HTML tags and CSS (Lesson 14 - Navigation bar, marquee, Tab label, etc), begin the Final Web Site Project
Monday June 8: Time to work on your Final Web Site Project
Wednesday June 11: Submit your Final Web Site Project

I am thankful for your patience as we have worked through this class, even through it was not in the way originally intended. You continue to strive and give feedback to help me make this class be the best it can be for this trimester. I look forward to seeing your creativity and what you have created in your little piece of online space.

Please complete the Weekly Check-in Form so I can support you in completing the remainder of the work for this trimester.

As a reminder, to earn a Pass(P) for Web Design, you will need to earn a 60% in HAC for the completion of all of the material for this class. I have modified the curriculum to adjust for the shortened trimester.
If you score lower than a 60%, you will earn an Incomplete. As this class is not in Edgenuity or Odyssey, I do not yet have direction on how you will make up that incomplete, but once I do I will pass it on to you. The information on Google Classroom will remain available through the summer, so you are welcome to access it at any time, but I will not be checking it regularly.

I have decided this "lesson" will be its own section. It will have two main parts:
Wednesday May 27th, we will use Khan Academy "Intro to HTML/CSS: Making webpages" to cover the content about developer tools (we have introduced some of this already).
Monday June 1st, we will cover Github and version control.

Objectives:
1) Review the 4 parts in Khan Academy from the section labeled Web Development Tools.
2) Research some of the Integrated Development Environment (IDEs) that are suggested in Khan Academy and describe the Pros and Cons of your three favorite options.
3) Create a Github account and load the website you are creating on Code.org onto Github and attach a link to your website on Github in the assignment. You will have to make sure your account is public for me to see it.
(#1-3 are due by Monday June 1st)

This is a short week. Wednesday we will start the next "Unit/Lesson" about Web Development Tools on Wednesday and complete the second half of it on Monday, June 1st.

I will be updating the Course Schedule this coming week, as we will need to change the last day of class and what we are able to complete in that time. This will not change the overall grade you need in the class to get a Pass (a 60%), but it will change what we cover. If a student does not earn a 60% by the end of the school year, then they will be given an Incomplete. If that is an issue, please contact me and we can work out a possible way for you to make up the Incomplete, possibly over the summer.

You have taken the first two step of making a web site...you have content(words, & images) and structure(the HTML). This week we will focus on how to STYLE(the CSS) a web page. You have had some experience with adding styling components in the RPi Code Club activities, but now we will bring that in formally into the Code.org curriculum. This is where you really get to shine and your creative side can come out...if that is not your best side, then at least it can make your material more interesting to look at. ;)

Objectives:
1) Complete the Warm up in a comment or Doc, then review the Slides provided.
2) Complete all the activities in Code.org Lesson 10 - Styling Text with CSS and Lesson 11 - Styling Elements with CSS. Lesson 10 will teach you about text styling and explicitly how to add the code to link your style.css (although some of you have already done that). Lesson 11 will teach you about borders, floating objects and margins. I will check your Code.org account to see and score your progress.
3) Complete the first activity in HTML/CSS: Module 2 - Build a Robot. This lesson exposes you more to "id", so you can style individual objects, and absolute vs. relative positioning of objects. Both of these are additional ways to style elements in CSS.

Once you have completed all the objectives, please Submit your work.

This lesson will focus on adding Color and Classes(group styling). You can add a lot of style and character to a website with different color and other CSS styles. The Raspberry Pi Code Club activity will extend the use of color and introduce you to gradient shading and more background designs. Enjoy making your own sticker. As you learn the material in Code Club, you can always pull the code you used there back to your Code.org website!

Objectives:
1) Answer the Warm Up question in a comment or a Google Doc, then review the Slides.
2) Watch the Images, Pixels, and RGB to learn more about how those colors are created in your computer. Please add something you learned in the video to your Warm Up response.
3) Complete all the activities in Code.org Lesson 13: Colors. You will explore the many different color options with their RGB Widget and then use those colors in a sample web site. You will also learn to use "classes", which can style a variety of different elements. Make sure to add some color and classes to your web site.
4) Complete the RPi Code Club activity: Stickers. Please include a link to your trinket.

When you have completed all the objectives, please "Submit" your assignment.

THIS WEEK our focus is on CSS (Cascading Style Sheets) aka, the STYLE of your website.
Monday: Code.org Lessons 10 & 11 which explain how to style your text and elements in your page (pictures, etc).
Wednesday: Code.org Lesson 13 which goes over adding colors.
Please complete the Weekly Check-in Form attached below...it will be the only one for the week and will let me know your plans for the week (i.e. will you be in the virtual meeting, what you plan to get accomplished this week, etc). You must complete the Form to get the points for this assignment.

NOTE: Next Monday, May 25th, is Memorial Day and a non-school day, so we will not have class on Monday. I hope you all have a restful weekend and take time to remember and honor the men and women who have served in the U.S. military.

Hopefully you have been in contact with your partner to help review your website, but if not, that is OK. If you have not submitted your web site from last week because you have not been able to review it with your partner, please turn in what you have done. I don't want you to lose points because you have not been able to have your partner review your work. Obviously, this would be easier if we were in a classroom, but I don't want it to negatively affect your work during Distance Learning. You should have received a message about partner meetings. I will continue to use those times to work with you on your website and what possible extensions you all are hoping to implement. Posted below the times I know of currently. Please contact me if you have not scheduled an individual(partner) meeting time.
Emma & Chris: Wed @ Noon
Kyle, Jewel & Ethyn: Wed @ 12:30
Edison & David: Wed @ 1:30 (Note: this could get pushed back a bit if our regular Wednesday lesson runs long)

Google classroom grades and TAC will be updated on Tuesday, please check your grades before our Wednesday meeting and if you have any issues, please let me know. Also, if you have changed anything to try to improve your grade on an assignment, please write in the comments what you have done/fixed and then Resubmit. Otherwise, Google does not notify me that you changed anything.

Now that you have learned the basics of creating Web Pages, you will learn how to connect them together to create a Web Site. There will only be one lesson this week, as I want to give you this whole week to build out your Web Site. RPi Code Club will have you connect the trinkets you have already created together to create a Showcase, while Code.org will have you finish your first draft of the website you have been planning since the beginning of the trimester. Each of these are about showing off what you have learned and created in the last 4 weeks. I have been very impressed with your progress and effort and I look forward to seeing what you have come up with!
Note: We will continue to work on the Code.org Web Site for the next few weeks. We will add CSS to improve the look/style of your site.

Objectives:
1) Complete the Warm Up in a comment or Doc, then review the Slides
You can complete #2 & #3 in any order you would like.
2) Complete all sections of Code.org Lesson 9: Project - Multi-Page Websites. Make sure to review the scoring rubric in the Resources and share your work with your partner so they can provide feedback (use the feedback form in Resources for a guide). Submit a link with your finished project.
3) Complete the RPi Code Club: Project Showcase and link all of your previous trinkets together, use the provided code to embed your projects into the Showcase.

This is Project Week. You will be finishing the first draft of your website in Code.org and gathering together the content you have created in RPi Code Club in the last 4 weeks to showing off what you have learned. This week will end our focus on the HTML or the basic structure of a website. Next week we will begin to explore more of the CSS to add decoration and styles to your web page content. There will only be one lesson presentation this week, as I would like to give you time to work on your website and have some time to meet individually or with partners to talk about your thoughts so far and what your needs are moving forward.

Attached to this assignment is a questionnaire about when you can meet with me individually (or with your partner) during our meeting time Wednesday afternoon. You will be asked to rank order your preferred meeting times. I will email you individually when your meeting time will be once I get a majority of responses.

Please make sure that you are working with your partner. I have listed below those who have told me who they would like to be partners with. If you do not have a partner, please let me know who you would be willing to communicate with from the remaining students.

Requested partner groups so far:
Ethyn, Kyle, & Jewel
David & Edison
Evelyn & Zane
Chris & Emma

Possible partner groups (please confirm if this will work for you):
Cameron & Samantha
Bergen & Caleb
Lewis & Samuel
Nolan, Blake & Zach


I am researching ways for us to share our projects with each other(not just with me). If we were in class there would be a Gallery Walk and I want to try to recreate that online...but I am still working on that. More information about it will follow.

Objectives:
1) Write a comment or submit a doc with your response to the Warm Up and review the slides.
2) a) Watch the videos below and the video (from New Zealand) in the Resources of Code.org Lesson 7 about licensing your own work.
b) Create and submit a slide show that has (at least) one slide explaining the basics of copyright, public domain and Fair use, and a second slide that explains the different Creative Commons License types (hint: there are 4 main types) and answers the Licensing Your Works activity in the Resources.
c) Read through and Complete the activities in Code Studio for Lesson 7
3) Read through and Complete the activities in Code Studio for Lesson 8 to debug the code. Contact your partner to work together to work through this lesson.
4) Complete and submit the RPi Code Club activity: Mystery Letter. It incorporates importing images and introduces and styling by using classes. This last one if more for exploration, it can be very simple or you can use it to try and explore new ideas.

People use lists in may ways. In this lesson you will learn the HTML tags needed to create the structure needed to build lists on your website.

Objectives:
1) Answer the questions on the Warm up (turn in your responses on a Google Doc) and review the slides.
2) Complete Code.org Lesson 6: Headings and add this new structure (and a new web page) to your web site on Code.org Studio (the last dot in the lesson).
3) Complete the RPi Code Club activity: Recipe to explore the two list structures and learn about CSS colors and list styling.

There are three main areas to consider when making a web page.
First, what Content do you want to have available - these include the words and images you want on the page
Second, what Structure you want on your page - (remember our conversation about a wire-frame) these include the location of text and images, where elements will be found, do you want a navigation bar, etc.
Third, what Style you want on your page - this includes the type/color/size of font, background color/images, how your elements will look, etc.

This lesson is to introduce you to basic HTML tags, elements and headings.
The focus of the next couple of weeks will be on the Content of a web page.

Objectives:
1. Answer the questions on the Warm Up and write your step to make a PB&J sandwich in a document and attach it to the assignment. Review the Slides.
2. Complete all the sections of Code.org Lesson 3: Introduction to HTML (review vocabulary, watch videos and use Code Studio to program).
3. a) Complete all the sections of Code.org Lesson 4: Headings (review vocabulary, watch video, and use Code Studio to program).
b) In your document, leave me a note as to who in our class will be your "pair programming" partner. Yes, we're virtual, but you should still
have someone to contact if you get stuck and I am not available. If you don't pick someone, then I will pick for you.
Note: I should be able to see your progress in Code.org, and I will leave comments on your code page
4. Complete the Raspberry Pi Code Club Activity: Tell a Story. Add a link to your project for me to review.
Extension idea: When you hover over a specific panel of your story, it expands
5. Once all requested parts have been completed, Submit your assignment.

Websites collect data to make decisions on what to order, make, post next, how to advertise, etc. Now that we are starting to think about the content you want on your website, we will take a step back to consider the bigger picture. What is YOUR digital footprint?
We will also continue to explore HTML and CSS through Code Club. Please remember that the Raspberry Pi activities are for your practice and to expose you to more uses of HTML and CSS, you can make it as simple or as complicated as you would like.

Objectives:
1. Complete the Warm Up and review the Slides.
2. Complete the Code.org Lesson 5 - Digital Footprint Activities in Resources: When Does Your Privacy Matter? and Social Sleuth. You only need to submit your responses to the questions, and if you are able please discuss with a partner.
3. Google yourself (or someone else in class, with their permission)...what did you find out about yourself?
4. Complete the Raspberry Pi Code Club Activity: Wanted! Make a poster advertising an event for next school year (sports, clubs, activities, class, etc) -- Focus is: Style divs and headings with CSS.

We will begin with the Warm up, work through the Code.org Lesson 1: Exploring Websites and Lesson 2: Websites for expression student activities, then complete the Raspberry Pi Code Club creation, to learn their interface. It will be similar to the Khan Academy activity from Week 0, but with a different IDE (Integrated Development Environment). You can create an account in Trinket.io, but should not need to because you can save (submit) the link in this assignment.

Objectives:
1. Review the Warm Up slide
2. a) Sign into your Code.org account,
Students can sign in to their Code.org accounts by going to https://code.org and clicking the "Sign in" button in the top right corner. From there, they should choose the "Continue with Google" option. Be sure to use your same account as you do for Google Classroom - it should already have the correct section prepared for you.
b) Complete the Code.org Lesson 1 & Lesson 2 activities (Found in resources; named U2L01, & U2L02). We will do part these together in class on Wednesday, if you are able to attend, but you must *Submit* an image of your brainstorm sketch. I will try to record and post this portion of the meeting.
3. a) Go to the Raspberry Pi Code Club project: HTML & CCS: Module 1, Happy Birthday (see link attached).
b) Complete and Submit a link to your version of the "Happy Birthday" card using Trinket.io.

Questions for Discussion: See Warm Up Slide

Review the Lesson 3 Slides and links provided.

Assignment 3: Finding Information Online
Copy and complete the Google Sheet. Attach you completed assignment, then submit

Questions for Discussion during Zoom Meeting:
See Lesson 2 Warm Up

Watch the videos and review the links on the slides provided. Note: there are some neat links in the blue side panels of the presentation, make sure to click them to see some interesting information.

Assignment:
Create your own copy of the Lesson 2 Assignment: Basic Computer/Internet Terminology, add in your answers to the prompts, then submit the completed Google Doc.

Questions to Discuss During Zoom Meeting:
What is the internet?
What do you think the internet will look like in 50 years?
How will that future internet impact your daily life?

Watch the videos and review the links on the slides provided.

Assignment:
You (and a partner?) will design a 1 to 2 slide presentation based on these prompts:
1) You must describe the Internet in your presentation and describe how it impacts your lives.
2) Then you can choose at least 2 of these questions to include in your presentation:
How long has the Internet been around?
Who developed it and why?
How has the Internet evolved?
How has the original design of the Internet affected its development?
How do you think the Internet will be used in the future?

You name (Both of your names) MUST be on the presentation to get credit. (If you work in partners: Only one of you will submit the presentation to Google Classroom, but both of you will mark the assignment as complete.)

Please complete the Hour of Code: Welcome to the web, using the link provided. This is to be an introduction to Web Design and will expose you to the content we will be exploring in this class. If you are willing and able, please submit a link or screen shot of the Holiday Card you created. I can't wait to see what you are able to come up with.

Please complete the survey so we can learn about each other by Friday, April 10th.