CIS89A - Coding Projects Editor - CodePen

Module 1. Getting Started

CodePen Web Editor - 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.

1. Learn about CodePen - How to Use CodePen – A Beginner's Guide
   Sample Summer page https://codepen.io/valerietaylor/full/MWGEabm
   Learn more about the tools. Explore the site.
   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.
   
   
2. Fork - CodePen 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 - 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!
   
   
3. 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.
   Here is my "fork" of My Six-Word Summer which I changed to My 140 Character Introduction
   
   
4. 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.
   
   
5. 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.
   
   
6. 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.
   
   

Module 2. HTML Basics

Coding project notes

• customized bullets / markers (list-style-image), reference online resources list-style-image * select one of these icons, or use any online image to use for list-style-image property * coding examples

• NOTE: CodePen does not allow you to upload "assets" unless you have a Pro account (not required for this course). If you have a DeAnza student Voyager account or a Google Drive account, you can upload your own images and link to them for custom bullet images.

Module 3. Links

Relative links

• CodePen does not make it easy to demonstrate relative linking in the free version. Demonstrate relative linking to another html file in the same directory in your Voyager project.

With CodePen you don’t have to link to the external css file. In Voyager and other web servers, html and css code are in separate files so there has to be a link in the html code to connect to the external css file (or files).

• save the html code to a text file with .html extension
• add the additional code for elements normally included in an html file - html head title meta link body
• save the css code to a text file named style.css
• add a relative link to the .css in the head element of the .html file
  <link rel="stylesheet" href="style.css" /> - css file is in the same Voyager directory as the html file
• upload the .html file and the .css file to your Voyager public_html directory

• Make a note of where this file is located - folder, directory, exact file name. The file name must end in .html or .htm