Posted: 11/13/2008 9:10:15 AM EDT
|
Each fall at my college I offer a course in Web Design. These are typically Freshman and Sophomore students who have a basic interest in Computer Science as a major, but in most cases have limited experience with programming or HTML.
They begin the course with little/no experience with web page design, theory, or practice. It is not a lecture based course, but project based. The students receive no textbook, and no lectures about HTML. We have about 3 weeks of discussion about web pages "The Good, The Bad, The Ugly" and a few brief presentations by the students about good/bad websites that they have visited. During that time they use online tutorials to learn about HTML. They are encouraged to study/apply the tutorials but there are no tests, no quizzes, no memorization requirements. The class selects a 'project' and begin working as a team to learn the HTML skills required to complete the goal that they have set for themselves. They are responsible for researching the project for information, emails, etc. It's thier 'job' for the semester. This is the project that the current class selected, and they were able to upload it to the web yesterday for the first time. They have not yet been graded, and they are still fixing some continuity problems, but... without further ado, their website: www.tvccsvt.com Please feel free to critique the student's efforts. If you see misspellings, bad links, continuity issues (capitilization, spacing, underling) etc, you may point them out. They are currently using the free hosting service offered by GoDaddy, they plan to upgrade the service once the site goes live. I'm proud of this group. For complete rookies, they did pretty well, imho. TRG |
|
Nopt too bad...although I'm not a fan of using the flag as a backdrop.
checkout http://www.webpagesthatsuck.com/ |
|
On the front page financial is written twice.
"This website offers veterans a unique and condensed insight into the Texas University System admissions process and offers veterans several financial financial options to attend these institutions." Under Scholarships the links for the Mike Nash Memorial Scholarship Fund and Paralyzed Veterans of America Disaster Relief Fund don't seem to be working. |
|
http://validator.w3.org/
The Script block that generates the quotes would be better in an external .js file. Then you can make a change in a single file (add a new quote, remove one, change mispelings whatever) and immediately have that change in ALL the pages of the site. In general the CSS should be in a separate document that the pages link to for the same reasons given above for javascript.. You can still use page and even element level styles to override the defaults (I use this extensively in my company's site). Getting rid of all the <font size="3"><b><u>Link Name</u></b></font> and replacing it with CSS styles will make it easier to maintain the page. Personally, I HATE  the use of tables for page layout. CSS allows you to accomplish the same design and make work better across multiple platforms (not just IE/Firefox, but cell phones etc...), be more flexible and smaller. What's not to love 
There is some general goofiness going on at the end of the page. I think it may be some stuff that GoDaddy is injecting, but I'm not certain. After the closing </html> tag are a series of other closing tags (</object></layer> etc...) and a script block. |
|
Great job!
They can add Casey Joyce Memorial Scholarship to the scholarship page if they want. |
|
I think it's cute! It looks a lot like the first website I did. I'm a project manager/programmer at a web development firm, in addition to a few other things, but anyway...
Looking the the page source, my only problem is the constant use of breaks <br>. Those should be <p>s or <h>s. All those breaks might bust up in some browsers. And using <h>s would eliminate the need for font sizes. And not to critique your teaching, but after a semester they should be using tables as well. It's funny all the formal HTML like quotations and stuff that never gets used IRL. Over all, I'd give them a A-. |
|
Quoted:
I think it's cute! It looks a lot like the first website I did. I'm a project manager/programmer at a web development firm, in addition to a few other things, but anyway... Looking the the page source, my only problem is the constant use of breaks <br>. Those should be <p>s or <h>s. All those breaks might bust up in some browsers. And using <h>s would eliminate the need for font sizes. And not to critique your teaching, but after a semester they should be using tables as well. It's funny all the formal HTML like quotations and stuff that never gets used IRL. Over all, I'd give them a A-. I agree with the above and would add that you could/should introduce them to the available style elements in CSS to expand on what they've already got going. Not a big fan of the flag background either, too busy. Overall good job. |
|
Quoted:
Quoted:
Dreamweaver? The source doesn't appear to have been edited in a WYSIWYG editor. DW would've thrown umpteen nested <span> tags into the source for no good reason. PS, never allow marketing people anywhere near Dreamweaver. Ever. I just noticed that, good observation. I had to open IE to view the source. 
|
|
Quoted:
Quoted:
Dreamweaver? The source doesn't appear to have been edited in a WYSIWYG editor. DW would've thrown umpteen nested <span> tags into the source for no good reason. PS, never allow marketing people anywhere near Dreamweaver. Ever. They should learn HTML before being introduced to an editor. The skill set should be in place first. PS I HEARD THAT! |
|
Quoted:
You aren't supposed to let the marketing people anywhere near ANYTHIG, ever!
Quoted:
Dreamweaver? The source doesn't appear to have been edited in a WYSIWYG editor. DW would've thrown umpteen nested <span> tags into the source for no good reason. PS, never allow marketing people anywhere near Dreamweaver. Ever. I use Dreamweaver all the time to maintain our company's website. But, I NEVER use the the WYSIWYG part of it. Straight Code view and Firefox with Firebug for testing. The newest version, CS4, has some really nice features like Live View that will show you the rendered page on the testing server and allow you to edit stuff and instantly see it rendered, and live code that will show the rendered page like Firebug. |
|
Quoted:
Quoted:
I think it's cute! It looks a lot like the first website I did. I'm a project manager/programmer at a web development firm, in addition to a few other things, but anyway... Looking the the page source, my only problem is the constant use of breaks <br>. Those should be <p>s or <h>s. All those breaks might bust up in some browsers. And using <h>s would eliminate the need for font sizes. And not to critique your teaching, but after a semester they should be using tables as well. It's funny all the formal HTML like quotations and stuff that never gets used IRL. Over all, I'd give them a A-. I agree with the above and would add that you could/should introduce them to the available style elements in CSS to expand on what they've already got going. Not a big fan of the flag background either, too busy. Overall good job. totally agree. |
|
Quoted:
Quoted:
Everybody gets an "A" for Restraint In The Use of Flash. As a web developer, I agree. However with higher broadband speeds becoming common, I see a lot more flash being used. Even with broadband, Flash is just fucking annoying. I don't want 17 goddamned embedded videos playing when I just want to read the page. I don't need a 60 second animated intro to your webpage, just give me the fucking menu for almighty Christ's own private sake. Fuck Flash. |
|
Quoted:
Quoted:
Quoted:
Everybody gets an "A" for Restraint In The Use of Flash. As a web developer, I agree. However with higher broadband speeds becoming common, I see a lot more flash being used. Even with broadband, Flash is just fucking annoying. I don't want 17 goddamned embedded videos playing when I just want to read the page. I don't need a 60 second animated intro to your webpage, just give me the fucking menu for almighty Christ's own private sake. Fuck Flash. I don't use Flash but I think it has it's place. Tiffany & Co.'s web site is a good example of reasonable Flash use, IMO. |
|
Quoted:
Quoted:
Quoted:
Everybody gets an "A" for Restraint In The Use of Flash. As a web developer, I agree. However with higher broadband speeds becoming common, I see a lot more flash being used. Even with broadband, Flash is just fucking annoying. I don't want 17 goddamned embedded videos playing when I just want to read the page. I don't need a 60 second animated intro to your webpage, just give me the fucking menu for almighty Christ's own private sake. Fuck Flash. the internet is not all about you. Who cares if you just like text pages. Stick to simple emails and word docs. |
|
Quoted:
Quoted:
Even with broadband, Flash is just fucking annoying. I don't want 17 goddamned embedded videos playing when I just want to read the page. I don't need a 60 second animated intro to your webpage, just give me the fucking menu for almighty Christ's own private sake. Fuck Flash. the internet is not all about you. Who cares if you just like text pages. Web developers should. Presenting content in a concise, clear, efficient, yet attractive manner should be a major design goal. If you have nothing better to do than watch flash movies in your browser all day, feel free to compose your own rant. |
|
Quoted:
Quoted:
Quoted:
Everybody gets an "A" for Restraint In The Use of Flash. As a web developer, I agree. However with higher broadband speeds becoming common, I see a lot more flash being used. Even with broadband, Flash is just fucking annoying. I don't want 17 goddamned embedded videos playing when I just want to read the page. I don't need a 60 second animated intro to your webpage, just give me the fucking menu for almighty Christ's own private sake. Fuck Flash. I hate flash sites- bloated pieces of self-masturbation/congratulation. I link it to the 'myspace school of web design' with one exception: http://www.mushroommen.com/ |
|
A couple of things - First, for a first web page it is a good job. However, I have a few observations, mainly in reference to the right sidebar. The first campus image has a border, the rest of the images do not have a border - make all images consistent. The text - Terrell Campus/Athens Campus, and so on, are not properly aligned, they look like this in Safari and Firefox:
Terrell Campus Athens Campus Use a fixed width sidebar and properly format the text. Same with the other campus names. Think about left alignment of the links that are in the left sidebar and see how that looks. Increase the padding in the main text area, especially on the right (the left may be fine). The text looks too close to the right sidebar. I really do not like the flag background - but I am sure some do. Anyway, it is a nice site. 
|
|
If you are going to have a design element like the flag,
why obscure the top with your main frame? drop that element 100 pixels down and have the background be on the page for a reason >>>>>>>>> The SVoT banner is 60% of the page width... Why? The left/right blank space makes no good design sense Span that frame and don't just use center typography because it is a menu option, do it for a reason >>>>> top right img has a 1 pixel black frame the one slammed below it has no frame the text legends for the images on the right seem to be unaligned >>>>>>>>>>>> good design is very consistent >>>>>>>>>>>>>>>>> Underlining bold text is the work of a selectric typewriter not a typographer >>>>>>>>>>>>>>>>>>> Home links to Home on the Home page, self referential links should be dead so as not to confuse the navigator >>>>>>>>>>>>>>>>>>>> I would replace the text links on the left with buttons with alt text |
|
Quoted:
Wow. Harsh. Welcome to peer review kids. Actually, I liked the criticisms, I'll pass it along tothe students. As for CSS, it's not a part of the Web One curriculum. It is introduced in WEB II. They are also not allowed to use Dreamweaver, Front Page, etc. Wordpad, only. Basic HTML up to the concept of Tables. As for the flag... It's on today's agenda. We'll wait and see what they think about it after the criticisms. TRG |
|
Not bad at all for a basic HTML class.
The site I used to learn HTML might be a good resource to pass on to them: http://www.htmlgoodies.com/. It's changed a bit since 2001 but he still has the original primers & tutorials on there. |
|
Quoted:
Quoted:
Wow. Harsh. Welcome to peer review kids. Actually, I liked the criticisms, I'll pass it along tothe students. As for CSS, it's not a part of the Web One curriculum. It is introduced in WEB II. They are also not allowed to use Dreamweaver, Front Page, etc. Wordpad, only. Basic HTML up to the concept of Tables. As for the flag... It's on today's agenda. We'll wait and see what they think about it after the criticisms. TRG Make to pass along what Legs said... 
You should be able to elaborate what sucking ass means pretty well. |
|
Quoted: What's the trick to getting dynamically sized "columns" in a CSS table? We do a lot of "grid" data in tables, like a list of customers, transactions, etc. Since all this data is from a database, the amount of data in a column may vary so some of the columns may need to shrink/expand accordingly.Personally, I HATE the use of tables for page layout. CSS allows you to accomplish the same design and make work better across multiple platforms (not just IE/Firefox, but cell phones etc...), be more flexible and smaller. What's not to love I messed around this morning doing a "table" using unordered lists and CSS with this site as a reference. Works fine if I specify a fixed width. Also tried using jQuery to find the largest LI element set a fixed size on every other LI element but that didn't work quite right either. I may revisit that solution though. |
|
Nice job for a first project. This is a good starting-off point from which to iterate further. Should be a good opportunity to teach them that the maintenance phase of the lifecycle is the real meat and potatoes of the profession.
Here are some notes from a really brief look at the homepage, haven't looked at source yet: Background / general: - Use a higher-resolution flag image for a more professional look - Use of tan as the background for the text is good thinking for readability and eyestrain, but clashes with the flag. Consider another highly-desaturated color, perhaps based on the blue in the flag's field? What issues does that bring up? - Link and other colors should also take the background into consideration. The idea is that all of your colors should work together in a related palette, creating coherence. This also allows you to break that rule to call attention to something important (exceptional, temporal or rare, etc). - Experiment with using whitespace to divide content rather than the rules. Header: - Service branch logos have jagged edges. Weigh pros and cons of using PNGs w/ alpha channel vs. GIFs that have the logo composited on a background color matching the page's background. (Should be a good discussion for them.) Navigation: - Avoid spaces in URLs - Avoid use of "page" in URLs - in this application, they are all pages - Decide on a simple "style guide" for the naming of files and stick to it. IOW, capitalize consistently. (What benefits does this have in the context of a team-built project? How would this be helpful at 3am?) Right column: - "Campus campus" - Elements are stacked too closely together. - Use more whitespace to group related elements visually. At first, I wondered if there were four campuses, but only two had captions. - Apparent use of columns to group caption text is a little awkward due to line wraps in one column. Try "Terrell Campus, Athens" for example. - Border on only one image is inconsistent |
|
One thing you should show them in class is the Firebug add-on for Firefox. https://addons.mozilla.org/en-US/firefox/addon/1843
It's immensely helpful for visually inspecting your HTML elements. |
|
It's not bad at all. I would have liked to have seen a linked CSS style sheet to keep things more consistent, but once I read further into the thread that explained itself.
I also viewed the source, and noticed that some of the code was gotten off of the internet for free... which is where I get most of mine. It provided all the education I have ever had in HTML, CSS, and Java. My first three or four pages looked like crap - much, much worse than they did. At least there are no frames. 
Other than some of the noticeable image problems with resolution and sizing, and some of the noticeable color clashing with the background I would give it a solid B. It also looks somewhat unbalanced. Some of the negative space from one side of the page to the other looks off. EDIT - I mean specifically the top padding of the Navigation part of the page on the left, as it relates to the padding on the top of the right DIV... er, table. No major problems, though. My pet peeve is organized source code, but since you don't see that when viewing the page it's no big deal. It just makes it easier for me, personally, to keep things squared away when I want to update something or edit something. It's very jumbled IMO. |
|
Quoted:
Not bad at all for a basic HTML class. The site I used to learn HTML might be a good resource to pass on to them: http://www.htmlgoodies.com/. It's changed a bit since 2001 but he still has the original primers & tutorials on there. +1 I also like these sites, I've found them helpfull. http://www.web-source.net/ http://htmlhelp.com/ http://www.make-a-web-site.com/ I routinely get free scripts online and integrate them into my code from all over the place... |