Editing Code

Quick Start to Komodo Edit 8

Part 1: Inserting Your Work into Your Portfolio

All you need to edit HTML and CSS code is a plain-text editor, like Notepad. However, we recommend using a source-code editor with additional features that make the code writing process easier. They often include color coding, tag completion hints, and preview options. Komodo Edit 8 is one source-code editor we recommend.

Open Komodo Edit 8.

  • Download Komodo Edit. This completely free editor allows you to build your site on your own.
  • Once installed, open Komodo Edit and your portfolio folder containing your links.

Adding Text, Images, and Links to Your HTML File

  • In Komodo Edit, open the file index.html. This is your homepage, also known as the index page. Your HTML files are your webpages containing text, images, etc. Each HTML file links with specific CSS files. Your CSS files format your webpages accordingly.
  • Drop your pictures and texts as indicated in the index file. Remember to copy the name of your files verbatim. Otherwise, the image will not show up online. Do not mess with any HTML tags such as those listed here.
  • Upon dropping your images and text into the file, you will want to preview the file. The preview will show you how your file will appear online without your actually publishing it. Click on the globe icon at the top of the Komodo Edit window. A dialog box will ask you how you want to preview the document. Select the browser and click OK.

Checking Your HTML Web Page

  • Check your page. Are the pictures in the right order? Are there any typos? Have you inserted your name into the footer? If so, go back to Komodo Edit and fix your mistakes. You can visit the Going Further page and the Helpful Links page for troubleshooting help. The fastest way to check errors is to right click your page and click Inspect Element. Your browser or your Firebug app (depending on which you choose) will indicate the error that requires fixing.
  • After fixing your error, repeat the steps above for your subpages.
  • Check your site. If you would like to maintain this layout, you are ready to host on TerpConnect. If you would like to customize the appearance of the site, follow the steps listed under “Customizing Your Portfolio.”

Part 2: Customizing Your Portfolio

Gathering Any Additional Resources

  • Before you begin customizing the layout in your portfolio site, browse through our CSS resources in the Helpful Links page. Planning is essential when you publish anything. How would you use your portfolio site to convey who you are as an artist/designer? Consider color, patterns, and the type of content. Note: If you have a lot of visual content, consider refraining from bright colors in your background. You do not want your background to compete with your artwork/designs.

Creating Your CSS File

  • Now that you have chosen how you can customize your site, you will first need to start a new CSS file. In Komodo Edit, go to File ► New ► New File. Save the file as CustomStyle.css in the css/ folder. IMPORTANT: You will use this CSS file AND the original CSS files for all of your site files.
  • When creating a new appearance, keep your CustomStyle.css in one Komodo Edit window and the Arachne files in another Komodo Edit window. Open the original CSS files and your HTML files. Keep these files in one Komodo Edit window by moving your CustomStyle.css to a new window. Right-click the tab of CustomStyle.css and click Move to a New Window. This will allow you to easily refer to the original files to customize your layout.

Structuring Your HTML and CSS Content

Linking Custom CSS Files
  • Go to each of your HTML files. Press ⌘F (OS X) or Ctrl+F (if you are using a PC) to Find a specific word or phrase in Komodo Edit. Type link and press Enter. Between the <head> and </head> tags, you will find the <link tag (ending with />) that links to the CSS file you downloaded with the template. Do not delete this link. Instead, copy and paste the copy of the link underneath Arachne’s CSS links. Your new CSS file CustomStyle.css will override Arachne’s CSS files.
  • You are ready to add changes to your portfolio appearance. As you begin to customize your site, remember that specificity is the first and foremost law of CSS. Whatever specific rule is put into place will beat whatever was more general. For example, any text governed by a heading rule will no longer follow the rule that dictates what the body of the HTML document does. Whatever rule is most recent beats whatever was mentioned earlier. For example, your custom CSS file overrides the Arachne CSS files because it was listed last.
Changing HTML Tags and CSS Elements
  • Pay attention to the comments in the HTML and Arachne CSS files. They will help you identify how you can change the appearance. If for example you would like to change link colors, you could go to the Arachne CSS file and press ⌘F or Ctrl+F to find link. You will see a:link { color: #_ _ _ _ _ _;}. Change the color by cutting that code and pasting it into your new CSS file. Add the hex color by typing its six-digit code you identified online.
  • When adding a new paragraph, place the <p> and </p> tags at the beginning and the end of the paragraph respectively. Some tags like <link /> do not have a closing tag; these are known as empty elements. Refer to the HTML tags found in the bottom left of the page for more info.
  • When adding a new CSS rule, remember the format «HTML element» { property: specific}. For example, if I wanted to change the link color as I hover over the link, I type a:hover {color: #33ccff}. Above the new change, type /* Hovered link color */. This is a comment in CSS that will help you understand your code as you go along. Comments will not show up on the page as long as they are flanked by /* and */.
  • Repeat the customizing steps above as necessary.

Troubleshooting

  • Remember if you run into problems, you can refer to the Helpful Links page to help you with troubleshooting.

Proofreading

  • Proofread and edit your site content very thoroughly. Once completed, you may now proceed to web hosting on TerpConnect.

Validating Your Code

Arachne Web Development recommends a third-party validation website at Helpful Links. Look for W3C Validator. On the same Helpful Links page, you can also find further guides on coding a portfolio website, testing it for errors, and uploading it to the web.