×

Watch our get started video for educators!

Close Window

×

VisionSite

Realize your Vision

Use code to help you realize your vision. You'll create a reference website complete with inspirational quotes, music, personal goals, and statements of thankfulness. Along the way, you'll learn a little about coding and computer science.

View GitHub Repository

Preview Demo

Close Project

×

I AM - Personal Narrative

A great tool for telling your story

Using this tool, you'll work through the questions of stasis theory to reckon where you stand and where you're going. You'll also learn the basics of reading through code, adding/modifying content, and gaining a better understanding of computer science

View GitHub Repository

Preview Demo

Close Project

×

Codela Webtext Generator

The everyday coding tool!

Codela Webtext Generator helps you quickly build websites for various audiences and purposes. Add elements that will look good on any screen, whether you're trying to circulate a message of make a keynote presentation. Add a QR code link to the project, and your audience can easily take your message home in their pockets. Pretty cool, right?

View GitHub Repository

Preview Demo

Close Project

×

Argument

Content

Content

HERE

Close Project

×

Book Report

Content

Content

HERE

Close Project

×

????

Content

Content

HERE

Close Project

×

Elevator Pitch Generator

Did you know the Greeks invented the elevator?

It's true. The Greeks invented the elevator, and quickly realized the awkward communication that results when one is locked in a box with their interlocutor. Luckily, in addition to being great inventors, the Greeks were also skilled rhetoricians.

Open this generator and follow the directions to utilize the available means of persuasion to concisely language exactly what you want to say. The result: an elevator pitch. Ding! - Doors Closing - How high do you want to go?"

View GitHub Repository

Preview Demo

Close Project

×

My Nature Study

Embed in nature and learn to code our networked ecology

We've adapted the holistic, nature-centered methods we witnessed in the field to create My Nature Study, a coding template offering students an opportunity to work with tools to construct meaning in their world. Through this project of languaging and communicating their relationship with the natural environment, students will learn essential computer science concepts and learn to read/edit .html and .css documents.

Go to My Nature Outing Repository

Preview Demo

Close Modal

×

Project Report

Document your work

Every project needs documentation. Use this template to explain your research or design project. Your audience will love the responsive design and helpful side navigation. Pull code snippets from the code repository to add a range of multimodal content.

Go to the GitHub Repository

Preview Demo

Close Project

×

Single Page Navigation

A modern design that won't distract your audience

Build a single page website or portfolio using internal navigation control and responsive design. Showcase all of your content into one neat package.

Go to the GitHub Repository

Preview Demo

Close Project

×

Multipage Navigation

Great for separating parts

Build a multi page website or portfolio with responsive navigation. This design divides and presents content separatly.

Go to the GitHub Repository

Preview Demo

Close Project

×

Po

S

Go to the

Preview Demo

Close Project

×

Pitt Teacher PD

ADD Content OR LINK TO PITT SITE IN NEW WINDOW

Content

HERE

Close Project

×

Bootstrap Portfolios

.css style, y'all!

Bootstrap provides .html snippets and web templates that sync to Bootstrap CSS master stylings. With Bootstrap, you'll be able to make stylish websites that follow UI design best practices. We've provided PDF tutorials you can follow to make your own Bootstrap site and host it on a server using an FTP tool. Sorry, we lost you? We'll explain how it all works in the our tutorial. Why Bootstrap? Two reasons: First, Bootstrap offers free "Startstrap" themes that demonstrate current trends in UI design...and they look great. Second, it's always good to see how other people work with code. You got this!

MAC USERS OPEN PDF

WINDOWS USERS OPEN PDF

Close Project

×

Content

Content

Content

HERE

Close Project

×

Content

Content

Content

HERE

Close Project

×

Content

Content

Content

HERE

Close Project

×

Codela CLASSROOM BEST PRACTICES

Work with Code – most all of the code your students will need to write has already been written. Encourage students to work with code, not write it. (Disagree? See our final entry)

Admit ignorance – your students will be much more responsive to learning about code and computer science when they realize that their teachers are also learners.

Be flexible – there are many solutions to any given problem. Use difference as an opportunity to engage learning, asking questions, and assessing quality in different circumstances.

Don’t fix things for your students – teach students to learn how to learn by directing them to the right resources.

Promote online learning spaces – most of the questions and answers we seek have already been discussed somewhere on the internet. Encourage students to discover and contribute to these spaces on sites like GitHub and Stack Overflow, and to use other learning spaces like W3.

Leverage classroom knowledge – acknowledging your own limitations will encourage students who may possess more knowledge than you to speak up and take leadership roles.

Set Deadlines, but be flexible – give your students all the time they need to figure out how to work with code. Demand excellence, but ensure learning.

Think Small Groups – small groups provide a great way to help students learn to connect with the other through code.

Debugging Sessions – students will often arrive to class with big problems that require simple solutions. Allow students time to meet in small groups to solve their coding problems.

Small Group Presentations - presenting work in small groups takes the pressure off of presenting in larger ones. They also allow students to ask more questions and learn more about their own learning.

Group Share - After small group presentations, require each group to share-out the highlights of their experience, not only sharing what they made, but what they learned.

Build Confidence – Be proud of your students! Encourage them to continue working with code and learning new technologies.

Promote Transfer - Offer plenty of time for students to assess what they learned and to process how they learned it. Focus on aspects of rhetoric, writing, and computational thinking.

Promote Other Kinds of Coding Experience – It may be unrealistic to learn more than Codela in your classroom, but that doesn’t mean you shouldn’t encourage students to transfer their new knowledge and skills to learn more about code, even learning how to write their own.

SAMPLE TEACHING CYCLE (2 projects)

-VisionSiteHelp students use code to structure their goals. (VisionSite)

Personal Narrative Students will use code to explain their story...who they are, where they come from, and where they want to go. (I AM...Personal Narrative)

Multimodal EssayStudents will write an essay that blends text with other multimodal elements. (Codela Webtext Generator)

Close Best Practices

×

FAQ

Q: How do I get started teaching students to work with code?

A: Start with our introductory programs, VisionSite and I AM...Personal Narrative.

Q: Wait a minute! What about me? How do I get started learning to work with code?

A: The same way silly! But as a teacher, YOU should get started working with code before you facilitate these lessons in your class. Get to know your code editor. Get to know the affinity spaces to which you will be sending your students for answers. Share your own work - even your own problems and frustrations – with your students.

Q: Where are the directions?

A: They are embedded in the code. Teach students to use a code editor to open the index.html file and style.css file to find the directions.

Q: Can my students really figure out how to work with code?

A: If you and your students can’t figure out Codela, then WE have a problem. Please let us know.

Q: How do I assess online work?

A: Set expectations: demand students work with code to meet specific requirements and goals for content, usability, and aesthetics, but assess actual learning, presentation, and participation rather than product.

Q: What if a student already knows everything there is to know about HTML and CSS?

A: No problem. Codela is only a multimodal communication tool. While we can use the code to help us arrange, style, and circulate our content, we still need to invent content and connect with our audience.

Q:` What is computational thinking?

A: Computational thinking includes aspects of pattern recognition, algorithmic thinking, decomposition, working with data, and abstraction. ELA teachers already use computational thinking across many of their reading and writing activities, but we can do more to make this learning more explicit and better connect it to digital literacies.

Close FAQ