As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
i'm a beginner at web development, i've just learned about XHTML 1.0 and CSS and had a brief look at HTML5.
And i don't know. Should i start reading about Javascript now or do exercises in HTML & CSS ... I really think i should exercise, but i don't know how to, or what sites that good for this .
Please help me, thanks in advance.
I recommend you start by getting a strong sense of how HTML and CSS work before playing around with JavaScript.
Consider yourself to have a strong sense of those skills when you can do and feel comfortable with the following:
Create several webpages by hand on
your own
Learn a bit about using Divs, and play
with styling them using classes and
IDs
Learn to import your CSS from an external file, and then create an HTML page that can use one of a number of CSS files to code it. Look at CSS Zen Garden to see what I mean
Learn how to use Firebug in Firefox, and particularly play around with styling padding and margins on content on an existing page using Inspect Element. 2013 update: Chrome's dev tools, are getting much better. Link
]2
For the more interesting JavaScript you are going to want an understanding of the Document Object Model (DOM) and you will build that up by doing the above.
If you are at the point that you feel you have done all of the above, then you are probably ready to dive into JavaScript.
Do note that HTML5 is also supported somewhat differently between browsers right now, so focus more on HTML for the moment before diving in to HTML5, that way you can avoid having to deal with some odd quirks still present in HTML5, and the fact that HTML5 has somewhat less documentation.
I highly recommend this book: http://www.sitepoint.com/books/html2/
Its the Build Your Own Web Site The Right Way Using HTML & CSS book, for those who don't want to follow the link.
It is written for newbies and is the book I always recommend for people wanting to learn html and css.
Build your website with HTML/CSS first. Get comfortable with writing semantic HTML. Know how to use floats and how to contain them. After you've made a couple websites with different layouts progressively enhance that with Javascript.
Once you get comfortable with Javascript, take a look at one of the libraries out there to make your job easier (Jquery, Prototype, MooTools).
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have knowledge of HTML, CSS, and jQuery. Recently I knew about Sass and less. As they both are the style sheet language I am a little bit confused about where to use both of them as CSS is already there and it is also widely used in every website. So how to know where to use these (Less, Sass) in that particular field.
Another doubt comes to my mind is, is it fine to use Sass and Less in wordpress instead of default CSS?
As zzzzBov said, LESS and SASS are css preprocessors.
Basically, you pick one and write your style definitions in that language. When done you run it through the preprocessor and it will generate a normal CSS file for you. That normal file is what you would use in your site.
I'd highly suggest that you skip using SASS/LESS or any other preprocessor until you are more familiar with CSS in general.
A little more information about LESS.
LESS can be run ahead of time as an actual preprocessor OR you can simply link the less.js file and your .less file and let the browser do it. The problem with letting the browser do it is that every single browser that hits your site, for every single page, will have to "recompile" the css in order to render your site correctly. Considering you have zero control over the computers hitting your sites this might result in a "slow" site from some peoples perspective.
Further, that javascript only works in some of the browsers, further limiting it's usefulness.
Quite frankly, CSS is one of those things that you generally set up once for a site and leave alone for a year or more. So, it may simply just not be worth it.
SASS and LESS are two Domain Specific Languages that are converted to CSS via a preprocessor. The preprocessor can run client-side in Javascript or server-side via PHP, Node.js, Rails, etc.
Either SASS or LESS would be excellent for a new project. Or if you're using a framework that makes use either technology. (Such as Bootstrap or Rails).
If you're modifying an existing web site which uses pure CSS (such as Wordpress) you should almost always extend and build off of the existing styles. Mixing plain CSS with SASS/LESS can be a mess especially if you are just learning the technology.
Both are here to make your job easier //save time, make your CSS more readable, you will no longer forget colors/margins or specific values that you used, because you can create variables, mixins etc.
If you feel like you would benefit from any of features provided, why wouldn't you use it? It's not mandatory to use those, it's not like I would use CSS for every project I create (majority though). Try it out, it won't take more than an hour to know basic features.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
My goal is to launch websites quicker that are mobile friendly and great for different screen resolutions. Can someone with experience in CSS recommend which CSS frameworks are best to start out with:
Zurb Foundation
Less Framework 4
Columnal
Bootstrap
Frameless
What are the pros and cons for each of them? Feel free to suggest anything not listed.
Once the site is built can I easily add jQuery sliders, effects or animations?
I have read both books mentioned which are great.
I really like Zurb Foundation. I have built a few sites with it and had no issues. I have found it easy to extend - it's easy to build a prototype that and then take to full production. (I've been using version 2 - there is V3 out - however V3 has dropped support for IE7)
A new tool someone in the office was playing with was jetstrap.com
Let's you visually do responsive layouts - you can then check the code and see how it's done and might be a good way to get started.
In my opinion, there's one book that explains anything and everything you might want to know. If you're just beginning to get into responsive web design, I'd start with this:
Responsive Web Design - Ethan Marcotte
To my understanding, Ethan is known as the "guy who started the movement". I can personally attest that the book has been of immense help to me. I'm not even sure quite frankly that you need to use a framework. If you code your website with the best practices the first time and build it as fluid as possible (even if you wrap within a 960px wide div) then resizing downwards from there using CSS media queries is a snap. I'd also check out the book Mobile First by Luke Wroblewski.
You can even buy these books as a bundle. They're quick reads, you can read each of them in an afternoon. These two books got me into responsive web design, I couldn't suggest checking them out enough!
There's also:
320 & Up by Andy Clarke, which is based on a mobile comes first design (so, it's good for that) - http://stuffandnonsense.co.uk/projects/320andup/
and Gumby, which got some really good reviews - http://www.gumbyframework.com/
I can't really help as I'm still too yet to try one of these responsive frameworks out. I too wish to know the pros and cons of each.
+1 for Gumby Framework. And before working with Gumby and others, you should have an understanding what's going on.. hence reading Ethan Marcotte's book.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I am pretty familiar with CSS and have used quite a bit of javascript and jquery also little experience of layout designing and working closely with Photoshop. But, somehow I don't feel as confident as when programming with database or C# side and face lot of problems when I am working with designing UI and laying out elements the way I want, For e.g. Like say a .psd file which the designers give to you...and you want to make your page look exactly like that..
So I know I just have to get into doing it more and learn along the way. But does anyone have any good suggestions or advice so that I get better at the UI programming...If there are some websites with videos and tutorial or any good books I should refer to improve..Thanks all for your help..
I installed firebug 2 years ago and immediately found myself spending more time reading other people's code - if I see a site I like or a technique I want to use, I just firebug it - it's a bit like a musician reading sheet-music and imagining how it sounds
I've found that answering questions on this site has helped me lots too - you get to know just exactly what it is that you do know and you become more aware of the areas in which you need to improve
I think that it's really important to know how the box-model works and how to make it work for you in all browsers - there are a few really simple fundamental rules, which when obeyed, help you to ensure that your x-broswer testing is pain-free - knowing how to add padding or margin to something without breaking your layout allows you to be exact with your designs - I used to leave 20 pixels extra horizontal space in my containers as a way of making my columns never dropped off the edge of a page, but now that I know how the box-model works, I can use the exact widths, heights, padding and margin that are detailed in the mock-ups that I'm given
I personally recommend using a semantic stylesheet framework - I suggest Blueprint semantic (although YUI and 960 are awesome too) - in-fact, switching to a CSS framework is perhaps one of the most important changes I made to my coding style last year and it helped me realise that almost all of the x-browser problems I was having were easy to fix without too much trouble
If you haven't done so already, add "CSS" and "HTML" to your "interesting tags" list in stackoverflow and read as much as you can. Answer questions, take the down-votes on the chin, savour the up-votes and keep trying to help others with their problems
One thing a lot of people forget is this: CSS is actually a really complex language. There's a hell of a lot more to it that meets the eye and it's very difficult to master - just.keep.fighting.the.good.fight
Practice, practice, practice.
I would surf the web for existing templates or sites and attempt to replicate them for practice.
Obviously, respect the author's rights and don't re-create someone's theme and then use it on one of your sites unless it's actually released out to the public.
I would look into "Semantic HTML" http://en.wikipedia.org/wiki/Semantic_HTML
Also looking into Doctypes: http://htmlhelp.com/tools/validator/doctype.html
Those 2 things once mastered have helped me in writing proper x-browser css that can look exactly like comps when you need it.
I would say avoid templating unless your designers always make the same site layout for UI, you will want to be more agile than that.
A good thing that tends to help x-browser css as well for beginners is a good reset.css: http://meyerweb.com/eric/tools/css/reset/
I'd also explore the area of UI usability. useit.com is a good source.
You can learn by doing if at all times you ask yourself if you can do a specific thing in a better way and when in doubt look this thing up using Google.
However, you will find that books give you a more complete picture of the entire process and teach you a lot that individual blog posts can't teach you. The Internet is like a reference; you have to know what to look for, but the book will provide you with useful hints you might not have thought of.
I'd give a look at CSS Zen Garden.
I had this frustration for a while too (I think many do). One specific thing that alleviated some of that frustration was learning about the significance of classes and ids (i.e. ids make javascript easier, classes facilitate large-scale changes). This might sound really simple, but it was a big step for me. I guess what I'm saying is that you just need to spend time with it. Don't shy away because it's intimidating or frustrating. It just takes time.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 12 years ago.
I am new to web development, learning ASP.NET. I used some JQuery script so am just wondering if it causes some performance issues or anything like that. Is it OK and rather safe to use it?
I work as a Developer Evangelist for Microsoft, and as the others have said jQuery is not only stable and safe... it's also awesome.
If it wasn't, we wouldn't have baked it into the .NET project templates.
In terms of performance there are things that you as a developer can do wrong, but if you follow best practices jQuery will improve your visitor’s experience, not detract from it.
If you are learning jQuery then make sure you visit jQuery.com to look at their getting started section. Also I found the following links useful:
Get Started With JQuery
Improve your jQuery - 25 excellent tips
As well as the Google CDN, Microsoft also provides one:
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
Ajax CDN Announcement
Microsoft Ajax CDN Documentation
I feel like I am being baited...
jQuery is an amazing library. The fact that it aligns how CSS and JavaScript are selected and processed is amazing. The fact that it hides so much of the browser-to-browser inconsistency that makes JavaScript such a pain is huge. The fact that it makes so many amazing things simple is...well...pretty valuable.
If you cache properly and call it from a CDN* there is really very little performance issue. In fact, I would say that my sites are a good deal faster because of jQuery since the jQuery code I am calling is much better than I would do myself.
Also, I try for Unobtrusive JavaScript wherever possible so the site still at least works even if the JQuery magic is unavailable.
A CDN is a Content Delivery Network. This is the way I recommend you link to jQuery in your pages.
jQuery is available from the Google CDN here:
https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
If you leave off the minor version number, Google provides the latest version.
It's safe to use and saves you a lot of time since it gives you the same api for all browsers.
It's safer to use it. Different browsers do things differently, jQuery provides a wonderful abstraction layer. You can essentially trust jQuery to do the required plumbing to work on each supported browser, rather than you having to take care of it yourself.
There technically would be a slight overhead since you're hopping through a method to get to the end result, but it's so tiny I would not worry about it.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
As a side project, for "fun," I'm rewriting my blog and CMS in Flex and AIR respectively, and while I'm pretty well satisfied with the design thus far, the one major pain point remains working with (which is to say performing CRUD operations on) legacy HTML content, and rendering that HTML content decently in both the browser and the Flash player. Sure, I can use the out-of-the-box RichTextEditor and TextArea controls, but both tend to choke on displaying and manipulating simple markup (e.g., single or absent quotes on attributes, image alignment, etc.), and the content it generates by default, while beautifully rendered in the Flash player, usually looks ridiculous in the browser -- an important factor to me, since I'd like to continue publishing RSS.
I know there are a couple of RichTextEditor derivatives out there, but before heading down the road with any of them, or down the alternative road of manipulating the content manually, I figured I'd poll the group here first, to see whether anyone's tackled this problem before; it seems like it has to be a fairly common use case.
Thanks in advance for your insights!
The problem you've hit is Flash natively supports a very small subset of HTML. So any editing you do to fit the Flash player will make it render much more primitively in HTML. Personally I think the conflicting aims of editing legacy content in Flash and displaying cleanly in both Browser and Flash are going to be too difficult to resolve.
One alternative would be to write your own text layout engine, much like the team working on Buzzword did. Given it took them many months to produce their application, I suspect this is massively out of scope for your plans :)
Another, simpler alternative would be to apply a server side transformer over the HTML content to simplify it down to Flash level. This would enable you to have a richly layed out HTML document, and a simpler Flash document. However it won't help you edit it in the Flash player.
If you wanted to edit your HTML in Flash, you might be able to use the wmode + iFrame trick first mentioned by Christophe Coenraets and updated by Renaun Erickson to give yourself a dual-live preview but you are still going to have the problems with different levels of HTML support by Flash and Browser. And editing a textfield to manually edit-then-preview your content really isn't what you want to be doing.
A final option would be to investigate the newly-in-beta
Text Layout Framework which would help give you some of the more extensive WYSIWYG parts of HTML. This looks a complicated but fairly feature rich. It works with Flex 3.2 / Flex 4 / Flash CS4. Of course this in beta, so may change at some point in the future.
As an aside, if you are building an AIR application, perhaps building a HTML+JS AIR application using existing JS+HTML editors such as FCKEditor would be a viable solution? Then you would just have to render for the Flash player (perhaps using a transformer approach as detailed above).
Take a read of Display HTML in an Actionscript 3 project
It doesn't fully answer your question (as it only addresses rendering HTML in Flash), but it may prove a useful starting point.
Have you considered using one of the existing JavaScript-based rich text editors and embedding it within HTML that is hosted within your flash-based app for example?
I myself am currently investigating use of FCKeditor as a popup on pages to edit content that can be displayed in Flex component htmlwrapper .. no idea how far i will get, but that's my insight!
Have you tried html tidy? It has a standalone version and php has tidy module too.