JOUR199 Getting started in journalism

Creating an online portfolio

After learning a few basics of manually created HTML5/CSS3 coding, we are turning to a content management system, WordPress, to create a website that will serve as a portfolio to showcase your resume and work you perform in all journalism classes and on student media or internships between now and graduation. This site will be part of a required portfolio review you will participate in as graduating seniors and should be regularly maintained after you establish it in this class.

Your site must be located in the /portfolio directory within the public_html directory on your free university web hostiung account, which you set up by visiting http://web.illinois.edu/.

Follow directions in the video below to set up your account and modify it however you desire. Make certain your site shows up at this URL — http://NETID.web.illinois.edu/portfolio/ — with your actual network ID substituting for NETID. You are free to use any other part of your account or any additonal accounts you create in any way you desire (provided you do not violate university content rules) from now until well after graduation.

To reach the WordPress control panel to change your site, go to the same address but add /wp-admin to the end of it.

Alternatives to WordPress

If you really hate WordPress, you can even do this in manual HTML5/CSS3 coding, uploaded and edited the hosting account's File Manager feature, as explained in an older video that also talks about a previous hosting system.

If you go with WordPress, it will take care of most coding. But if you prefer to do it yourself, make very certain to place all files you upload in the /public_html/portfolio directory, and design your pages so that they conform to HTML5 and CSS3 standards and create them in a special program like Notepad++ (Windows) or Komodo Edit (Windows or Mac), both of which are free to download and install on your own computer, or use an HTML-generating program like Dreamweaver (though you may use Dreamweaver afterward to help clean up or refine your code). Be sure to write your code only .

Avoid outmoded commands like <font xxx> and <center> , and use CSS float commands instead of old-fashioned <table> commands to create grid areas. (See comparison of table and float commands.)

Ample instructions and tutorials are available via the HTML and CSS tutorials online at W3Schools.com. Submitting your pages to both the HTML and CSS validators to proof their coding will help identify possible problems and ensure that your page displays properly in all types of browser, which you should also check via Browsershots.org. Your pages should pass both validators.

Keep in mind that the best way to do area composition is to draw up what your grid should look like first, then work out all the <div> commands and float styles using only very short "placeholder" text to designate where various content would go. Create everything in pieces and assemble all the pieces only after you get the grid to look like it should in mockup form, as done in the comparison example above.

For example, to create a page with a box 75 percent the width of the screen that floats in the middle of the screen and has a right rail, a headline area to the right of the rail and two columns of type beneath the headline, your would create code that looks like this, with the letters A. B, C and D standing in for the content of each block and the blocks themselves being named overall, left, top, bleft and bright :


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Float examples</title>
<style>
body     { text-align: center; color: #fff; font-family: sans-serif; font-weight: bold; }
#overall { width: 75%; margin: 0 auto 0 auto; }
#left    { width: 20%; margin: 0; border: 0; float: left; min-height: 2.25em; background-color: red;}
#top     { width: 80%; margin: 0; border: 0; float: left; background-color: green; }
#bleft   { width: 40%; margin: 0; border: 0; float: left; background-color: blue; }
#bright  { width: 40%; margin: 0; border: 0; float: left; background-color: black; }
#done    { clear: both; background-color: gray; }
</style>
</head>
<body>
<div id="overall">
   <div id="left">A</div>
   <div id="top">B</div>
   <div id="bleft">C</div>
   <div id="bright">D</div>
   <div id="done">E</div>
</div>
</body>
</html>

That code (right-click or control-click to save) will create a page that looks like this before you substitute the placeholder letters and get rid of the background colors inserted to demonstrate which block is which:

Obviously, you don't want to just parrot this particular grid. Come up with a different one that serves your needs but includes some sort of float: that, if necessary, ends with a clear: .

Although it is unlikely that you would ever use basic HTML5/CSS3 commands to create a site from scratch, most employers and employees of online news organizations still believe it is important that you learn the underlying code that goes into creating pages, without technological aids, even though most of the time professionals use automated processes from content management systems or, in the case of very small operations, such things as Dreamweaver templates. The reason for learning manual coding is that to fully exploit automation, you need to know what lies beneath it.

Helpful videos and resources

In completing this assignment, you may find these sources of information valuable:


TUTORIALS