What are
/r/webdesign's
favorite Products & Services?
From 3.5 billion Reddit comments
The most popular Products mentioned in /r/webdesign:
The most popular Services mentioned in /r/webdesign:
jsFiddle
Nettuts+
Sublime Text
HTML5 Boilerplate
Codecademy
jQuery UI
jQuery
Foundation
ColorZilla
COLOURlovers
Skeleton
LESS
PHP
W3Schools
XAMPP
The most popular reviews in /r/webdesign:
You seem to be confused - IE totally supports min-width and max-width, see here: http://caniuse.com/minmaxwh
Make sure you always use the standard HTML5 doctype for best strict mode rendering:
<!DOCTYPE html>
For IE7 and IE8, I do not support responsive design. They are obsolete and should just be served a single layout. What I do is I use Susy which creates an IE-only stylesheet based on my desktop media query layout automatically.
/* modern browsers / @media (min-width: 45em) { article { text-weight: bold; } } / IE stylesheet */ article { text-weight: bold; }
See the documentation on building an IE stylesheet automatically from your media queries here: https://github.com/ericam/susy/blob/master/docs/source/guides/reference.html.md#breakpoint-ie-output
>Notepad.exe, running under VMWare, seems to work well.
What? Are you joking? You're going to load up VMWare for Notepad?
Use TextWrangler instead.
there is no need for you to do anything else. virtually every user, young or old, new or seasoned, expects the header logo to take them home.
every single major site on the internet, including reddit, behaves in exactly this way. by making your left-aligned header logo a clickable link back to the home page, you have met user expectations and do not need to do anything else.
edit:
here is a list of the 500 most trafficked sites on the internet. while i haven't gone through all 500 to see which ones violate the convention of making a left-aligned header logo the sole link back to the home page, 100% of the sites i did view, which were the top 30 sites in the united states that did not require a login to view, all behaved in exactly this way.
this includes google, wikipedia, youtube, yahoo, msn, ebay, bing, tumblr, apple, flickr, etc., etc., etc.
unless your client specifically asks you to add a home link to the navigation, or to use something other than the header logo to link back home, don't do it.
feel free to conduct your own research.
Yes. Wrap it in a div with the overflow hidden, position your sliding box absolutely minus it's width left. On hover set the position to 0 or whatever is appropriate.
edit - Basically this with transition effects and more than 10s of work: http://cssdesk.com/m5zvj
This should push you in the right direction. Source here.
ETA: This will break if your visitors have javascript turned off.
Assuming you mean the menu sticking to the top of the page and highlighting the sections as you scroll down it's very easy to do with jquery. Use the .scroll() function to swap classes at certain points and css classes to style the menu. jquery .scroll() function
quick jsFiddle showing a way of doing it
edit: This isn't what they did exactly for the site you linked, but will do more or less the same thing. For the sticky menu you can just swap the class on the menu to set the position to fixed once someone has scrolled down to whatever point you want.
I dont know if there's a way to do this with pure css3, there might be.
Here's my jQuery-based solution.
I can't begin to imagine why you would need to do this though :)
I've used both Twitter Bootstrap because I enjoy working with .less more than plain old CSS and Skeleton before but I still find that it takes me longer to build and test a responsive design than a normal one.
Of course I can just say to the client 'it will take longer' but I was wondering if anyone had any interesting or clever ways of accurately pricing this type of work.
For example. How do you deal with nested navigation? How much longer (from your experience) does this add onto a job? That type of thing.
I would suggest learning of the basics of webdesign by creating a website with just html/css before trying to tackle PHP.
This tutorial is a beginner's walk-through to HTML, CSS, and some JavaScript.
Once you have a basic understanding of HTML & CSS, you can try this tutorial which will walk you through designing a website in Photoshop and than coding it in HTML/CSS.
Yup. On that topic, Drupal isn't much better. They're really big systems with a lot of fragmented and poorly formatted code, mainly because of how big they are.
Mainly the big issue is that the popular CMS' offer too many features in a base install.
You're much better with something like Symphony or Modx, which lets you add whatever you want to the base install with extensions afterwords, and keeps the base install simple.
Edit: Although this posts sucks from an English standpoint since I use the same words 978387 times. So derp I suck.
Import using @fontface.
Define a h1 or h2 or similar.
Use the name of the type as defined @fontface when you assign the font-family attribute to h1 or h2.
eg:
h1 { font-family: 'Open Sans', sans-serif; font-weight:400; color:#fff; font-size:24px; font-weight:normal; }
In your HTML, if you use the previously defined h1 or h2.
Here is an example using the Google Fonts API. As you can see in the CSS, I defined the 'Economica' font family and I just had to include the external font in the HTML. Example
The main problem with dreamweaver is that it has its own wacky HTML-comment based templating system that's incompatible with all other tools. So your whole development workflow ends up needing to revolve around dreamweaver.
Also, though there's nothing wrong with its FTP integration in itself, it tends to lead to people being in the habit of just ftping changes to their server. You're better off using a nice text editor to edit your code and something like git or subversion to manage code revisioning / deployment.
http://www.sublimetext.com/2 This will make you, and your co-workers much happier than using Dreamweaver
It sounds to me like you want to step up your designs, not necessarily the functionality of the sites.
If so, don't listen to these guys telling you to learn javascript, php, python, etc. Wordpress is a decent CMS with a large community of developers who release enough plugins that you can get by without knowing this stuff.
That said, you will of course have to figure out some php to make a wordpress theme. I'm just suggesting that it would be a waste of time to focus learning these things as opposed to learning as you go.
Here is a tutorial I found via google, it looks pretty legit. http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/ It uses the 960 grid system, which is pretty awesome. The link Xodia posted looks pretty cool, too.
If I'm wrong, and you're looking to make web applications instead of designing things without templates, fuck everything I just said and learn python. :)
No one really uses GUI tools for this stuff, it's almost always done by hand. Historically, this is because all of the major GUI software to do this, such as Dreamweaver and Frontpage, produced absolutely crap code. The industry as a whole turned their back on these in the 90s and never looked back.
This isn't to say that tools like these won't rise again - software like Codekit are proving that GUI isn't all bad for web design - but we're a long way off. However, these will never surplant a need to know HTML and CSS from the ground up. Best to learn how to do it all by hand now - might I recommend CodeAcademy ?
It's definitely meant for 'ease of use', but that doesn't mean it's not also flexible for functionality and design.
Perhaps we should also nip the concept of 'learning dreamweaver' in the bud. Learn design concepts, learn html, css, JavaScript, and PHP. Then put those to work through tools like dreamweaver - if you're going to use that program as a tool, don't rely on it to generate your code. I'd suggest writing code yourself for your first few goes.
I would consider rackspace -- they're one of the bigger players in the hosting market and have built-in CDN support on their VPS management page that you can use (I think they use Akamai currently)
It might be worth looking into their "cloud sites" option as well if you're hosting a lot of wordpress sites -- I just use one of their smaller vps options, but I remember thinking the cloud sites might work well if you were hosting a lot of run of the mill stuff.
You might find this to be useful,
http://imagemagick.org/script/index.php
This usage page talks about creating a set of graphics with a consistent look/feel for a site,
I dont know if this is EXACTLY what you are looking for but maybe others might find it useful. These are CSS based navigations.
These links might require some programming knowledge:
This tutorial will get you most of the way there.
Better than any tutorials, I learned tons by using and playing with elements from this benevolent designer, Orman Clark. He gives away tons of elements for free, which lets you see how a proper designer works with Photoshop layers, effects and vector shapes. From there, get good at splicing, know what can be achieved via CSS and what you have to still use images for.
Then, when you see an attractive site, don't be afraid to dissect it. Note the fonts. Take a screenshot and hop in photoshop to see how the sizes work, the spacing, the padding.
A few months ago I created my own 'mashup' frame work that combined 1140px grid, with skeleton, html5 boiler, and {less}. I called it the DirtyBastard and it was cool. About one week later, I found out twitter's bootstrap was released, which was essentially everything I had done but better. So I stopped updating DirtyBastard :(.
I just recently started redoing an app based off of foundations grid system. I've also been pulling chunks of code the newest version of bootstrap. I highly recommend both of them. The moral of the story here is that you're not limited to using just one of these grids or frameworks. Take a couple and put them together, create your own DirtyBastard!
Recently I built a framework for myself using a custom Normalize.css file and a basic grid. It has worked so far, but I've had issues with the column wrapper registering at 0, which is a problem for a lot of the layout I do.
So I went to look for a good all around framework to customize for my own needs. I found Foundation, a project by ZURB to create a framework for apps/webpages. There are lots of neat things about how it works (semantics and responsive capabilities) that make it a great starting point for most projects.
Anyway, yeah, Foundation, it's the best framework that's out there right now, and it's real power lies in customizing it to match the project 100%.
Many of your questions are things that trouble beginners. I think you should have done a little more research before posting, though. I'll do my best to answer.
Menus are really all about personal taste. Sure, you can make a menu using pure CSS and ULs but to make it visually appealing, adding Javascript is needed. Take a look at jQuery for this. Their documentation is amazing and full. Just head to their site.
Building from scratch is a lengthy process for a beginner but for advanced developers, we can build an entire skeleton in minutes. Therefore, this depends on your skill level and interest in learning. Another option is simply downloading a CMS (look into Wordpress, Joomla, or Drupal) and installing themes. They will give you all of the functionality that you seek without all of the labor. All you will have to do is have access to the database and FTP.
If you have Dreamweaver, use it. I use Dreamweaver for handling all text and code files because of its code editing features. Notepad is more of a use-it-if-you-have-to tool.
Here's my 2 cents on the issue though: -Get access to the database and FTP and install Wordpress -Go and install a theme of choice for it (all covered in the documentation) -Use it to create pages
You'll be happier with the results and have much more free time for other stuff. PM me for more information if you wish.
As long as you set a specific width and float each of the elements left, the behavior you specify is the result.
Example: http://jsfiddle.net/uubdW/1/ (Adjust the size of the Result pane to see the boxes "falling down").
That company's website indeed does look decent for someone who calls himself very amateur!
Try reading more about CSS, and go experiment with libraries like jQuery and MooTools in jsFiddle. Maybe try to learn some PHP too.
Decide whether you want to focus primarily on designing websites (e.g. creating user interfaces, user experience), or developing websites (e.g. programming in PHP, JavaScript, basically making the design work). You can try to do both but I've seen many amateurs try to do both, and most of the time that just doesn't work.
Check out this. This gives you a wide range of gallery / slideshow jquery plugins you can use that you may like better.
I don't think it is quite possible for javascript to load in images from a directory for you. BUT you can use PHP's glob() function to get them instead then it's just a matter of running it through a loop and displaying the images.
foreach (glob("/path/to/images/{*.gif,*.jpg,*.png}", GLOB_BRACE) as $image) echo "<img src=".$image."/>";
This just won't work. Your site will be taken down for copyright violations in no time.
Allowing people to drop in YouTube, tindeck, soundcloud, or whatever, is probably your best bet for keeping it going. Not to mention that offsets a lot of bandwidth.
e: If you do want to persue doing straight uploads, look into $_FILES. Basically you just want the file to be uploaded, verify it's type, move it to a suitable location and index it in a database for easy reference.
Sublime Text 2.
It's a great development tool and has addons which let you do things like ftp. You can download a demo and evaluate it, $59 for a license, works in win, nix, and osx.
Have you used Sublime Text 2? It's no Coda but it's nice and is available for Windows, OS X and Linux. I'm pretty out of the loop on text editors for Windows. The only one I know the most about is Notepad++ which is pretty nice.
a combination of JS for fetching the random snippets and CSS 3D transformations for the animations I think
Their CSS shows they're using perspective, preserve 3D and transformations.
A similar effect I've seen posted here, although for slideshows is this: http://lab.hakim.se/reveal-js/#/
Rather simple to do. In PHP, for example, it would be something like this, using | as a delimiter:
(text file)
>Google| www.google.com |Ebay |www.ebay.com
(code)
><?php > >$buffer = file_get_contents("textfile.txt"); > >$menu_array = explode("|",$buffer); > >for($i=0;$i<count($menu_array);$i+=2){ > >echo "<a href=".$menu_array[$i+1].">".$menu_array[$i]."</a> "; >} > >?>
And it would output:
Take a look at this: http://jsfiddle.net/DEDX8/89/
This will probably help with what you're trying to achieve but, again, I have to question the problem that you think you're solving. There are probably better ways to achieve what you're trying to do...
Is your site a registered charity as they qualify for different fees (https://www.paypal.com/uk/charity)?
If it's simply a donation to you, personally, through PayPal, then simply link your personal PayPal account to your bank account in the normal way. Sign into PayPal and add a bank account. Then you can move money into and out of the account. I'm in the UK too, and it's fine for me.
There are other portals for mac app reviews, maybe check MacUpdate.com http://www.macupdate.com/app/mac/25386/flux
There is a whole bunch of reviews. Right now its: 3,5 / 5 stars.
Hope i could help.
Not really feeling it I'm afraid, the examples load horribly, are low res and the animation quality doesn't stand up against frameworks like paper.js. I might be missing something, but I don't think I am.
Yeah, when the client wants black, you sometimes have to suck it up I guess.
As for fonts, at least you didn't use Papyrus. Where I live, it seems like every religious and every hippy shop are using that font for promotion. "Oh we look so different!" Grr.
As for gradients, are you aware of/ going to use CSS gradients? Other than IE (of course) it looks so spectacular because it fills up the whole space perfectly regardless of the size of the screen. Here's a generator.
On the development side, Linux is (IMHO) such a much better/configurable platform to work in. I'm a consultant and it's so much easier to run different environments and configurations side-by-side on Linux that it amazes me the amount of effort and time some people put on getting Windows to work with a given environment.
For running Photoshop and other Windows-only things, I keep a beefed-up Windows VM using VirtualBox -- I find it easier and faster to use than an actual Windows machine, and a lot less fiddly than Wine. Just make sure you have plenty of RAM…
I hate dreamweaver and still hand code everything I do besides the odd html newsletter. For all my work I use PHPDesigner I do try other IDEs every so often, but always come back to this one. It's probably also the fairest price for software I've ever seen, especially when compared to some of the competition.
The downside for the OP of course is it not Mac compatible which probably rules it out for this alone.
There are plenty of JavaScript libraries that will do this in a manner of different ways, ie. adding classes to the body depending on browser and supported technologies on the users system.
However, for styling issues, you would be better advised to create targeted design fallbacks, rather than bugging users about something they may not be able to change, certainly for something like gradients.
TLDR; http://modernizr.com/ and use some PNGs
If you want to switch to the HTML5 doctype and don't mind adding some boilerplate to your site you can try HTML5 Boilerplate which should eliminate most of the problems with HTML5 elements and also normalize some quirks with IE7-9.
And also with HTML5 you can nest block elements inside anchors (with previous html versions that was considered invalid markup). But if you're doing that then it helps to set the anchors as block elements.
Design
- The logo doesn't actually do anything, so don't put a rotation on it. Same with the heart. This is all just very superfluous. Animation should always help the user, never confuse them.
- Left-align your navigation. The "eye" icon in your logo is the first thing to draw my attention and your navigation can use this to its advantage.
- The same thing goes with that sidebar navigation, but that didn't seem filled out very much so I'm wondering if you actually need it
- Go hand-drawn or go 8-bit. You typography and iconography really clash and breaks up the unity of your design.
- Your site's title is "Cloudy Sun" but I see nothing in your logo or design which supports that. Even your favicon is just an iMac, which doesn't really say anything about the site.
- If someone tries to click on one of the social links at the top by coming in from underneath the icon, the icon moves and they can't click it as easily. Consider another rollover effect, or expand the hit area. If you specify a width and height on the anchor link, this should right itself out.
Code
- You're missing a DOCTYPE! This is going to lead to unpredictable behavior, especially within IE.
- You should not have empty content in your anchor tags (share links). Include the text, and use one of the many text/image replacement techniques available (the simplest is to set the text-indent of the element to a large negative number).
- There are a lot more Apple device icons to support than just the Touch. I recommend checking out the HTML5 Boilerplate to get a better idea of what you should consider including.
Mental
Don't let my (or anyone else's) overly-critical critique discourage you! At looks as though you're new at this, so it's important to keep learning, studying others' work, and asking for feedback!
Generally people use one container for the entire page (you can actually style the <body> tag to do this for you if you're trying to clean up your div-itis), container divs for individual sections (header, navigation, body, footer), and then the individual divs for the content.
I'd suggest looking up some of the new tags for HTML5 (header, nav, section, footer). Barring that, the HTML5 Boilerplate is an awesome resource, with many great FAQs and details on how to get things organized.
<body>
<header><title>Ereptoric - Rogues Do It From Behind</title></header>
...
you have title inside of body, title needs to go inside the head... always... the structure should always be this:
html head charset title css include mandatory scripts other stuff, meta data, description, etc end head body stuff non-mandatory scrips (google analytics, etc) end body end html
header is supposed to be for the top of your site - logo, banner, main links, etc
style tags should be up top in the head
it looks like you're using HTML5, if so...
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
should just be be
<meta charset="utf-8">
My latest site, here, was made in HTML5 and based off of html5 boilerplate. Check out the source code... that's kind of how it should look.
Great start for a noob... these changes will help you start writing more standard-complaint code.
You can't go wrong with 960, but you could also look at responsive webdesign which allows you to use multiple sizes based on the device or size of the browser width.
http://www.getskeleton.com/ is a good place to start. Good luck!
I would suggest jQuery (my preferred method) but feel free to explore.
On that note, you can use the jQuery UI (dependent on jQuery itself). Go HERE for some examples. You would put the content inside the horizontally draggable div.
I'd personally suggest going to jQuery for Designers' tutorial. It's thorough, has example code, and even video tutorial. If it's just a quick fix you want, I'd suggest following and copying the code, but I suggest just learning it...you'll be using Javascript plenty and probably a library of choice in web development (jQuery, MooTools, etc).
BEST OF LUCK
Yea, jquery on mobile devices can be an issue. you might try to use http://jquerymobile.com/ for all the mobile related stuff. its pretty new, so it might be buggy, but it might work for what you need.
Bullshit.
http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements http://www.w3.org/TR/html4/struct/global.html#h-7.5.5
There is no mention of this in the specs. I also highly doubt your claim on SEO, but I would love for you to prove me wrong.
Oh, i was being sarcastic to the very end. This thing is atrocious, I just found it amusing that he thought it would be beneficial.
The examples look like they were stripped out of Geocities in '94. I was just amused that he thought this might somehow be of benefit and thought others might get a chuckle out of it too.
Yeah, paper.js is awesome, so clean and simple to implement. I've heard good stuff about Hype as well for a more timeline-based animation tool.
I would avoid libraries and boilerplates altogether until you learn the basics.
Check out this series of tutorials. I haven't watched this particular, but I did learn jQuery through a similar video series from Jeffery Way (the same author), and it was damn helpful. Looking at the titles, it looks like he covers all the bases.
You could look up tutorials on photoshop mock ups, then look up basic html and css tutorials and figure out how to actually make your mock up a basic website.
After that, play around with javascript tuts and make some of the html and css disappear and move around n such.
With the php/mysql I recommend the two videos MrDeath2000 did, or at least learning it from a reputable book, as it's so easy to just throw together some insecure piece of trash and develop very bad habits otherwise...
TLDR; find a quick tut on a mock up, do it. Learn enough html/css to make it. Make it interactive with basic js/jq. then study php mysql and make some of the content change that way.
www.lynda.com <- totally worth it.... you can probably learn enough on here to get started down the right path with all the things.
http://net.tutsplus.com/ <- lots of good tutorials, and the majority of them are free.
yeah... I don't think there is one book that can cover all of these as they're all vast undertakings that require lots of work.
the problem with online stuff is that you're just as likely to find outdated information. people don't take tutorials offline once their no longer relevant. make sure you check the publication dates on things before you take them as gospel.
this is a great resource as well. it really takes you through everything from square one. also, there are hundreds of other useful tuts on this site once you get through that: http://net.tutsplus.com/sessions/web-design-from-scratch/
personally, i find books to be a more efficient way of learning than tutorials, but that's just me. i learned html from reading a dreamweaver manual from cover to cover. of course i have since moved on from dreamweaver, but it's a great learning tool.
start with html and css. the quickest way to learn it is to go around and pick sites that you think would be a challenge - and them to recreate them from scratch. this is seriously the fastest way to learn. once you are confident with html / css, move onto js/jquery, or php if you're more interested in back end stuff. php is kinda sucky, to be honest, but it's a good enough beginning point, because of the giant community, and wealth of learning material.
The tutsplus network of sites, like http://net.tutsplus.com/, is pretty good.
The biggest problem with web design blogs is separating the good from the bad. So many are just spammy list posts ("43 CSS tricks you need to know now") that regurgitate the same junk for pageviews/ad clicks.
I use a Sass mixin to generate the code for me.
/* mixins.scss / @mixin gradient($top, $bottom) { background: $top; / Old browsers / background: -moz-linear-gradient(top, $top 0%, $bottom 100%); / FF3.6+ / background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); / Chrome,Safari4+ / background: -webkit-linear-gradient(top, $top 0%, $bottom 100%); / Chrome10+,Safari5.1+ / background: -o-linear-gradient(top, $top 0%, $bottom 100%); / Opera11.10+ / background: -ms-linear-gradient(top, $top 0%, $bottom 100%); / IE10+ / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$top', endColorstr='$bottom',GradientType=0 ); / IE6-9 / background: linear-gradient(top, $top 0%, $bottom 100%); / W3C */ }
/* style.scss */ @import "mixins.scss";
#header { @include gradient(#000000, #FFFFFF); }
It's one line of code to use and it saves me the trouble of opening Photoshop just to tweak a gradient.
SitePoint makes a great getting started book about web freelancing, I highly recommend you read this! Running a successful business is only about 20% product and 80% sales, marketing, talking to clients, etc.
It's great that you want to help him with the code, and it sucks to be 100% dependent on one person for any part of a project, so you're already taking the right steps. Just keep in mind, you will be very busy with the other 80% of the work.
Safari (not all webkit browsers) has some pretty awesome css tags that you can never use:
I would learn HTML & CSS first before venturing into JQueryland. This tutorial series is a great start! Then later when you're feeling confident you can go through this series of tutorials. You can even download them all, and save them for later should NetTuts choose to take them down for some reason.
You're not supplying any HTML, CSS, or fonts here which would help others help you.
> part of me's wondering if i'm just missing a font-weight setting or something...
I don't do graphics, but in a pinch gimp would work, there are some people who hate on it, but I say fuck 'em, they're not paying my bills.
I used to be hardcore jedit, but now it's mostly scribes, and i can mount my webserver directly through nautilus.
I've been exclusively on Linux (other than steam) for seven years.
If you only know basic HTML and CSS then you should start learning JavaScript. Then you can use JavaScript frameworks like JQuery which makes dealing with cross browser compatibility much easier.
example with JQuery (the audio element's id is "audio_element"): $('#audio_element').attr('src','http://www.example.com/song2.mp3');
This would change the audio element's source to song2.mp3
I made some minor changes, the settings icon is better now and the sliders are now HTML5 so you can script them better. Also take a look at the add button instead of the input box. Link
Take a look at /r/ttamtest
I've the exact code from the sidebar and stylesheet at http://jsfiddle.net/uvRa3/
I've only tested it in Chrome 18 and Safari 5.1.5, I'm not sure how other browsers will react to the nth-child() off the top of my head.
Another option is to use a[href=http://i.imgur.com/dq1os.jpg] in your css, but again, I'm not sure which browsers will work.
It works fine with images in FF9
http://jsfiddle.net/pzYwJ/embedded/result/
set your css to and you're all set:
.round { -moz-border-radius: 8px; border-radius: 8px; }
What version of Firefox is this failing in?
What I would normally do is create a file called scripts.js and put all of my js scripts in it. Since it's a project for school though, and optimization might not be a huge issue, you could just be lazy and throw it into your page (although this isn't really considered best practice).
Just make sure that your referencing the jQuery library or it won't work!
>Which parts besides the image itself and div name should I change to match my own code?
It should work fine as is. Just change the image and class to whatever you want. Also, if you wanna constrain the randomness, put the image in a div with set width and height, relative positioning, and change selector in the screenWidth and screenHeight variables to point towards the div. Like this http://jsfiddle.net/kD8wU/5/
Joomla! Get more:
- Tables!
- Drop downs!
Wow actually, they finally kicked the tables. I'm just a hater.
Core layout files are tableless: New for Joomla! 1.6, all core output files are written in XHTML 1.0 Strict. HTML 5 is also supported in Joomla! 1.6.
Sublime Text 2 - it's like TextMate on Mac or like a sexier, more functional version of Notepad++.
It has code hinting for all sorts of languages, loads of keyboard shortcuts & handy functions, etc - check it out!
If you need an IDE for basic, HTML/CSS-only editing, then you'll fall in love with Sublime Text.
Specifically, version 2.
It's not free. The trail runs for 30 days, but there's not a time limit on it, and you're free to use it after 30 days without any features being disabled or (as far as I know) being nagged to upgrade. It depends on you liking it so much that you decide to upgrade because you want to support the developers.
I could go on and on about this editor, but I'll keep it short: it's very beautiful, especially the Twilight theme (it has many more to choose from).
The only thing I can currently offer is that the orange/blue color combo is moving out of fashion as the go-to for a fresh look. Take a look at some current trends for more inspiration.
For the record - Kuler is a straight ripoff of Colourlovers and is one of the reasons I signed up to Colourlovers in the first place since the idea is evidently worth copying.
Read "The Design of Everyday Things", it's old, but still relevant.
Universal Principles of Design by William Lidwell, Kritina Holden and Jill Butler - Really great book. It explains a lot in an easily understandable manner.
The Elements of Typographic Style by Robert Bringhurst - This is the typographer's bible, if you want to work with type properly, read this book.
Grid Systems in Graphic Design by Josef Muller-Brockmann - Grids, know them, use them.
Visual Grammar by Christian Leborg - Beautiful book on composition/ visual concepts.
Oh, I had actually already planned to use the datepicker, I guess I should have phrased my question a little better in retrospect. I didn't mean a date picker, I meant more so the schedule part of it. See google calendar for instance.
On ours the plan is to only show one day at a time and the x axis will be the different technicians (from 3-5 depending on the day). What I'm most specifically having trouble with is the display of job (event in the case of a typical schedule) information themselves, google doesn't even handle that particularly well imo.
At the moment if I can't find another idea I was basically just going to copy googles format and make modifications/improvements to make it fit better into the clients needs.
Am I the only person who thinks this looks more like Obama than Michael Scott? http://www.ebay.com/itm/MICHAEL-SCOTT-BOBBLEHEAD-The-Office-5-Dwight-Schrute-/110782907763?pt=AU_TelevisionMemorabilia&hash=item19cb2d0573#ht_2161wt_1092
Slightly more elegant solution, combining some methods already discussed here:
div.content a.author { display: none; } div.content span.userattrs:before { content: "Redditor "; }
div.content a[href$="omgmog"].author { color: red; display: inline; } div.content a[href$="omgmog"].author+span.userattrs:before { content: "" }
change the "omgmog" to your username, and it should work nicely.
An example of how it looks - http://uk.omg.li/CTYT
you can apply the custom styles in Chrome using the Stylebot extension https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha
Edit:
made the selectors more specific so that it only changes author links within the main thread area, not sidebars/etc.
Keep plugging away regardless!
With regards IE versions, I've used this myself in the past - http://my-debugbar.com/wiki/IETester/HomePage
It wasn't perfect for IE6 (shudder) but the emulation for 7 and 8 seemed to work quite well. The interface is a bit clunky, but it's managable.
For Safari, if Safari for Windows isn't close enough to the real thing then nothing will be!
This is a pretty easy task in almost any language I would think, simple up or down vote and limiting to a single vote per person per special. The meat and potatoes though, as mentioned by TeaBaggins, is the algorithm.
I don't personally think that cloning reddit is exactly the best model for what you are trying to do, but it could be a good jumping off point to grab the source code and look through it. Reddit does use Python, but I'm sure it would be possible in PHP or asp.net or ruby or...
You can do it with Google apps or MagicEdit. Neither requires any programming or configuring of things on the server.
A quick google search will tell you why tables aren't the best for design. In short they are hard for search engines to determine what's on your site, they load much slower than css, and they tend not to display properly with different resolutions.
I'm impressed there's only 2 images, that's great. Sorry I didn't look eariler to see if you were using css. I'd recommend relative positioning, but use whatever you want.
You have nothing to lose if you end up posting an ad or reaching out to someone for a barter agreement, the worst that could happen is that they say no. So in my mind it's always worth a try - and hey, you can even make a solid contact for that day when you can afford to pay someone.
The surprising thing about DIY car painting is that you can get really good results - it just takes a lot of trial and error and a lot of painting, waiting for it to dry, sanding, and then painting again. This guy even managed to get a decent paint job with roll-on Rustoleuom. In my case, I ultimately ended up with a decent result, but bought a new car a few months later.
To your point dpkonofa, yes the CSS must set height: 100%; for html and body, all the way through to content and sidebar (as is in the example).
Their speed is actually pretty incredible, especially their FTP speeds.
I was a long time GoDaddy shared customer (over 6 years) and was blown away when I realized what I had been missing out on, for all those years.
I make a good amount of money (funny, I just quit my job today) so pricing has never really been a concern... I've always just looked for the highest quality, rather than a happy medium.
If you're interested in seeing my personal site, which is basically just a semi-empty Wordpress install, PM me and I'll shoot you a link.
As for coupons, check this out.
I prefer GetSimple because when a client has a host like Godaddy that is painfully slow with Mysql it helps a lot that GetSimple uses a flat file right on their server.
Companies like Godaddy do not host the database and html on the same server. I have mysql database driven websites on Godaddy that take more then 13 seconds to start loading, once they get access to the database they load quickly.
I'm starting to think this is some undefined behavior of the browser that you don't have much control of via styles.
On the good example I showed in the image above here. There's a js file shared.js that adds a shadow div that are sister elements (via jQuery) of the text I had highlighted. It turns out that for whatever reason if I delete the center shadow div <div class="box-shadow center"></div> Using "delete node" from the developer tools in chrome, the selection goes out to the edge of the container (as I don't like). But why would a sister element effect the way another elements text selection highlight was drawn? It's odd.
It's like there's two modes of highlighting text. In one mode the highlight wraps snugly around the characters in the selection, in the other mode the selection pours out to the edge of the containing element. However, the conditions that cause one mode to be triggered v.s. the other are a mystery... Anyone?
Docracy has a lot, varying in scope and quality.
As clintchiz said definitely add in stuff about revisions and changes. If the changes get too big make them sign a new contract for a different project.
Make sure you say how work will be delivered and that you get to keep copies for your portfolio unless you sign a NDA or something.
And watch Fuck you, Pay me
This video should be on the side bar for every time someone asks this question. It's called "Fuck you, Pay me". Title really does say it all - have a good contract or you're screwed. Watch it to get the long explanation.
Most of the people at my workplace that use Dreamweaver don't know how to code in the first place and rely on the wysiwyg of Dreamweaver to get by. I live and die by Sapien PrimalScript. Has been my text editor of choice for the past 6-7 years. Especially when used with Dina programming font.
If you don't already know one, learn a structured programming language. This will allow you to understand the basic concepts of coding (HTML is not code, it's markup) and allow you to use things such as PHP, .NET, etc.
I'd recommend learning basic code concepts by going through the ALICE program. It's an easy way to start coding and learning in a way that isn't as boring as a book. Check it out here: http://www.alice.org/
for the most basic solution, check out http://httpd.apache.org/docs/2.0/howto/ssi.html#basic
look under "Including a standard footer"
For more advanced includes, you may need a php-enabled server
then just name your file filename.php, and put in: <?php include('nav.html'); ?>
Not exactly what you want, and not free, but at work we have a subscription for this service which works rather well:
http://crossbrowsertesting.com/
Basically, it lets you log into one of their virtual machines from within your browser to try out web pages in various platform/browser configurations.
Since you have to ask the question I'm betting you aren't a good enough developer to build it from scratch.
That said Joomla is, in my opinion, not only an inferior piece of software but also ill suited to what you are trying to build. Like others have said look into learning management systems. Canvas and Haiku are on my shortlist. I'm not impressed by what I've seen of Moodle.
I'm just now getting into coding- I'm using w3schools to learn basic html5 but if I could see the actual guts of a website via a ST2 html file, I think that would really help.
sort of like this http://thecodeplayer.com/
I used to use a tool called Taco HTML Edit. It was free years ago and was pretty nice. It's now $24.99 (cheap!) and has a lot of features comparable to Panic Coda, which is $99. It's come a long way and is another solid text editor to add to the list for OS X.
There's also Smultron with its famous strawberry icon. I haven't used it in years but it was a decent text editor if I recall.
Have you looked into jQuery UI?
http://jqueryui.com/demos/datepicker/#inline
It's fairly easy to use and I imagine if you're at the stage you're developing web apps for businesses then I'm sure you'll be able to use it's functionality to perform whatever you need.
EDIT: Actually, having reread your question thoroughly, I believe this would be perfect for you.
Try including the latest JQuery UI instead of just that easing class before the includes for nivo and your lavalamp menu and see how that works.
If that doesn't work you could try this one:
http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery
Which looks like it could fit or be easily modified to fit your needs.
IMO the Lavalamp menu is busy, hard to see and honestly not worth the time to implement. Your site looks good without it there, you should keep it that way.
I'm a new front end designer/developer, and I will recommend the method I'm using to learn jQuery currently.
Find a book on the html/css and run through the examples (ie. type them out) in a tool like dabblet or CSSDeck.
The more you write it the faster you will understand it. I cannot emphasis this enough.
> The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity. (HTML5 4.6.19)
Irony: I used markdown-bold in the above quote, which renders as <strong>, but really, a <mark> tag would have been more appropriate.
I think I recall reading an article called something like "turbo charging your css with php". The basic concept was to dynamicly generate the css file at run times with variables as place holders for css values.
html5 boilerplate isn't a library. it's designed to speed up design time by taking care of all the coding busy work that most websites use. howver it's a great tool and a huge time saver, so you should definitely familiarize yourself with it.
focus for now on learning html5 and css3. once you get that down you should start studying javascript and maybe php. http://net.tutsplus.com/ is always a good site, but really there are thousands of how to guides on the internet.
the most important thing you can do is to read as much as you can and then practice everything you learn. build dummy sites. good ones can even help pad your portfolio for when you do start looking for clients. the more you practice the easier it all becomes.
there are tons of servers out there to host your site including a few free ones. just google 'em. (or better yet just click this link http://b2evolution.net/web-hosting/top-quality-best-webhosting.php)
I actually got it from this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
About that bit, it says: “we want to make it possible for the user to type in the URL and get served the correct page. To do this we check the hash value when the page loads and change the content accordingly.”
The easiest way to do this would be by setting a session cookie that records the user's zoom and then use that information to set the zoom (either with css or javascript) dynamically when the page loads.
If it's plain old browser zooming you're talking about: ctrl +/- type stuff. I's expect the browser to honour the zoom across the domain. If not, you may be out of luck.
Here's an incredibly over-baked example
I hate to sound like a complete fan-boy here, but the Tuts-Plus web design\development site is top notch. You're not going to find a better more up-to-date resource on the planet.