CIS89A - Coding Projects Editor - Glitch
From WikiEducator
Module 1. Getting Started
Glitch Web App Editor - Coding projects can be completed using Glitch - a free online Web Development Editor, so you don't have to have a separate application installed on your computer.
- Glitch - Getting Started - The Project Editor https://help.glitch.com/kb/article/143-getting-started-part-1-the-project-editor/
- Getting Started with HTML using Glitch.com (video 7min) https://youtu.be/T3KzeJMTFQE This tutorial will show you how to login to Glitch.com and start working with a basic HTML file
There is a lot more to Glitch that we will not be using in this course.
- Learn the Glitch basics with this introduction and Glitch Getting Started to learn more about the tools. Explore the site.
Create a Glitch account.
- Remix - Glitch will automatically create your own copy of an existing project that you can modify and rearrange as you wish. View the Glitch Six-Word Summer sample project. Find the Remix your own button - lower right of the project display. Click this button to get your own copy. Glitch starts you off with the main .html file named index.html which is the content - usually text, images, media. Change the text on the index.html page. Keep this simple for now. The tutorial.html file has examples of the html code to help you. Add a description in the description box under options under the project name - upper left. You have done it. You have created a web page!
- Style - style.css - Glitch automatically sets up an external Cascading Stylesheet style.css file for you in your project - listed in project files list on left. This is where the style descriptions go. Although there are other places to define styling, using this external styleheet is an important part of the CIS89A Web Development course.
Select the style.css file and try out different values for the #banner properties - background-color, font-family, width, padding, margin-top. Glitch provides help as you start to change the options. Include comments in your code - the format for comments is different in .css code.
Look at the code in your project index.html for the link to this style.css file. This is the connection that browsers will use to determine how to display your coding projects.
Here is my "remix" of My Six-Word Summer which I changed to My 140 Character Introduction - Share your Glitch - Click the Share link - upper left, and select Public and Live site. Copy the web address provided. Paste the web address and post it along with a short summary (2-3 sentences) about your "test drive" experience to the Glitch project discussion.
If you have questions about Glitch, please ask. This is intended as an easy, fun activity so you can "create" a web page in the first week of class. There is a lot more to web development, so keep this simple. Make a few small changes and make sure it continues to display ok.
To submit coding projects, provide the "Show" link to your Glitch coding assignment project.
- ALSO Submit the Share web address link for your Glitch coding project to the 1. Glitch project assignment. There is a rubric describing points for the coding assignment. Yes, this is the same as what you shared in the discussion. The discussion is for the class to see. The assignment is for detailed feedback to you.
Examples
- My Six-Word Summer
- My Six-Word SummerCessna plane in the skyEating Healthy. Staying Active. Flig...
- My Six-Word Winter
- My Six-Word WinterWinterHomeSnowboarding.Pho.Hot Coffee.Campfire Socials. &qu...
- My Six-Word Summer
- My Six-Word WinterChessVideo Games.Basketball Practice.Chess Theo
...
Module 2. Basic HTML
New project for the coding project for each module.
Glitch always starts with something. Log in to your account. From the https://glitch.com/ page, select Basic Website A simple website starter. Click Hello Website to bring up a new project. This will already have some of the required html and css code elements.
Examples
- AJM Photo
- "Welcome to AJM PhotoOrdered Lists Birds are great Birds...
- HTML and CSS Basics
- "Hi there!I'm learning web development!I'm your cool new webpage...
- Week 2
- Week 2 RecapHello! Laura here. I'm using this week's assignment as a...
Module 3. Links
Relative link to an html file in the same Glitch directory
- create another file in the same Glitch project - Files + in the left navigation menu. Replace cool-file.js with yourfilename.html and click Add this file. Your new file will be added to your project. This file is empty so you will have to add all the basic html code.
- create the relative link to your new file that you have just created in the Glitch project directory
Save Glitch project files
- To copy files from Glitch to your computer, click on the Tools item in the menu bar at the bottom of your Glitch project window. Select Download Project - bottom of the Tools menu, and save to your computer. Note: this is a compressed file in .tgz format. Expand this to get the files in a folder.
- If you are copying the code from a Glitch assignment and you are using the style.css for external style formats, make a copy of the style.css file too. NOTE: in the html file change link rel="stylesheet" href="/style.css"> - remove the / from style.css
Examples
- Working with Links
- "Working with LinksThis website provides an example of using links withi...
- Coffe Shop
- "Coffe ShopHome Menu Learn more about COFFEEThe History of COFFEEJump...
- Theodore Willis
- "Theodore WillisEditor illustrationWeb DeveloperThis website has been cr...
