Thanks to Miss Ragno from Merox.dk as our host for the first little web class we had together and of course everybody that participated.>
I want to put up a quick sum-up what we did for everybody that is interested or who couldn’t come.
Concept and Technique
| Concept | Technique | |
|---|---|---|
| Sender | You or your client | Webserver |
| Message | Do / buy something | HTML |
| Receiver | User | Browser |
Clean Code
What you should think of when starting to write a website is that you should use native html elements if possible, like h1, h2, blockquote and so on. Also very important that you devide content and style.
Bad:
<body background="#ff0000">
good:
<body> and additionally in .css file: body {background:#ff0000;}
Comments
Comments are extremely supportive when it comes to coding and learning at once, here the comment markup for HTML and CSS comments:
<!– navigation section, this is a HTML comment –>
/* multi row comments in CSS
for example: this not working in IE */
Validation
Validation is useful to get used to common guidelines. It’s not the ultimate solution, but sticking to the W3C rules is a good starting point. You can always add a browser switch for single browsers after that. (Eyeballing IE here)
Links for validation:
Also very important: remember your Doctype! (HTML5 not listed)
Sketches
Make sketches, in hand or digitally, just very roughly to define elements and layout. This will help you not to overload the page and stay focussed on your goal along the process.
Inspiration
Gathering inspiration is not really a big deal when it comes to web design. Check out the category for Web Interfaces on deviantART for example.
Resources
Editors
Important when you choose your editor is that it supports syntax highlightning.
I recommend Notepad++ for Windows and Text Wrangler for Mac OS. Linux users: You know where to go, your packet manager gives you tons of possibilities.
Browser Extensions
Really useful, they help you debug, increase your workflow (and some of them actually look pretty sexy 
).
My beginner recommendations:
- Firebug (Firefox only)
- Window Resizer, Firefox version / Chrome version
- Web Developer, Firefox version / Chrome version
Tutorials
Examples for great websites that have massive collections of tutorials and knowledge:
CSS References
Just a must-have for looking up how things are done and what can be done with different elements.
- CSS3.info:
- W3Schools:
- CSS-Ref.com
Vocabulary:
- HTML = HyperText Markup Language
- CSS = Cascading Style Sheets
Thank you for reading! Leave a comment with wishes for future lessons and general feedback please!
