Monday, October 28, 2013

Read through this if you want to know a ton about CSS




5down voteaccepted
Read through this if you want to know a ton about CSS
This is a great site, for past reference and future updates:
You would also do well to follow nettuts
If you want to read some books, I recommend highly anything from O'Reilly



Learn Simple Things First

For the most parts (and especially if you start learning), it holds, that HTML 4 is a subset of HTML 5 and likewise CSS 2 of 3. Therefore my suggestion is to start learning the ‘old’ techniques first. This is especially motivated by the fact that the HTML5 and CSS3 specifications are way larger than their older counterparts. (In the News: This just in: "HTML" is the new "HTML5".)
There is another problem with HTML5 tutorials: They pop up like daisies on a soft spring morning, which is per se a good thing. But as rookie you will have difficulties to decide if a given document aims at beginners or, more likely indeed, at people with experiences in (X)HTML, who want to learn the differences. It is easier to get confused by such an HTML5 intro, than by an HTML4 tutorial (there was not really a big difference between HTML 3 and 4, apart from paradigms [table-based layout, font tag, stuff like that was discussed then]).

‘My Way’

Everyone is different in her/his learning behaviour, so let me summarize the way I came to web development.
  • I didn’t have anything in mind with web development until I was a Physics undergrad student. Then I thought: ‘Well, it would be nice to have a customized start page for my browser.’ It was 2004, and iGoogle wasn’t invented back then. That’s it. You have a small project and you start to work on it.
  • I had the luck, that in the German speaking world there is a great resource for getting started with HTML: SelfHTML. Unfortunately, the site hasn’t had much updates since back then and their English counterpart went even out of business. Please don’t use the aforementioned W3Schools. However, I can’t point you to any good English tutorial apart from the specifications (see below). You might have luck finding a good course in the School of Webcraft, which is a joint venture of Mozilla and P2PU.
  • After finishing my browser start page, I created a homepage for our RPG group. It was several HTML pages and I quickly found out about CSS, and that you can have a single stylesheet to apply to more than one HTML pages. This is where I first started to think about the structure of the many files that had accumulated (in terms of ‘in which folder comes which file’).
  • Apart from that, you will find, that you have to learn a lot more accompanying technologies:
    • I wanted a private area for our group and learned about HTTP Authentication.
    • Having files lying in sub-directories brings you very fast to the matter of URLs and relative and absolute paths.
    • For our FAQ section I wanted to have some interactivity: Clicking on a question should display the previously hidden answer. That was my entry point to JavaScript. My experience is, that I benefit now much from having learned ‘real’ and basic JavaScript and not just copy and pasted jQuery snippets that I googled. (Well, it was Prototype, back then).
  • The next logical step is to move from static HTML files to something generated on the server. I took a very good beginner’s course in PHP and MySQL (it’s IMHO the simplest server-side technology to get started with) and got a bit of PHP-enabled web space at our university. A good ‘Hello World’ project was a guest book for the RPG website back then (well, today you’d just throw in a Disqus link).
  • Now I came to the frontiers of tutorials and references. I first really looked in and began to read the original specifications. It started with the official PHP manual and went on to the HTML 4 specification, single definitions of CSS properties in the W3C’s CSS 2 spec and so on. In hindsight this is another point I’d like to emphasize: read the specs as soon as possible. There will be parts that you don’t understand yet, but there is no better source than the source.
  • From there on it was a constant learning with many new technologies that require at least a bit of attention, but sometimes also a fundamental understanding: the DOM, CGI, SVG, XML, the difference between XHTML and HTML, Regular Expressions, Python, mod_rewrite, nginx, XSLT,PDF, RSS, RDF, Bash, SSH, Git, SVN, XSS, Unicode, Web Fonts, Dublin Core, JSON, SQLite, ... (all links go to Wikipedia).
  • Finally you will come to a stage, where you need to specialize. The range goes roughly from "I’m adesigner. I don’t touch no nasty code ever." to "B2B JSON is the best thing since JBoss and Hibernate. Good, that I don’t need Photoshop for this." I’m still trying to follow the naive approach to keep up to date in as many areas as possible, but I can foresee, that this strategy won’t be successful for long. In less than 5 years from now (and even today) you will find job descriptions for ‘canvas developers,’ ‘multimedia markup strategists,’ ‘cross-platform user experience experts,’ ‘specialists for legacy Flash code and table-based HTML Email templates,’ ‘offline cache security gurus,’ ‘web storage database engineers’ and so on. However, having at least a basic understanding in areas around your main interest will help to keep you flexible enough for new ideas and approaches (and, more important, old and tested ideas and approaches to problems you think are new).
