Elements and Structure | CodecademyCodecademyLoading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
If you are new to programming with HTML, CSS, and JavaScript (or just need brushing up), we recommend you start with the following tutorials on Codecademy. We will reiterate some key concepts briefly in the Foundations module, but these tutorials provide an excellent skill base. Each of these are available with a free-tier account at https://codecademy.com.
We strive to make learning accessible with free and browser-based tools whenever possible, and that goes for this workshop as well. Below are the primary tools we will be using along with pointers on particular features that will be useful for us.
** Each project may use additional tools, but we will provide guidance for those when the need arises.
Slack, an industry favorite, will support our daily communication during the workshop. If you are unfamiliar with Slack, take a look at their help pages on using slack, and review the "Send Messages" and "Share Files & Conversations" sections. Don't feel like you need to understand all the features. We will likely stick with the basics. The video below highlights some basic features that will be useful for the workshop.
Zoom, a popular video conferencing platform, will be used for our live scheduled discussions and ad hoc discussions as needed. If you haven't used Zoom much take a look at getting setup on your desktop, testing audio, and testing video. The video tutorial below explains how to share your screen, which will come in handy to get feedback on something or to demonstrate something you have done.
Google Drive provides a suite of valuable tools that most are already familiar with. If you are new to Google Drive, consider this full tutorial. The short video below specifically demonstrates how to share a folder on Google Drive. Whether using link sharing or adding individuals by email, this is a very useful way for student teams to share folders with you, or vice versa.
Repl.it will be the go-to platform for most programming tasks. It is free, browser-based, and has a lot of useful features. If you already have some programming experience, go ahead and poke around a bit on the platform. As a teacher, you will likely want to get the free classroom plan that supports having private code, even if you don't use all the classroom features. Here is the link to apply, https://repl.it/k12-form.
If you have little or no experience programming, no problem, follow the quick start video below where you will 1) sign up, 2) make a copy (fork) of this program, and 3) click run to see the result. That's it for now. We'll dive deeper later.
Preparing Innovators in Computing
Welcome to the Computing by Design (CxD) 2020 Summer Workshop! This year's online sessions include four modules that introduce the CxD framework and three practical projects that employ the framework. The sessions culminate with the development of an instructional plan for you to facilitate computer science learning in your context. The spans the month of June, but you may choose to accelerate through faster.
Most activities are asynchronous, where you can watch videos, read material, and post comments in Slack at times convenient for you. We will have weekly 2-hour Zoom sessions for live discussions, and we will organize sessions for side topics as needed. As a rough estimate, you might spend 6 to 8 hours on each of the modules.
Join us in one of our welcome Zoom sessions: Monday, June 1, 9am or 3pm
Drawing on 15 years of industry experience as an engineer and designer, plus over 8 years of teaching experience, Jim focuses on enhancing the continuity between learning experiences and industry practices to provide students a clear path to impactful work in STEM fields. He is a key contributor to the Computing by Design framework and project material.
Program Manager and Diversity Coordinator
Senior Executive Associate Dean of School of Informatics and Computing at IUPUI
Dr. Mathew Palakal is a professor of Informatics in the IU School of Informatics & Computing (SoIC) and Senior Executive Associate Dean of SoIC at IUPUI. His primary research is in artificial intelligence and machine learning. His passion is to bridge the gap of underserved-underrepresented minority populations in the IT workforce. He was a key architect of the Informatics Diversity Enhanced Workforce (iDEW) program that uses the Computing by Design (CxD) curriculum. iDEW was implemented five years ago in three Indianapolis high schools with 70 students, to broaden IT-workforce participation. Nearly 1,700 students have taken CxD courses in 100 classes at eight high schools to date. The iDEW program has received +$2.1 million in corporate/foundation funding, and a Skill-Up grant from the Indiana Dept. of Workforce Development.
Mentor & Graduate of School of Informatics and Computing
Recent graduate of IUPUI with a Media Arts and Science degree and indie video game developer, Curtis loves to create and help others unlock their own potential in the media and technology field. He has been mentoring students as President of IUPUI's Game Developers' Group, Camp Instructor at iD Tech Summer Camps, and 3 years in high school classrooms as part of the iDEW program.
We will answer these questions and more through the following topics.
We will explore primary learning objectives for a computer science course and an achievable student profile that exhibits the attributes of a life-long learner and doer. We will consider the three threads of an innovator's work and how we can use the classroom as a bridge for students to participate in the modern world . We will review basic industry practices to manage project work and how to replicate them in an appropriate way for classrooms.
We will map the thinking, doing, and interactions of innovation to provide perspective on the set of practices we want students to engage that provide a depth and breadth to their approach. We will investigate the Indiana standards in computer science, along with the national framework and PBLWorks guidance, to build confidence and comfort in covering a full spectrum of learning objectives.
We will go through the three phases of a standard project outline and discuss the primary activities in completing projects. We will review the important milestones of the public presentations and deliverables. We will consider how teams of students may progress through the project, sometimes in a linear series and other times in parallel tracks. Finally, we will see how students may develop a product feature map for organizing work and communicating progress.
We will cover some basic concepts in programming with HTML and CSS that can provide a launching point into our projects.
Justin Smith will provide insight from experience on how to facilitate innovation in the classroom.
We will explore primary learning objectives for a computer science course and an achievable student profile that exhibits the attributes of a life-long learner and doer. We will consider the three threads of an innovator's work and how we can use the classroom as a bridge for students to participate in the modern world . We will review basic industry practices to manage project work and how to replicate them in an appropriate way for classrooms.
What do you see as primary roadblocks and opportunities for students to engage CS?
How might you have students track project work? What methods have you used in the past?
Review the primary
Join and select a cohort
Take a look at the .
With nine years of teaching experience, eight of those years in Computer Science, Justin strives to have authentic and engaging work for his students. He lets his students be creative and come up with their own project topics. He focuses on building students’ technical and soft skills. He is a contributor to the Computing by Design framework and project material. .
Joining IUPUI in 1995, Vicki Daugherty is the program manager for Informatics Diversity Enhanced Workforce (iDEW) and diversity coordinator at the IU School of Informatics and Computing at IUPUI. Computing by Design (CxD) is a product of the iDEW program.
What code tutorial resource might you use? (e.g. , , , , )
More: , , , ,
The schedule below is a minimum pacing guide for our online experience, but you may choose an accelerated path over two or three weeks. We have attempted to provide flexibility while not making things too complex.
Most activities are asynchronous, where you can watch videos, read material, and post comments in Slack at times convenient for you. We will have weekly 2-hour Zoom sessions for live discussions, and we will organize sessions for side topics as needed. As a rough estimate, you might spend 6 to 8 hours on each of the modules.
Each module has content (videos and reading) to review and ends with a reflection survey. Your final product will be a project plan for your classroom context.
By sharing your semester plan for teaching a CS course with other workshop participants in Slack you can get valuable feedback -- and provide others feedback as well.
While your plan may not be complete and require more development this summer, provide enough detail to express the key elements of your plan that enables some discussion with others.
We understand that you may choose to use other CS material at varying degrees with the CxD material or another PBL experience to fit your students' needs. Please share that as part of your plan, as it doesn't need to be solely based on CxD material.
Even if you are not offering a CS course this fall, please consider posting an outline of how you might facilitate a class in the future.
Sometime between June 29 and July 10 please share your project plan in our Slack workspace in the #cohort*-your-plan channel to get feedback from other workshop participants. Include any to-do items that you know you have yet to complete, as well as any prompts you would like others to specifically give you feedback on.
We can form Zoom sessions or side discussions on Slack as needed. Please don't hesitate asking us to facilitate a live discussion, whether one-on-one or in small groups.
The Trivia Project provides a great entry point for students to learn about web applications and experience the industry-aligned techniques and roles filled in innovative product development. We will review the tasks for each phase of the project allowing you to try some of the key activities as you consider your instructional approach.
The links below will lead you to the main page of the Trivia App Project guidebook. You can also browse the student work galleries to get a sense of what some of the major deliverables are for projects.
What do you foresee as major hurdles in facilitating this phase of the project in the classroom?
What are the biggest opportunities to positively impact students in this phase of the project?
The videos below give tips related to the flow of the iDEW projects, injecting supplemental work when needed, forming student teams, and using Google Drive to support your students.
Resources Mentioned:
Copies of Referenced Documents can be found on Google Drive
We will go through the three phases of a standard project outline and discuss the primary activities in completing projects. We will review the important milestones of the public presentations and deliverables. We will consider how teams of students may progress through the project, sometimes in a linear series and other times in parallel tracks. Finally, we will see how students may develop a product feature map for organizing work and communicating progress.
What visual cues or weekly practices might you use to keep students and teams moving forward and aware of the broader context of their project work?
What industry or community organizations might partner with you and your students?
More: Another Guide to User Story Mapping
The videos below give tips related to getting started with code, helping students with soft skills, getting started on the trivia app project, and other things that come up during the project.
Resources Mentioned:
Intro to Informatics (initial coding assignments)
Copies of Referenced Documents can be found on Google Drive
How might you manage team member responsibilities with the design and build portion? (prototyping, evaluation, question bank content, trivia code, etc.)
HTML provides the structure for web pages and uses elements with tag names to differentiate items on the page. For example, <h1>...</h1> is a large heading element. Notice the opening tag <h1> and closing tag </h1> that indicates the beginning and end of the element. "h1" is the tag name in this case.
Copy and past the HTML above into a new CodePen and notice how the browser preview looks.
Read these explanations on W3schools.com. Headings, Paragraphs, and Links
Add two more sites to the list with each having it's own "h3", "p", and "a" elements.
CSS stands for cascading stylesheets and allows us to modify the appearance of HTML elements in a browser. Study this W3schools page to understand the syntax of CSS. It is important to understand the concepts of a selector, property, and value.
Copy the CSS code above and add it to your CodePen from the HTML Exercise, and notice how the browser preview has changed.
Modify the CSS by changing colors and font-size.
Customize your look by adding the style properties below on the HTML elements you choose.
Box-shadow - This one is cool.
By assigning a class or id to an HTML element you can apply specific styles in a targeted way.
Copy the HTML and CSS above and paste it in a new CodePen.
Take a look at the browser preview and try to decipher what is going on.
Notice how assigning id="jill-card" in the HTML allows the element to be "targeted" with the CSS selector #jill-card.
Notice how assigning class="card" in the HTML allows several elements to be "targeted" with the CSS selector .card.
Go ahead and give Patrick's text a class of "card" and then add a unique id to his HTML element and some CSS to make his card stand out from all the others.
id - An HTML id is selected in CSS with a # prefix and should be used to target a single element on a page.
class - An HTML class is selected in CSS with a . prefix and can be used to select several elements that will share a common style.
Look at the HTML below. Do you see how the container could be called the parent of the three cards? The cards are then children of the container. This is an example of nested HTML.
Copy the HTML and CSS above into a new CodePen.
Notice in the browser preview how the nesting becomes visually apparent.
Also, notice how the indentation in the HTML is really helpful to see the proper structure. Technically the indentation does not need to be there, but it is a good programming practice.
Add a parent <div> element with a class of "outer-container" to the container and style it with a solid border line. Use good indentation in your HTML.
The video below give tips related to the Chatbot project. I include some info about specific assignments and how I've gotten past some challenges my students have had with the project.
Resources Mentioned:
Copies of Referenced Documents can be found on Google Drive
The IoT project brings computing into the physical world where students imagine how computers may be embedded in everyday objects and use various input sensors and outputs to serve a valuable purpose. We will review the tasks for each phase of the project allowing you to try some the key activities as you consider your instructional approach.
The Chatbot Project challenges students to develop a conversational interface with a computer application, introducing them to concepts of artificial intelligence, decision logic, and natural language processing. We will review the tasks for each phase of the project allowing you to try some of the key activities as you consider your instructional approach.
Resources Mentioned:
Copies of Referenced Documents can be found on Google Drive
Whether you are intending to run a single project as the main activity for a semester or inject a smaller project within another instructional context, you can use this template (embedded below) as a starting point. You may also want to use (or borrow ideas from) the PBLWorks project planner.
If you are going to use a CxD project guidebook, a lot of the details are already prepared, but you definitely want to formulate the big-picture plan on you will facilitate the course in your context. Ultimately, make the project/course plan work for you and include the level of detail you need. We hope these resources are good starting points.
Provide a rich description of the project challenge and some background. What is the challenge to students specifically? What technology or tools will be applied. What will be the make-up of student teams?
Primary Student Resources
List the primary material you will use (like a CxD project guidebook), along with programming environments and tools--like Google Drive, Prototyping Platforms, etc.
Describe the intended time allotments for the major activities. For example -- 70% Project, 20% Individual programming tutorials, 10% Topic Research. Also describe how you intend to manage team project progress, like with digital Kanban Boards.
Who in the community might be your partner? How do you intend the partners to engage with the students?
Assessment Plan
What will be your primary methods of formative and summative assessment?
What is your target date and place for student presentations?
How might you make student artifacts available online for the community to see, either as a lead-up to a presentation or for those that can't physically attend?
Summarize the learning objectives and standards met with the work that leads up to the milestone.
We will map the thinking, doing, and interactions of innovation to provide perspective on the set of practices we want students to engage that provide a depth and breadth to their approach. We will investigate the Indiana standards in computer science, along with the national framework and PBLWorks guidance, to build confidence and comfort in covering a full spectrum of learning objectives.
How might you facilitate a reflective practice with students to intentionally apply the different modes of thinking, doing, and interacting?
Which of the practices discussed do you think will be most difficult to facilitate? Any potential ideas to improve outcomes?
More: CS Standards Spreadsheet
