CSS Exploration #1

Explorer Nobles reporting in from week one. Not lost. Repeat not lost. In fact, feeling rather smug that this first foray into the unknown terrain of coding went so well. Must remember though that tougher terrain lays ahead ...

Tasks completed:

Downloaded free HTML programming software HTMLKit-292

Listened to HTML lectures to get foundations

• First question answered: learned how to get programming onto browser for practice! Save the file (normal practice is to save as .html) and open it in my browser. This will just be a test for me (not viewable to the public). This was really something that was eluding me, as silly as it might sound. Eventually, I need to learn how to upload it to be viewable

Read through class notes at same site

• Learned about browsers: “Internet Explorer will ignore errors in your code and make your pages look the way it thinks you intended. Not only does that encourage sloppiness and discourage learning, but it also means that you can have serious code errors that will make your page literally not show up in Firefox, and you will be completely oblivious.” I already use Firefox, so put check in plus column for me.
• There are many notes here about HTML coding in these notes when I get to that point, plus she recommends W3Schools for learning HTML.
• And this is an awesome site for HTML color codes!

Listened to CSS lectures

• Goes into HTML < > by putting in style = “ “ with the CSS coding in quotes
• CSS code is sensitive to case and pretty much everything is lowercase
• For future CSS work, she recommends: W3Schools again, the HTML Help guide, and the CSS Zen Garden (I am definitely going to start here just because of the name of the site)

Returned to our class CSS wiki page …

• “One CSS file can impact 10,000 or more pages, instead of the style code having to be written in the pages 10,000 or more times.” Having seen how CSS is layered onto HTML in my exploration above, this makes total sense to me, as does, “CSS makes it much easier to do maintenance on pages, such as making changes to a document.”

Final goal for today: to see the coding behind a webpage …

• I figured out how to do it all on my own in Firefox! Feeling pretty good! (You can stop laughing at total beginner me ...)
• Learned about Mat's copy and cite recommendation: “Before using any other site's code or information, you should always get the website's or author's permission as it almost always going to be copyrighted material unless otherwise stated. If the code or information is public domain, it will be stated within the code of the page; otherwise, assume it is copyrighted.”

I then played on the CSS Zen Garden, a site developed to inspire top design using CSS where designers submit their own CSS code to re-visualize the site. You can change the site to all of the different designs while the content stays the same. This is CSS in full action -- separating the style coding from the content coding.

This was a perfect way to know I really understand what CSS is and all it can do. Could I get good enough at design and CSS to submit something to the Zen Garden??

“Anyone who's going to be a professional web designer needs to understand XHTML and CSS and image formats and such — the same way a painter needs to understand different kinds of paints and canvases. A professional web designer is able to take a graphic design and hand-author it to life. Which is not to say that designers must always hand-author. They just need to have that ability so that they truly understand the nature of the medium in which they're working, and also understand what tools like Dreamweaver and Sculptor produce.”
Eric Meyer

Time Spent: 1 hour, 45 minutes

Original explorer image from Mail Online