Please, I don’t want to discourage you, when I say, that there’s a lot more to learn than HTML and CSS. I see it more as a wonderland of opportunities and technologies that lie at my finger tips to be used to create cool stuff. And the more you learn, the more powerful your projects will be.

In-Depth Learning

When you have found a direction, that interests you most, you should start learning the backgrounds of your chosen path. This might seem a bit contradicting to what I said above about keeping a broad overview, but it is more a completion.
For example, if you tend to be a back-end developer, start looking into different algorithms, parser theory, cryptography, profiling code, building compilers and so on. The topics you encounter there might have no direct relation to your day-to-day problems, but they build the foundation of what you use today. As such, many problems were solved before, that re-occur today in slightly different form.
If you become a markup specialist, look into text-manipulation tools. The Unix tools like sed, awk andgrep have got a bad name as being old, arcane cruft, but this is totally unjustified. They, too, solve problems, that you will face in your work.
For becoming a web designer you have to get into color theory, typography (both macro and micro), grid theory (which existed way before the web) and, at least, basic psychology.

Pay Attention

The problem is learning from the wrong resources. I’d suggest, if you are in doubt, ask here on StackOverflow for opinions (better perhaps, ask over at chat.stackoverflow.com. And basically, the closer to the source a doc is, the better.
A personal warning: Leave your hands from WYSIWYG editors and such, like Dreamweaver. You may use an IDE or any editor with additional support (Eclipse comes to mind), but my travel went the other way round (from GoLive to Notepad++ to finally Vim). That’s a matter of taste. But if you have the slightest thought, that the software hides something from you or auto-creates anything that you haven’t told it explicitly to, leave it alone.
A basic measurement is, if your software let’s you choose the encoding of the file (ISO-8859-1, UTF-8, ...) and if or not to put a BOM in front of an UTF-8 file.

Recommended Reading

Again, don’t get discouraged, if you get completely confused by any of the following resource. There are documents linked here, that professionals use as daily references.

Basics

  • W3.org - The website of the W3C, the organization, that standardizes HTML and CSS
  • developer.mozilla.org - The developer resource of Mozilla, the Firefox organization. There are some good tutorials on HTML, CSS and cutting-edge web development, too, and IMHO the best JavaScript reference currently available online.
  • msdn.microsoft.com - The HTML/CSS docs from Microsoft
  • Safari Reference Library - Very Apple and Safari centered, but may have the one or other good reading, too.
  • Opera Web Curriculum - Thanks to @What’s answer for this one. Opera’s Web Curriculum is a good summary of important technologies.
  • WebPlatform is a joint venture of a lot of big players on the web, that "aims to become a comprehensive and authoritative source for web developer documentation." It's backed by the W3C.
  • Validator - A validator checks your code for errors. The one here is from the W3C and is one of the most important tools in a web developer’s toolbox.

Tutorials

  • HTML5 Boilerplate - A project that is aimed to allow fast bootstrapping of web sites and web applications based on HTML5, jQuery, and so on. It’s worthwhile to read through the source code, since there are lots of best practices bundled together
  • A List Apart - THE publication aimed at web developers and people around them. A lot of useful and important methods and practices to work with HTML and CSS were published here.
  • Dive into HTML5 - the website accompanying the book of the same name. It’s especially targeted to teaching HTML5, so perhaps it’s from time to time hard to follow for a newbie. But it’s well-written and accurate.
  • CSS Zen Garden - "A demonstration of what can be accomplished visually through CSS-based design." This site shows astonishing examples of HTML 4 and CSS 2 in action.
  • 24 Ways - The web developer’s Advent calendar. Very interesting articles of well-known people are collected in packs of 24 each year.

Overviews

  • quirksmode.org - A site dedicated to browser and compatibility tests. If your page looks all different in Firefox, IE and Opera, you should stop here.
  • History of the WWW - a nice to read introduction of the W3C, how the early years of the web (up to 1995) went by
  • zvon.org - If you look through the ‘references’ and ‘tutorials’ sections, you will find stuff, that is not easy to follow but therefore it’s quite accurate
  • Jacob Nielsen’s Alertbox - Although not un-criticized this page offers a huge set of usability studies by Jacob Nielsen.
  • Periodic Table of HTML Elements - A very nice and intuitive display of all elements in HTML5
  • CSSPlay - Stu Nicholls’ playground for many cutting-edge CSS tricks.
  • HTML5 Rocks! - HTML5 features, tutorials, resources and more.

Specifications

  • w3.org/TR/html4 - The official HTML 4 specification with description of all elements and attributes. Might be useful, but defer to HTML5 specification for most up-to-date reference on how modern browsers interpret them.
  • WHATWG.org is where the most active and live version of the HTML5 specification exists.
  • w3.org/TR - A list of all specifications under the roof of the W3C (mostly related to XML, HTML and CSS)
  • w3.org/TR/CSS2 - The official CSS 2.1 specification
  • CSS3 & others - The current work being done on Stylesheet standards.
  • ECMAScript Specification - ECMAScript is the name of the standardized version of JavaScript. Frankly, I hardly ever looked in it. Mostly I use the reference on mozilla.org. There is an annotated web version at es5.github.com.
  • Likewise for the DOM. The official specifications lie scattered at the W3C, but in the dark ages Netscape and IE implemented their own versions.
  • RFC 1738 - defines, how URLs are composed
  • RFC 1945 - defines HTTP 1.0, the transmission protocol that delivers pages over the internet. RFC 2616 defines its successor HTTP 1.1
  • php.net - The homepage, together with the official documentation, of PHP
  • Unicode Consortium - If you leave the ASCII world and enter multi-language terrain, you will inevitably make acquaintance with UTF-8 and Unicode. Better be friends with them ASAP.

Others

  • Smashing Magazine - I often find interesting articles about web design and frontend development here
  • JSFiddle - This site let’s you play around with HTML, CSS and JavaScript and shows you the result instantly. Perfect for testing and if you want to share short snippets of code (e.g., for a StackOverflow question)
  • XAMPP - A simple way to create an Apache[*] (web server), MySQL and PHP environment on Windows or Mac OSX
  • Microformats.org - This is a bit advanced: Microformats try to express machine- and human-readable data at once in HTML. It sounds scarier than it really is, and from looking at how they try to accomplish things, you can learn much of how HTML elements and attributes should be used.
  • CSS Resetr - CSS resets are quite en vogue since ~2007. These are small CSS stylesheets, that revert most of the default styles browsers give to elements (like the large, bold text and the margin of h1 elements). CSS Resetr let’s you play with different reset stylesheets of certain fame. I list it here, because it may give you a nice insight in what CSS rule affects which elements.
  • FontSquirrel @font-face generator - That’s a nice way to play with the @font-face property of CSS 2.1. Look at the source, that gets generated for inspiration. Apart from that, you can use theGoogle WebFonts Directory for production.
  • When can I use... - Shows in charts CSS3 and other properties that are cutting-edge, and the browser versions that support them.
  • FireBug - If you develop in Firefox, you won’t go ever without this addon. Trust me (and thousands of others).
  • The Elements of Typographic Style Applied To The Web - A website, that expresses the hints and the wisdom of "The Elements of Typographic Style" (Robert Bringhurst, warmly suggested reading) in terms of CSS and applied to web technologies.
  • A list of all HTML elements in all (relevant) HTML standards by Jens Meiert, member in the HTML working group.

StackOverflow Questions / Answers

Books

Actually, I’ve never used a book to learn HTML or CSS. But then, HTML 4 and CSS 2 are much more light-weighted than their newer counterparts. Quite blindly I can suggest books published by O’Reilly. The dozen or so (bash, Python, XSLT, ...) I have from them are all well-written and technologically correct.

Books recommended by other SO users:

Final Note

I am constantly learning new things and improving and deepening my knowledge of already learned technologies. If you start with HTML and CSS, and if you want to do it seriously, you will find many problems on your road. You’ll see code, where you have no clue, what it does, or how it even is valid. After some time you will have your first experience with security and its holes (and I’ll wish you these to be soft and not related to credit card details ;-) ).
But if you keep your eyes open, utilize often and early the "view Source" menu item, and ask questions (here, as a comment below an interesting blog post, ‘ask Google’), you will be a the top of people, who build the way the world is experiencing its information. And, over all, it’s fun!
share|improve this answer
Posted by at No comments:
Labels:

