So, as recommended, I did the W3Schools HTML and XML tutorials this weekend. I understand the basics.
Now should I look to get more depth in HTML, or go straight into learning CSS (and try to keep learning html at the same time)? If the first, where should I go for more advanced HTML tutorials?
Go for HTML (XHTML) and CSS togehter as the CSS is the proper way to stylize view of your XHTML data.
I do recommend reading the excellent book: Head First HTML with CSS & XHTML
IMHO, i would say depends on your role, are you a designer or you're the coder guy who have to put functionality into the site?
if you're into the design, then i would say css and good website designs are necessary.
in that case i would recommend don't make me think and erik meyers css book.
but if you're into the functional part of web site, i would say learn javascript then jquery. i can't tell you how many times jquery save my bacon.
and finally nothing beats putting theory into practice, so you can either search around and view source and learn from good sites, or start creating your own :)
Check out these resources, they are great.
http://www.amazon.com/gp/search/ref=sr_nr_i_0?rh=i:stripbooks,k:zeldman&keywords=zeldman&ie=UTF8&qid=1269221229
You can also visit your favorite sites and View Source and see what they are doing. Try to recreate it in your own example.
Learn as much HTML as you can, because it will make you better at complicated layouts which will require a bit more advanced CSS.
for a begginer good start at learning HTML would be to study existing web pages around the net, by either using web dev tools inside browsers or some web-app like http://webdeconstructor.com/ that let's you analyse layout of any given web-page and all HTML tags on it
if "WEB front-end development" like a person
the "HTML" makes he's "skeleton"
the "CSS" makes he's "surface"
the "JAVASCRIPT" makes he's "action"and"thought"
so you should learn them together
Related
I need to make an web interface for employees of a company to use. I don't have a person designated to doing design or markup, and they don't really need to be anything spectacular. Nonetheless, I would rather not focus too much time on markup and styles.
I'm wondering if there are any tools or techniques which can make this easier. It could be a WYSIWYG, or some kind of intermediary markup, but the end result should be clean simple HTML/CSS. I'm open to anything right now. Thanks.
Write it by hand - it's the only way to get clean, simple, valid and semantic HTML and CSS.
If you're willing to forgo the semantics, you may want to look into a CSS framework, to take care of some of the layout busywork. I am not a fan of them, but I've heard others find them quite useful. Blueprint and 960.gs are the two I hear about most frequently.
There is a bunch of sites, offering you clean html templates for free, like:
http://www.free-css.com/
http://www.freecsstemplates.org/
http://www.opendesigns.org/
You can edit those templates, and make everything you want.
Check out zen coding
TinyMCE gives you very clean HTML output, even when you paste word to it
http://tinymce.moxiecode.com/tryit/full.php
Its easy to implement, but if you want some kind of CMS try Wordpress it is very good for simple sites
http://wordpress.org/
I have to agree with #Karpie, but if you want to make your life with CSS easier you can try some CSS framework, there are many of them out there. I recommend you 960.gs or something like that for layout. Check it out.
I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML.
There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages.
For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below?
Ok, it seems stupid, but there's lot of ways of doing that, or not ?
So, how can I learn this patterns and what are the real patterns ?
Would appreciate suggestions of books, articles, etc.
you can find some good css templates here:
http://www.csszengarden.com/
Actually in html and css there are not patterns in the oo sense.
I find this tutorial very useful:
Design and Code your first website
The nettuts website has a lot af very good free tutorials.
A very good book to begin is:
Head First HTML with CSS and XHTML
It varies from developer to developer. So I'll just tell you what I'm doing!
I'm actually following a very common pattern - separate ANY layout from the contents!
Into the HTML goes...
Text
<div/> containers with IDs to be layouted
And in the CSS goes...
Layout for the ID'd and class'ed <div/> layout containers
Colors, Background images
Fonts
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
You might want to check out some CSS libraries.
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
Let me begin this topic by explaining my background experience with web design. I have always been more of a back end programmer, with PHP and SQL and things. However I do have a shallow background with HTML and CSS. The problem is, I don't know it all. What I do know is, when it comes to designing (not back end dirty work) I understand basic CSS properties and I also understand HTML and I can usually throw together a sloppy web page with the two and a couple bazillion DIV tags.
Anyways..
The problem I always have encountered is that when I design a website in a browser such as IE7 (and then it looks perfect on IE7), and then look at it on IE8 or IE6 or Mozilla (etc.) it gets all spacey and ugly and looks totally different than the way it should look on IE7.
Question one:
Basically, what I am asking everyone is what route should I take to learn how to properly build the website? Build as in put it togehter with CSS standards and HTML standards that will make my site look the same on every brwoser. (Not only learning standards but where can I learn to properly write my code?) Where is a strong free resource I can use to learn how to these things?
Question two:
How do I properly code my website? Do I use all external style sheets to make dynamic page design simplistic or do I hard code some things into the DIV tags on each page? What is proper?
Oh, and if anyone has any tutorials on how to properly design a complete layout feel free to throw it in a response somewhere.
Thank you for taking the time to read my questions, and hopefully you will understand what I am trying to get out to everyone. I need to get on the right route of the designing side of web programming so that I will know how to create successful websites in the future.
Thank you,
Sam Pardee
First, I recommend NOT starting with IE as your "development" browser. Start in Firefox, say (which gives you the advantage of tools such as Firebug and the web developer toolbar), and then get it right in IE afterwards.
Second, definitely user external style sheets; it results in much cleaner code and a much simpler way to make style updates. Definitely recommended. Also external CSS files can be cached by the browser, so they won't increase the page download size as users go from page to page in your site or application.
Lastly, start by defining your content using simple HTML, basing the structure on the meaning of the content (often called "semantic" HTML), not on how you want it to look. Use a <ul> tag for something that is a list of items, for example, even if you don't want to display it as a "bullet list" (the default styling for <ul>). Then start adding styles to make it look right. This will result in very clean HTML that can support a variety of formats and layouts (take a look at CSS Zen Garden to see what I mean) and will also help push you towards a layout that reflects the structure of your content, which will be easier to read and comprehend.
In terms of books, you can't go wrong with Eric Meyer. HTML is easy, of course, and I don't recommend doing fancy stuff with HTML, so put your learning effort into CSS (Eric is the CSS guru).
Cross-browser compatibility is always an issue. It's a staple of web development, sadly, and there is no magic bullet. Luckily, the main offender, IE6, is finally starting to fade.
A1.
When starting work on a new site, first take every piece of content that needs to be on the page and paste it into a text file. Then put it in a rational order (thinking "If I had to use a text browser to use this page, how would I want it to be arranged...").
Then start wrapping HTML tags around each piece of content. For each piece, think "What type of information is this?" A heading? h1/h2/etc tags. A paragraph? A quote? A table? p,quote,table. Essentially, use HTML tags that describe what kind of information each piece of content is. When I do this, I pay no attention to how it actually looks in the browser at this point.
Once the content is all marked up, begin writing the CSS. If at all possible, try not to touch the markup during this step. Sometimes that isn't possible, though, and throwing a div or span around some elements is unavoidable. The less meaningless markup, the better.
In my experience, this approach keeps things very clean and tidy, and makes debugging layout issues a lot easier.
A2.
Building the styles into your markup using the "style" attribute is fine for prototyping, but beware, the temptation to leave them there once it works is strong. The best practice is to have all of your styles in external stylesheets. I'm interested to hear any alternative viewpoints.
Some great web standards/CSS resources:
http://www.csszengarden.com/
http://www.alistapart.com/
http://www.thenoodleincident.com/
http://www.quirksmode.org/css/contents.html (useful reference for selector-compatibility)
http://centricle.com/ref/css/filters/ (good reference for css hack compatibility)
http://www.zeldman.com/
http://meyerweb.com/
Hope this helps!
There are TOO many site out there that have really great tutorials for HTML and CSS. They will give you all of the information you are asking for. I would start doing some reading of the great gurus of HTML/CSS:
Simon Collison
Andy Budd
Molly Holschzag
Dan Cederholm
Jason Santa Maria
Eric Meyer
Jeffrey Zeldman
Cameron Moll
Any book or article you can fond from these folks will steer you in the right direction; you can't go wrong!
As for sites that will give you the proper methods/concepts/training for web standards compliant sites:
http://www.w3schools.com/default.asp
http://www.webstandards.org/
http://www.smashingmagazine.com/
http://www.webdesignpractices.com/
http://www.designmeltdown.com/default.aspx
http://www.cameronmoll.com/
http://www.alistapart.com/
http://www.cssnewbie.com/
http://www.css3.com/
http://htmldog.com/
http://css-tricks.com/
http://simplebits.com/
http://www.colly.com/
http://glish.com/css/#tutorials
http://meyerweb.com/
http://jasonsantamaria.com/
The one of the best books I've bought so far to help with HTML and CSS coding PROPERLY is Beginning CSS Web Development by Simon Collison. Great, easy to understand, and not too slow. Great examples to follow along. After that, buy CSS Mastery - Advanced Web Standards Solutions, also by Simon Collison, and Andy Budd and Cameron Moll. This book gets you up to speed with some advanced techniques that you'll see on the many of the web sites right now, some of which were invented by the authors.
I have general question how to start developing my skills in web designing.
What is best place to start and what technique to use.
I have some knowledge of html and css, so far I have been building sites with already done all html and css. I would just use it and maybe do a smaller changes.
I want to be able to make html and css out of image that artistic guy produces.
http://w3schools.com/ has some great tutorials and you can play around with stuff right their on their pages.
A lot of the really "artsy" sites are produced in another program first, usually Adobe Photoshop or Adobe Illustrator, and then 'sliced' into HTML div's. NetTuts has a handful of tutorial on how these that show the complete start-to-finish. Here's a few I found real quick:
Design and Code a Slick Website from Scratch – Part I
How to Design and Code a Flexible Website
New Plus Tutorial: Convert a Beautiful PSD to HTML and CSS
Coding a Beautiful Website From Scratch: Plus Tutorial
(the last 2 I think you have to be a paying member for)
Here's a great web resource to check out for HTML/CSS: http://htmldog.com/
Also, do a Google search for "psd slicing." This is the process of taking an image of a website layout (a.k.a. mockup) and turning into valid HTML/CSS. You'll find a lot of screen casts and tutorials that will walk you through the entire process.
Start by getting a book and look at some tutorials. Google will help you there. Once you've got a decent idea of what's going on, look at a site, and try to duplicate what it looks like. If you're curious as to how something works or can't figure it out, look at the source (preferably with firebug) :D
Good luck
As others have said, getting a good book on HTML/CSS will certainly help.
Also read up on Web Standards - I think its really important to start learning these principles from the beginning as it will help you write valid HTML/CSS... and avoid writing invalid code.
I highly suggest the book "CSS Mastery". It's got a green cover with a pink binding...I think they've recently released a new version actually. Amazing book for beginning and advanced. I consider it my CSS bible.
I highly recommend w3schools.com and the Head First HTML with CSS & XHTML. I like most of the book in the head first series, in fact. They take a fun very visual approach to learning & I am a visual learner. Lots of things to practice & hints to help remember things.
If you don't feel totally confident then definitely pick up Head First HTML. Aside from that there are a few websites I would recommend:
A List Apart,
Stop Design
and as others mentioned the W3 website.
Working with a designer often means that they will produce mockups using Photoshop and you will in tern work off those. As that is the case having a working knowledge of Photoshop will be very useful for you. You don't have to be a wizard but some basic knowledge will enable you to do things like create image sprites from the mockup and get information relating to the width, height, color, etc of the different components in the design. As far as getting up to speed quickly there are many books on the subject, the Photoshop One on One books are a pretty good series and there are video tutorials available at Lynda.com.
I started on just looking at youtube. A really simple book for learning to code css and html is get coding. It's for kids, but it's a great start. I started there about a year ago, and now I've developed multiple websites for a couple of businesses. And I'm only twelve!
The Separation of Layout and Content is the domain of CSS and HTML - so far well understood. Now about separating...
I'm looking for hints and Best Practices to get started with the task of providing a "skin" or "theme" for a content management system.
Background:
We are starting to embrace a Portal Server/Content Management System and are starting to change the look and feel to match our needs.
Our designer has so far mainly worked with full control over HTML and CSS, tweaking either one in order to get pixelperfect layout. With adoption of the cms there's a lot precreated HTML (very semantic, almost no tables :) that needs to be skinned with CSS and Images. Though it is possible to change the HTML fragments, I'd prefer to do so only as a last resort.
As this provides the challenge of "how to get started" my question is about any tipps how to proceed or articles that can help managing or organizing this task - e.g. best practices in designing, how to slice this task or what tool to use.
It seems bad practice to just save a dynamically generated page to disk and make changes locally. This would be somewhat ok for the CSS files but changes to HTML elements must be retrofitted to the fragments that they are generated from. I'd like to keep this out of the designer's realm if possible. Also, the thought of Dreamweaver (or any similar tool) making implicit tweaks to the HTML structure is frightening for me.
For the curious: The mentioned CMS/Portalserver is Liferay, but the question is really language- and tool-agnostic.
Edit: FireBug (as Josh suggested) is awesome for trying on-the-fly changes to css. Is there more - either in the area of tools or in-process and self-organization?
If you're looking for practical examples of separating style and content, then I'd suggestion the CSS Zen Garden. Trawling through the HTML and CSS is inspirational and enlightening and should help with what you're trying to do.
My #1 tip would be be to make everything as semantic as possible and use lots of classes and ids to hook your styles onto.
Usually, Whenever I am in a situation Like this, I bring up the page in FireFox, inspect the different elements using FireBug and see exactly what css is applied to them. THen I'l just modify the existing css until I get what I like. You can even play around in firebug and modify the CSS without "saving" those changes.
Have look at CSS Tidy, we normally use this to clean up the CSS and reorganise for development and production. However, I personally prefer writing HTML/CSS by hand before using this. It is just a matter of individual preference I guess.