User:Vtaylor/CIS89A Learning Web Design/Getting Started/Online Web Editors

Pick ONE
 * Glitch Web Editor OR
 * CodePen Web Editor

Both are web-based so there is nothing to download. Use with any browser. Both are free to use the basic web editing required for this course. Premium versions are available for a fee but not required for the course.

Glitch is preferred for this course. However, the textbook example refer to CodePen but these miss many important structurea components of coding projects.

Descriptions and examples of each are provided.
 * creating an account
 * online tutorial
 * copying an existing project example or template
 * creating a new project
 * coding html and viewing
 * coding css styling
 * saving, sharing and submitting your coding projects
 * downloading to your computer
 * important considerations

Glitch
Coding projects can be completed using

- a free online Web Development Editor, so you don't have to have a separate application installed on your computer.
 * tutorial

Sample Summer page

Learn more about the tools. Explore the site. Create a Glitch account.

Glitch will automatically create your own copy of an existing project that you can modify and rearrange as you wish. View the Six-Word Summer sample project -

Glitch starts you off with the HTML panel which is the content - usually text, images, media. Change the text on the HTML panel. Keep this simple for now.

Add a description in the Comments box

You have done it. You have created a web page!

Style - style.css - Glitch automatically sets up an external Cascading Stylesheet CSS file for you in your

This is where the style description code goes. Although there are other places to define styling, using this external styleheet is an important part of the CIS89A Web Development course. In the CSS code file, 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. Glitch provides the link to the CSS. This is the connection that browsers will use to determine how to display your coding projects. Here is my

My Six-Word Summer which I changed to My 140 Character Introduction

Share your Project - All coding projects are submitted as the web address of the view of your project.

Glitch - Select Copy link from the Share menu - lower right. Click the Share link - lower right, and select Copy Link. 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 Coding 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.

ALSO Submit the Share web address link for your coding project to the 1. Coding 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.

View the source code for your coding project. Select

Then view the source code - same as in earlier activity. There is a lot more code than you see in the Glitch Editor view for your project. Glitch provides all the required html and css code to structure your code correctly. Keep this. If you have questions or comments, post to the Coding project discussion.

CodePen
Coding projects can be completed using CodePen https://codepen.io/ - a free online Web Development Editor, so you don't have to have a separate application installed on your computer. https://www.freecodecamp.org/news/how-to-use-codepen/ https://codepen.io/valerietaylor/full/MWGEabm
 * How to Use CodePen – A Beginner's Guide
 * Learn more about the tools. Explore the site.
 * Sample Summer page
 * Create a CodePen account. Confirm your email address so you and others can view your code as Full Page View - Change View option in top right corner.

Fork - CodePen will automatically create your own copy of an existing project that you can modify and rearrange as you wish. https://codepen.io/valerietaylor/pen/MWGEabm.
 * View the Six-Word Summer sample project - Editor View
 * Find the Fork - lower right of the project display. Click this button to get your own copy. CodePen starts you off with the HTML panel which is the content - usually text, images, media. Change the text on the HTML panel. Keep this simple for now. Add a description in the Comments box - lower left. You have done it. You have created a web page!

Style - style.css - CodePen automatically sets up an external Cascading Stylesheet CSS panel for you in your "Pen". This is where the style description code go. Although there are other places to define styling, using this external styleheet is an important part of the CIS89A Web Development course. In the CSS panel, try out different values for the #banner properties - background-color, font-family, width, padding, margin-top. CodePen provides help as you start to change the options. Include comments in your code - the format for comments is different in .css code. CodePen provides the link to the CSS. This is the connection that browsers will use to determine how to display your coding projects. https://codepen.io/valerietaylor/pen/MWGEKrz
 * Here is my "fork" of My Six-Word Summer which I changed to My 140 Character Introduction

Share your Project - All coding projects are submitted as the web address of the view of your project. CodePen - Select Copy link from the Share menu - lower right. Click the Share link - lower right, and select Copy Link. 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 Coding project discussion.

If you have questions about CodePen, 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.

ALSO Submit the Share web address link for your coding project to the 1. Coding 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.

View the source code for your coding project. Select the Full Page View from the Change View menu - upper right - icon with little squares. Then view the source code - same as in earlier activity. There is a lot more code than you see in the CodePen Editor view for your project. CodePen hides some of the usual code that is required for an .html and .css file. If you aren't using a tool like CodePen you will have to provide this code yourself. If you have questions or comments, post to the Coding project discussion.