Monday, October 21, 2013

How to become a web developer from scratch without a degree?


Tell me more ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote0down votefavorite
1
I am extremely interested in web development though I know very little about code. I did not read computer sciences in my college/university. Now I find myself very determined to learn the server side development and want to have a career in the field, where should I start from? I have got almost an year of free time and can work very hard, guide me please, thank you.
shareimprove this question
 
First step? Get a degree. Will help you beat the HR filter. –  Rig Aug 9 '12 at 15:18
1 
I started out taking on contract work I found on Craiglist and word of mouth. In the beginning I knew 25% of what I said I did, and once I got the work I googled, read and asked questions on Stackoverflow. A year later I found a full time salary position making great money. If you know what you're doing, and an employer won't hire you for lack of a degree you probably don't want to work for someone like that. –  Nick Aug 9 '12 at 16:32

marked as duplicate by Tom Squires, Telastyn, GlenH7, Ryathal, gnat Aug 9 '12 at 15:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2 Answers

up vote6down vote
We can't really tell you what to do.
The fact is, we don't know what tools you would rather use, or what will work better for you. I'm going to be really general here, so bear with me:
  1. Learn HTML, CSS, and Javascript. Before you do any kind of server-side programming, this is a must. You can't build a webpage without HTML, CSS makes it look pretty, and JS makes it dynamic. Also, it wouldn't hurt to add on some jQuery.
  2. Install a web server, or find a free web host online. You don't need to pay for one. You're still learning. Personally, I have a WAMP server running on my desktop since I don't put anything into production, and I advise you to do the same.
  3. Learn a server-side scripting language. Now to get down to business. You have a lot of options here. Python is said to be the easiest to learn. PHP is the most well used server-side language. Ruby is an up-coming phenom. ASP works flawlessly with it's .NET counterparts.
  4. Get coding! I cannot stress this enough. The only way to learn is by doing. You can't just read a book. If you want, do a few projects (e.g. a forum, a phonebook, etc.) to make it fun!
