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!
Related
I have a psd files of my website design, So can i convert it into html template.
Template should contain html,css code.
Basically i am beginner in photoshop so i don't know, it will possible or not.
Please help.
Well the good part is that you have the static design, what means that there is no interaction with a user, of your website ready.
I would suggest you to start with one or another interactive prototyping tool like Marvel. Then you can prototype the functionalities of the website and start working on code writing part. This step will also help you and people, who are going to help you, to get the idea what you want to achieve as a final result.
There are also Adobe solutions like Dreamweaver what gives you an option to migrate the Photoshop layers to webpage. But this solution is not free.
After you finish working with prototyping you can take a really good free course on Udacity about developing solutions with HTML5 and CSS3. Codecademy also has good set of courses on this topic.
Hope this helps to start your journey in learning PSD to HTML techniques and web development in general.
Without knowing good X/HTML we can't use css properly optimize way.....
How to give some example and argument in favor of this... to web-design student Who are trying to learn css more but doesn't know how to use all HTML tag wise-full to work with CSS better.
Sounds like you're trying to win an argument with someone. If your position is that said student should learn html in order to use css effectively, I agree with you. But the real answer to your question is "DUH!" (American idiom meaning "there should be no argument").
For the sake of said student, I'll use a construction analogy. HTML is the foundation, walls and roof of any website, regardless of rendering engine (ASP.NET, PHP, Ruby, Python, etc.). CSS is the paint on the walls (among other useful things). If you build a building with crappy foundation, walls, and roof, you have a crappy building no matter how cool the paint looks. Websites are the same way and said student should learn how to build the entire website and take pride in his/her work instead of trying to take shortcuts.
I feel better now.
I am not sure if i understand correctly but one classic resource to look at is CSSzengarden (http://www.csszengarden.com/) i am not sure if it is updated anymore but it is an example of one page styled with just css to make it look completely different in many ways.
It is what inspired me to become competent at CSS styling.
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.
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
Is there any fast guide for web application programmer regarding CSS. From my experiece, if one coder with no graphic design background but good in css can use div and span to create a nice looking page. any such 'quick guide' available for coder?
http://www.csstutorial.net/
http://htmlhelp.com/reference/css/quick-tutorial.html
There are plenty of quick guides on the staples of CSS, but they're more of an implementation perspective rather than a guide to aesthetic qualities (which I think is what you're asking).
To me most, one of the most authoritative sources for this subject is A List Apart. I suggest you start there.
I think what you want to read is "The Principles of Beautiful Web Design". It's a pretty light read, and give you insight in some designer concepts to get you along the way pretty fast.
If you want to learn css to put a nice page together I'd use a framework like 960gs. This won't help you in the context of working in a non-frameworked environment. But if you want to knock up a nice looking page from scratch without doing anything exotic with the layout and get it to work with a load of browsers 960 is the way to go.
Still go through some basics in css though.