As a new to web development i wonder, where should i start learning.
Should i start from a big good book on HTML5&CSS3 and hope, that FF and Chrome will support what i do, OR the whole world novadays doesnt write CSS themselves, and use help of JS-based CSS frameworks?
I think i wont be able to do a real world website in a year, so we must keep it in mind.
I hope, with modern browsers bit by bit support of new futures of HTML&CSS, many things can be done by native CSS3&HTML5 to the moment i 'graduate' w3school:)
If you are new to web development, I suggest you stay away from CSS frameworks and concentrate on "basic" HTML, CSS, and JavaScript. It is surprisingly easy to make a "real world" website with these basic tools. The whole world does NOT use CSS frameworks, most web designers do write the CSS themselves.
The best way to learn is practice. I would find something you are interested in and use that as a project to work on. Show off your knowledge and talent with whatever you are into!
You should be aware it will be many years before HTML5 and CSS3 are supported by all browsers, I expect that many will stick with IE8 for a long time since IE9 won't work with XP.
you should start by getting a little project. Make random sites. Pretend you got a webdesign studio. Look at other sites. view their source. Get your hands dirty. W3schools is your best friend.
start with html,css then add javascript(jquery) then go serverside. you could do this backwards too.
thats how i started.
my 2 cents.
HTML and CSS are very simple. Being a good developer is having the experience to know how things work and when to apply what.
On the other hand jQuery is a library, thus like a real life library you are always reading. Learn how it works, and then learn to google regarding what you are looking for.
Don't skip ahead to HTML5 and CSS3, that's a lot like starting with a beta product, they are not yet standardised, but have been adopted (thus far) by the browsers.
Analogy
A very good developer is a cowboy with his hand at his holster ready to whip out the perfect bit of code, due to experience and practice.
The novice has to get his gun out of bag, clean it, load it and aim it . As long as you are not going up against an expert your fire eventually, just hang in there.
P.S. Nearly forgot, the only point of framework ultimately is to increase the speed at which you can develop. If you don't know how it works it will only slow you down, and you don't need that on top of everything else.
Related
This question has been asked before somewhat, but I hope mine differs. My situation is I have been a desktop developer for 8 years (winforms and silverlight, also ios). More and more web contracts have been coming up for me but I have passed on most because they cause me more headache than what they are worth. I have just completed a dating website for a client in asp.net mvc. My problem I really have is with the development of the actual webpage layouts. Something that would take me minutes on the desktop equivalent would take me hours in the web, trying to align everything correctly so that it would look correct.
If I could streamline page development my web development would be 100% better and quicker. Can anyone give me any tips/advice? Coming from desktop development where you would drag and drop items on and anchor them accordingly.
I dont know if Im missing something or whether my heads web layout space, its in the desktop layout space. HELPPP!!!
Thanks in advance
Well, one BIG difference from desktop to web is that you are at the mercy of (so-called) standards.
in desktop development you know and expect consistency of rendering on the client - and thats why drag and drop, pinning, auto-resizing (of all elements!) is as expected 100% of the time. Your settings are in fact set - "set and forget".
on the web, you have to contend with whatever browser your user is using, what it can handle as far as "standards"
That's why it takes more effort and a mixed bag of tools to get to some parity across possible clients to your application.
So that's why really knowing code (instead of "design view") matters a lot - and it means a lot of effort as well. As time goes by though, you'll come up with your "trusted toolkit" and create your own (or use readily available) code and/or design libraries/templates (JQuery, 960 grid and similar, and a whole lot more).
And that's just talking about the front end.
You'll have to understand the "stateless nature" of the web/http and have to figure out how to persist data - you do this too in desktop dev, but its a little more fragile when it comes to web.
On the back end though, if you have a mature framework (i.e. .Net) you can have a lot of code reuse.
The "open" nature of the web has its pros and cons, and while the web has gone quite a long way to "mimic" the desktop, that term (mimic) says it all as well.
You'll also find "religion" on the web, and its rarely a good thing. I'm sure you've heard of this very mature technology called Flash and well, it seems that its suddenly out of favor - all because of something called iPxx :) A mature technology that has had more than a
decade of growth. Apparently "plug-in" is evil now (hint, Silverlight is...)
The replacement? HTML5 and Javascript and CSS which is graduating from mere styling to include things like transforms and transitions - not sure if that's a good thing - seems separation of concerns (MVC) goes out the door (but who am I to judge) ...which is in its infancy - don't get me wrong I've seen amazing things by the bleeding edge gurus - but bleeding edge it is and to avoid rambling, going back to my first point, subject to, yes, so-called standards of different clients (browsers, devices, etc.).
So yes, it's an exciting time to be sure. So as the saying goes, "stay young, stay foolish"...and never stop learning.
Well, there is no definitive guide to switch perfectly from desktop developement to web developement but there are some tools which will help you to accomplish your goal.
The best (and most expencive) tool would be to use dreamweaver:
http://www.adobe.com/de/products/dreamweaver.html
But be aware, sometimes, the html looks ugly. This could be the best practice. Build some designs with a tool and modify the html code to your likes.
This is a best-practice topic.
I saw it as a prefer method for some web developers. Instead of doing the CSS layout from scratch, they start a photoshop mockup first and then decode it into CSS.
What do you think about this approach?
Best to all,
Mockups are great, but I don't know if photoshop is the very first thing you'd want to try for the purpose -- at the very start, when you're just trying to get a logical layout for the various pages of the site (before refining it in terms of looks &c), a whiteboard with dry-erase markers and post-it notes affords for very fast, repeated mock-up rearrangements for the early brainstorming. Once there is some reasonable agreement on one (or a very few) possible arrangements of information, then visually more accurate tools enter into play.
BTW, just don't forget to photograph the whiteboard before changing it (any decent cellphone will do, you're not trying for high quality here;-) any time there are ideas or suggestions you may want to revisit or ponder in the future!
It is fast. This is why i always use this method. You don't want to spend the time building cross-browser CSS until you are actually set on a layout.
Most webdesign graphic artists work this way.
Many programmers simply find it a waste of time.
It has advantages, and disadvantages.
Advantages:
Many graphic artists grok photoshop/illustrator more than they do dreamweaver.
Customer gets a preview of the final product that works everywhere: mac, pc, firefox, ie, safari, whatever. Sending an html preview in early stages of production with developers using firefox and customer using MSIE always stirs up trouble.
And don't think to be on the smart side, scribbling MSIE driven html. Starting with non-standard html and converting to standard is more painful than doing it the other way.
There's one more catch: many web site customers tend to have a Mac and use Safari. Web committents tend to have a stronger taste for graphics than the average, so the chance to bump into Mac maniacs is higher in this sector than in others.
More design alternatives can be prepared spending less time on each one. This could be a dramatic advantage while dealing with murky clouds of executives with no designated decision-makers on the customer side. Alternative mockups will be passing hand-to-hand until general consensus is reached on one design or the other.
Disadvantages:
"Cutting" the graphic design into html becomes an additional work and it's not clear who's gonna pay for that extra time.
It favours graphic-centric, and rigid, design workflows. Customers agree pre-emptively on a given preview and that's what they get by contract. Every graphic modification means money, behaviour and programming instead tend not to be well defined, or worst, ill defined by the mockup.
The quest for pixel perfect cross-browser adherence to the mockup may drive you insane. If you agreed on a given rigid design with the customer, that could become a dire issue to pursue.
Dirty CSS tricks shoe in into your design. Using an HTML mockup, the customer would have approved a design driven by code with less tricks in place.
Anyway, I wouldn't suggest photoshop for a mockup, but inkscape. (or illustrator, if you worship adobe by burning piles of money into magic circles at midnight)
A scribbling stage is good too, while discussing the contract live with the customer.
I prefer pencil and paper to felt-tips, and I webcam shoot ideas for archiving and email forwarding. When it comes to scribbling, anyone does what feels more natural.
Not doing any and rely onto sample site examples and screenshots for graphical reference is always an option.
If you're productive that way, why not? Not everybody manages to envision their Web site perfectly as they're typing in a bunch of angle brackets.
More seriously put: It's your job, so it's your responsibility to do it in a way that allows you to do it effectively.
When prototyping, it's important to choose the right fidelity. This article from BoxesAndArrows provides a nice introduction to the various options and their uses.
I particularly like this line by Bill Buxton which the article quotes:
There is no such thing as high or low fidelity, only appropriate fidelity.
In this TechTalk by the Facebook Design Team, they mention how they use Photoshop in their design process (IIRC it's somewhere midway through, but I can't seem to forward through the video).
I am a web programmer who knows html and css fairly well. I can use a graphic program for it's basic functionality, but desinging a complete graphical web site is not my thing.
I let a graphic designer use his or hers graphic program to create a nice looking layout, and than code the website by hand in html and css.
It works for me, and gives my customers a design they like (cause a graphical designer will always make a much more nice looking design than most web programmers).
Agile methodology would suggest something easily modified in consultation with the customer. Dave Thomas in Agile Web Development with Rails suggests scribbling on paper. But anything has got to be better than chipping away directly at handmade CSS unless you really know what you want.
I was thinking about saying "scribbling might not cut it for a formal presentation" but the awesome SO crowd beat me to it in the comments...
Personally, and at every webdev firm I've worked at, I've always mocked-up in photoshop first. Jumping straight into CSS and markup is more of a bottom-up approach and makes sense to a lot of programmers but in web development you have to keep in mind that there are aesthetics to consider and a creative direction to follow. It's not enough that your product is functional, it needs the input of a professional creative-director/graphic-designer in order to make the product pleasant to look at and use.
In my experience, the problem has always been wrestling with inflexibility of team-members. Graphic designers who are aesthetics focussed and refuse to compromise their design integrity; which sometimes results in impossible or extremely difficult and un-semantic layouts. Developers who flatly refuse to compromise the integrity of their code where there is a workable solution - which might be a little less elegant. The key is to have a creative team who is intimately familiar with CSS and what is and isn't possible and an engineering team who have an appreciation of the importance of design and aesthetics.
In my freelance life (having had the benefit of working in both camps) I find it much easier to mock-up in photoshop first because I know what I can and can't do. And photoshop mockups are a lot easier to change on client feedback than are CSS and markup. Also, if you can show your client a mock-up, they feel more secure because they know that their money is going into a well planned project with a definate direction.
Hope this helps!
For some reason, it never dawned on me that there could be frameworks for CSS. I have been working on my own personal site, and I just really hate 'designing' with CSS (I think more then a few programmers might agree with me). Anyways, I understand the benefits of a framework for a language such as Java, PHP, [insert language]. I downloaded a couple different CSS frameworks and couldnt really figure out how to use them. I guess I might be expecting an API or something (which obviously doesnt make sense given the lack of logic in CSS)...
Has anyone here used (and would reccomend) a CSS framework? Is it overkill for a relatively simple layout?
Please do not post links to other sites, I know how to use Google. I would rather hear the opinions and insights of the community. Thanks.
Please understand framework here simply as 'a collection of helpers for getting things done'. So what will you get in most cases is a set of CSS definitions, resetters and hacks, which you will probably need to code for yourself anyway when having cross-browser compatibility on mind.
No links? K. First, you should get familiar with Grid Design techniques. My fellow front-end developers recommend Blueprint for handling CSS-based layouts, no matter how complex they are. Hope this helps a little.
Caveat: I haven't really looked into this subject in a few years, the landscape may have changed.
The few CSS frameworks I've played with in the past have been more or less hideous things designed for snapping to grids, wrongheaded desires to bring WYSIWYG into the picture, and providing things like generic rounded corners and such. They tend to have some semantic issues (.italic FTL) and require a lot of manual tinkering for a framework.
More practical for the CSS beginner or rapid dev site, are perhaps the CSS reset which functions to baseline CSS across browsers (yahoo's) (Erik Meyer's). But this is not without it's own controversy and never seemed to be enough.
Basically. I find CSS requires a toolbox of common techniques of your own, but something you'll pick and choose and modify constantly. As in much of web dev I think the more experienced you get the more you find yourself wanting to roll your own.
I used YAML (Yet Another Multicolumn Layout) in a few projects, because I didn't like to "fight" with the Internet Explorer 6 HACKS.
There is a good explanation of how to use it and you can customize it to your needs (as long as you're going to use a multicolumn (2 or 3) layout).
960.gs seems to be fairly popular with designers lately, although I have never quite seen the point to CSS frameworks myself.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
As a little side project, I am starting to build a new website for a certain organization I am affiliated to, which current site is simply outdated.
I am regularly a Java developer, and last time I really did some web development was back in the late 90s, when <p> was still more popular than <div> and Javascript was cutting-edge technology (JQuery is for lazy bums these days :) ).
Anyway, I feel really outdated. The website basically is going to be:
Django based
mostly serve static information pages
it will have a dynamic news and updates page (based on Django admin capabilites)
and some basic apps I'll develop myself (polls, small registration app, etc...)
My problem is designing the whole thing. I found some nice web-based CSS layout generators that got me going, but I still feel I'm wasting my time smoothing out the CSS files and aligning <div>s.
Are there any tools - the simpler and faster, the better - that you recommend I can use to speed up the design part of the site so I can concentrate on the real work?
I don't need anything fancy, just a nice looking layout and design that I can tweak a bit so the site will look presentable.
I second Brandon's suggestion to use a CSS framework. It won't give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.
Suggestions Updated July 2013:
Twitter Bootstrap http://twitter.github.io/bootstrap/ - complete grid, typo, UI widget prototyping framework
ZURB Foundation http://foundation.zurb.com/ - responsive grid, type, UI widget prototyping framework (similar in scope to Twitter Bootstrap, but feels 'cleaner' in some ways)
960 http://960.gs/ - grid layout system
Tripoli http://devkick.com/lab/tripoli/ - really good typography, but no grid system
YUI Grids http://developer.yahoo.com/yui/grids/ - very customizable (to the point of overkill) grid system
Blueprint http://www.blueprintcss.org/ - grid system and basic typography
BlueTrip http://www.bluetrip.org - a hybrid system, mixing the best of the Blueprint grid with the best of the Tripoli typography
I won't lie to you. This website isn't the best place to go if you're looking for reliable Web Design advice. Stack Overflow is a programming community and programmers rarely know anything about design. If you want to get some real advice then I would strongly recommend the main Web Design/Development forums on the Internet, especially SitePoint.
That being said, as a former freelance Web Designer/Developer I'll offer my input on the issue. Not that you should value it, of course. After all, this is a programming website.
NEVER EVER SAY CSS LAYOUT GENERATOR EVER AGAIN! If you're going to seriously get into designing web pages then you need to learn semantic XHTML and CSS first. Whilst many people tout W3Schools as the definitive resource I see it as a programmers answer (i.e. not very good) and would prefer that you read up on the subject using...Google. There are countless examples of great websites to pick up the basics of Web Design/Development that Google is probably the best website for the job. Also, with a plethora of new websites offering this information you know it's going to be more improved than W3Schools. You'll seriously want to get clued-up on writing your design because it'll be much harder to fix things later on in the project.
If you're going to be designing web pages it would be a good idea to learn what actually makes a good design. Check out CSS Vault for a fantastic resource of some of the best-designed web pages around, of course with all the source code intact so you can have a play around with their code and see how they've managed some of the wonderful effects they've produced. I've learnt more than a thing or two from websites that have been featured on CSS Vault. On top of that you should read up on Web Design from the big Web Design/Development sites. Two of my favourites are SitePoint and A List Apart, two names that you'll near time and time again when you hear people talk about resources. Browse those websites, check their forums, see what REAL Web Designers/Developers are using, not what programmers are using.
On the subject of CSS Frameworks; they do help! The problem with using them is that you'll often spend so much time looking for a worthwhile framework that you could have finished most of the CSS for your website yourself. You'll either love them or hate them, but many people will say that they're not necessary.
Once you've got your mind set on what a good design looks like and you've got the resources you need to make something of value I suggest that you get to work! In reality when you're designing a web page all you really need is a text editor with a save function, an image manipulation program, a browser window and FireBug. An IDE helps a lot of people, but if you do use one then you'll definitely want to work in its text mode. I use NotePad++ or Emacs exclusively but a lot of people like to use Aptana Studio, so it may be worth a look.
When you're getting to actually building the code behind your website you can't really go much worse than your favourite IDE/Text Editor and a source control tool. As a Java programmer you're better suited to talk about programming so I won't lecture you on a subject you already know.
In the end, Web Design is going to take time and many of the tools that we choose to use that we claim will "save time" save very little in reality. If you're not a design guru then it will take you a substantial amount of time to create a great-looking website. It's a fact of life. Call me old-fashioned (a funny word coming from a 21 year old) but I still think that the quickest way is to sketch a design out on a piece of paper (a image program if really necessary) and to just get out there and make the damn thing! Again, I'll have to take this hunting for the silver bullet mentality as a programmers trait, one that really won't help that much when designing, because designing a web page is vastly different to writing a Java program.
In short, ignore everything you read here, read what REAL designers are doing and just make the damn thing!
There's one piece of advice that saves more time than any other when it comes to rapid development of CSS styled sites and that's KEEP IT SIMPLE
Use an attractive simple layout that doesn't require pixel perfection and that can 'gracefully' degrade in less compliant browsers (IE6). Minimise the amount of CSS and fix the basic bugs mentioned by meouw above. Then get on an concentrate on content and functionality...the real work
In my previous employment I created dozens of templates for websites.
The most useful too I ever discovered is the Firefox Web Developer Toolbar.
It has a wealth of small useful tools. My favorite feature is the ability to edit the CSS and see the results in real-time. This saves on the whole edit - upload - refresh cycle. Watch out for ie CSS inconsistencies though!
Off the top of my head, these are the most important gotchas.
double margin bug [google: double margin bug]
incorrect (but more intuitive) box model [google: box model]
incorrect (but more intuitive) float clearing [google: clearfix]
FireBug is another really usefull Firefox plugin for more in depth analysis.
I've always found Open Source Web Design to be a good resource when looking to get started trying to design something.
- http://patterntap.com/
- http://www.dotemplate.com/ (interesting concept of customizing template)
- http://www.templatemonster.com/
- http://www.freelayouts.com/websites/html-templates
- http://www.templateyes.com/
No idea what the site is going to be, but have you thought of using a pre-build CMS like Drupal, Joomla etc etc.? You can then tweak templates etc, rather than worrying about making it from scratch.
This question is pretty old, but since we're in 2012, it's only proper that I answer my own question with the exact thing I was looking for, back in 2009.
Twitter Bootstrap
Have you looked into any CSS frameworks? If you are competent enough with CSS something like a framework could help speed things up.
Don't forget firebug :) if you're worried about tweaking the design it's really great. With the inspect feature allowing you to real-time edit the CSS of your page.
https://addons.mozilla.org/en-US/firefox/addon/1843
I second Jens Roland's list of CSS frameworks.
But I would also suggest you have a look at websites such as Smashing Magazine. You might find this article of interest, amongst a lot of others. They tend to do a lot of nice and long mash-ups for the web developers that will at least give you inspiration if not a direct solution.
A colleague of mine has been trying to convince me all week that Dreamweaver, 5 years after I was last forced to use it at gunpoint, is actually now worthwhile for knocking up a design quickly and painlessly, and is also now competent at producing the HTML for that design.
I refuse to invest the 10 minutes it would take to find out based on my previous experiences of it, but you might like to give the demo a quick run around the block :)
I'd recommend finding a CMS package, since you're using Django, look into django-cms. It has TinyMCE and Markdown Support so updating your pages should be easy. Also django-cms integrates well with the Django admin interface.
A piece of paper to sketch your design
A text editor (preferably set up to save directly to a development server local or otherwise) to write up the initial HTML/CSS
FireBug/IEDeveloperToolbar to inspect each element that looks wrong and edit its CSS directly in the browser until it looks fine, followed by commits with the text editor
If you're doing any JavaScript development, use an advanced editor that highlights errors and warnings as you type. This kind of functionality has until recently been the province of static language editors only, but the free NetBeans 6 achieves this amazing feat. Traditionally, you first discovered JavaScript typos and simple bugs when first loading the parent page into a browser. The speed-up you get from being able to short-cut these iterations is profound.
NetBeans 6 also highlights CSS errors and is a more than capable editor for most all languages a web developer is likely to use these days.
You can also use www.zbugs.com - it will help you speed up a process of compressing and gzipping your CSS and Javascript files
I've just finished a flash project where I did the entire project in "pure" AS3, without the use of the Flex framework. I found very little written about this on the web, so I'm not sure if this is a common way to develop RIA's, or if I've jumped off the shoulders of giants and done something stupid that will bite me later.
It seemed like a good idea at the time (famous last words!), but was hoping to hear from someone who could confirm.
Thanks,
Marcus
There's nothing wrong with it. People do that every day using FlashDevelop and AS3-only frameworks like PureMVC. Doing a complex app without any framework to support may get difficult to support in the future, but should be OK if you adhere to well known best practices. Future maintainability, especially if it has to be maintained be someone else, can also be greatly improved by using common design patterns throughout your code and architecture. Barring all that, if you're really just slinging code to build something with any real complexity, you're probably screwed unless you documented every function and the overall architecture very very well. Maybe not today, maybe not tomorrow, but some day you're (or someone else is) screwed! ;)
Flex is nice if you want to create something that looks great real fast within the confines of what the Flex framework gives you.
We used to fight weird framework bugs which Adobe didn't seem to care about or took way too long to fix. So we opted to drop Flex in favor of our own UI framework and we've never looked back since.
Sounds like a perfectly good idea. Flex is really just an overlay of rapid-prototyping, and communication standards, on top of pure AS3.
What you gain in ease of development and a large library and API, you lose in streamlined, strength and simplicity.
I'm currently developing a medium sized app in Flex and although the first phase of development was a breeze, the later stages have been fraught with weird framework eccentricities.
It is definitely okay. For example, I've heard that the Issuu.com platform is not based on Flex but a custom framework.
Thanks all! I've been very happy with AS3, and like the amount of control I get, as opposed to using MXML/Flex. It's good to hear I'm not crazy!