This was a very general walk-through of what you need to do. There is still the matter of learning SQL before a server-side language, and how to use a database, and all that good stuff. But that's fairly easy to figure out with Stack Overflow and Google! Until then, good luck!
A few extras to learn about after the above:
shareimprove this answer
 
Nice answer...also, once you feel really comfortable with all this, in the last few months, you should make a fully functional website –  karan k Aug 9 '12 at 14:58
 
I agree with all but #2. I think having some money on the line, and the potential to make money, can be motivating. Plus, 'free' hosts are often poor quality, poor performing, spam hubs. It also gets one used to moving a site from development (your local setup) to a real production site. Since decent shared hosting can be had for under $10 a month, it's a small investment, even if you buy both LAMP and .NET accounts. –  jfrankcarrAug 9 '12 at 15:24
 
@jfrankcarr In my experiences, free hosts are fine for learning the basics. Once he actually does try to build something, I would encourage him to go with a paid host, and possibly a domain name. –  Dynamic Aug 9 '12 at 15:26
 
I use VMWare with CentOS for dev, and move to another VMware Centos for testing. The second one has security and settings exactly like a production server. Problem with shared hosts is the root access, but I guess starting out, you should stay away from Root lol –  user60812 Aug 9 '12 at 20:43
up vote1down vote
You basically have several options to choose from depending what platform you are familiar for web development.
Here you are some options to look for:
However, keep in mid that to become a well-versed software developer you would need contently learn new things and invest your personal time to it.
In addition you may reference the open-source projects. They are good to look for source code and get good practices to learn from:
shareimprove this answer

Not the answer you're looking for? Browse other questions tagged  or ask your own question.

Posted by at No comments:
Labels: ,
Subscribe to: Comments (Atom)