This bookmark is a combination of 2-d and 2-f: it is my restyled recipe and horizontal menu for the CSS portion of the course. At first, I was a little hesitant / confused about learning the CSS formatting. Once I got used to the concept of the CSS formatting I found myself wiring code with ease. There was many back and forth between typing and viewing in the browser, but I got the hang of it. The one issue I had was with browser compatibility - the margin: auto; code did not render well in IE7, but had not bugs in firefox. The most difficult potion of the menu was hiding the attributes that the browser assumes should be included with a bulleted list and links hence why a CSS style sheet comes in handy.
The site seems to be the most helpful css site out there. IF anyone has used the site 'flashkit' its a very similar concept. The site provides tutorials, reference libraries, website samples, and a multitude of css help. I recommend checking it out for any css questions you may have.
I found this really great site that details browser compatibility with CSS tags. It doesn't depict all CSS tags (prob. because they all don't have bugs), but details the bugs and compatibility that are known. What is nice is that it lays them out in a tabular format and includes many browsers (including the iPhone).
CSS Beauty is a site that congregates some of the best CSS based web sites available. CSS sites from all around the world are found here for inspiration and knowledge.
I cannot stress enough how much this site helped me in my course last semester with css and coding. The best part I found is that the example coding can be used and altered to fit whatever you are doing. That way, you see what it should look like and then add your own stuff to make the code your own with how you want the final product to look. I cannot stress enough how much this site helped me in my course last semester with css and coding. The best part I found is that the example coding can be used and altered to fit whatever you are doing. That way, you see what it should look like and then add your own stuff to make the code your own with how you want the final product to look.
I cannot stress enough how much this site helped me in my course last semester with css and coding. The best part I found is that the example coding can be used and altered to fit whatever you are doing. That way, you see what it should look like and then add your own stuff to make the code your own with how you want the final product to look.
That's probably the best way to learn HTML and CSS. And you can actually collect good examples from around the web, since HTML and CSS are always viewable.
Similar to something I bookmarked in module one, this page does a great job explaining CSS in its most basic terms. It is short on words, but long on meaning, which is what I tend to seek out when learning something new. The following line (which is very similar to something Alex said in the lecture) really helped me put CSS into perspective:
"The coolest thing about CSS is that you can link to an external style sheet, and this sheet can change the style (font size, color, link color, link hover etc.) on your whole Web site just by editing the one style sheet."
Here is another website with some CSS tutorials and templates. I've specifically bookmarked a page on how to create basic horizontal menu in CSS. Hope this helps!
This may be my new favorite coding assistant. I found it on the Web Developer's Handbook, as linked to from CSS Zen Garden's CSS Resource Guide. Seriously, this rocks.
Download a .pdf of a CSS Cheat Sheet that looks very much like the one Alex is seen using in his Module 2 CSS lectures. Could it be? :) There are other Cheat Sheets on the site as well.
This links to the menu bar template I used in my Chicken Kiev restyle with CSS. I like it because it has a clean modern look that doesn't look "button heavy". There is a fair amount of code, but most of it is straightforward. I made comments in my CSS sheet to help me remember what was going on. For webprog-2-a.
This was a simple, easy-to-follow tutorial on creating a horizontal menu with CSS. I attempted to credit the website in the comments field within the code.
This site is fantastic. I'm linking directly to the CSS reference page, but really the entire site is useful. It has HTML, Java, PHP, XML - everything! But in particular with this week's challenges, I found the CSS parts to be quite beneficial.
We used W3Schools in ICM512 to learn XHTML. For CSS, they offer how/why use CSS, do-it-yourself tutorials, and mini quizzes. Should be very helpful in this module.
Here is a CSS shorthand guide by Dustin Diaz. Diaz is a User Interface Engineer at Google and has a website focused on Javascript, CSS, and HTML usability.
This is an article that gives you time saving CSS-techniques. It is a cookbook of web-architect shortcuts. The Links and References section also has a list of other valuable resources as well.
More tricks and techniques you can use to make your site better with CSS. This site links you to various others to provide you with tips and codes you can utilize.
This CSS cheat sheet is not really set up like a standard cheat sheet but it is easy to read and follow along. I think it will be helpful to those of us who need to be reminded of all the CSS shorthand.
For the final project I completed the QU Campus map. The site utilizes PHP and CSS to pull in content and layout the site. The menus utilize CSS and PHP is used to pull in the images and code the label (or legend) section below the images. Google Maps API also integrates allowing users to view and zoom the campus. The site is best viewed using internet explorer, there are formatting issues for the CSS of the menus for those using Mozilla.
Also did anyone notice that the official QU map is missing #34? They may want to consider addressing this... Anyhow have a great summer!
