Jump to content

Recommended Posts

Hi guys,

 

I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly:

 

General Stuff:

  • http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it :) You can also save revisions of your Fiddle to track your progress.
  • http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some server-side code. Instead of pasting masses of lines inside a topic, paste your code in to pastebin and get someone to have a look at it for you :)
  • http://jsonlint.com/ - JSON Validator
  • http://paletton.com/ - Color Scheme Designer. See what colours complement each other etc. Useful stuff.
  • http://www.lipsum.com/ - Lorem Ipsum - Useful for inserting dummy text in to your web pages.
  • http://net.tutsplus.com/category/tutorials/php/ - PHP tutorials, quizzes etc. They also do the same for JavaScript, HTML, CSS, WordPress, ASP.NET to name a few. Really good site.

 

Javascript:

 

CSS:

 

Responsive Design:

 

Server-Side Coding:

 

Form Validation (Client-Side):

  • https://jqueryvalidation.org/ - (My preferred method) Simple to use. Include the necessary jQuery and Validation.js files. Simple usage example, call the function using $('#myForm').validate(); and add a class="required" to fields you want to validate :) Also allows you to create custom messages and make the validation more advanced!

I hope these are useful! If anyone has any others to share, please do :D

 

Lyndsey.

Edited by Rich C
Added new content from rbrtsmith's post 20/1/18

Share this post


Link to post
Share on other sites
Guest 4li4s

Blimey! What a great list. Thanks, Lyndsey.

 

If I don't have any content, the lorem ipsum I use is either zombie based http://www.zombieipsum.com/ or good old mofo Samuel L Jackson http://slipsum.com/.

 

I know it's been discussed before but the new Foundation has been released http://foundation.zurb.com/. I don't use it these days but prefer it to Bootstrap. Skeleton is like an old flame. I have a lot of love it and no javascript!

 

Really must work on my development skills, so your links are a great help.

 

Cheers :)

Share this post


Link to post
Share on other sites

Amazing list Lyndsey!

 

Just to throw the Gumby framework into the responsive list http://gumbyframework.com/ . Defaults to 960px which is sweet if you have been using the 960 grid in the past :) Real nice and easy to use! (Also Gumby 2 has just been released).

Edited by AaronAlderman

Share this post


Link to post
Share on other sites

Great resources thanks Lyndsey.


If I may add a one of my favorites: Web Developer Browser add on for FF and Chrome.

This Extension lets you work on your projects directly in the browser.

 

Firefox version: https://addons.mozilla.org/en-US/firefox/addon/web-developer/?redirectlocale=en-US&redirectslug=Web_Developer_Extension_%28external%29

 

Chrome Version: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm



Share this post


Link to post
Share on other sites

Could we try to merge the old decrepit version of this thread with this awesome new version? That would be perfect - finally unpin that topic from 2010!

 

Original can be found (still currently pinned) here: http://www.webdesignerforum.co.uk/topic/34557-handy-links-for-web-designers-developers

 

Edit: I will help with this...after my soup :p

Edited by andy9l

Share this post


Link to post
Share on other sites

One way of increasing your worflow is actually using a good text editor.. For those of you who are not already aware of this then I highly recommend SublimeText link http://www.sublimetext.com/.. Its awesome, has syntax highlighting, supports snippets, can connect to gists etc.. One reason why I like it so much is all the packages you can add. For example you can add emmett http://emmet.io/ formerly Zen Coding & allows you to create your own snippets or use others. Other little packages such as fetch http://net.tutsplus.com/articles/news/introducing-nettuts-fetch/ are a convenient way of using up to date packages. There a packages here that will validate your HTML/CSS in the editor too

 

Further to this I would also highly recommend utilising Compass/SASS http://compass-style.org/, even if you do not utilise the full functionality of it I find that it just incease workflow. If on Windows then Scoutapp http://mhs.github.com/scout-app/ will run it for you, or if on Mac then codekit or the terminal depending on your level of experience. Compass will even generate sprites etc.. Using Compass or others you can even start using your favourites grids out of the box e.g. 960 or import others such as susy

Share this post


Link to post
Share on other sites

Just wanted to add 2 more links I use ooodles, always open in my browser :D

 

Font Convertor - A great sliding tool to convert pt / px / em / % font sizes.

Percentage Calculator - I'm pretty bad with maths and so this gem is great for responsive calculations.

Share this post


Link to post
Share on other sites

Wow! thanks for the great list :D ... here's something i use very frequently for generating CSS based gradients http://wdf.co/36

Edited by 4li4s
No need to format a link as code

Share this post


Link to post
Share on other sites

Oh I almost forgot

 

LiveReload.com - It is an exspensive app on the mac store but it is amazing. I think it is coming to windows.

Share this post


Link to post
Share on other sites

I now have a resource section on the directory, just under the six banner adverts. It covers CMS, web hosting, CSS generators, some cool JQuery sites, SEO stuff etc.

 

It also have a rating system, although it is early days yet: professionalwebdesigndirectory.com

Edited by neil0wen

Share this post


Link to post
Share on other sites

Here's another cool resources for Web Developer it's useful for me.

 

HTML Color Code - You'll able to see a color code by clicking the desire color.

CSS Generator - Instant Generate Stunning Menu, Images Sliders, Table, Text Effects, etc.

Graphic Design Inspiration - If i'm dry on designing, I'm looking on this website to inspired and motive me.

HTML5 Development Tools - Another cool resources for HTML5 Development, you should take a look.

Edited by shindereki

Share this post


Link to post
Share on other sites

Nice list of resources above. I would add 3 more which I use quite often:

 

css3please.com - generate css3 code snippets with all vender prefixes

caniuse.com - handy overview of features supported by older browsers

unheap.com - collection of handpicked jquery plugins

Share this post


Link to post
Share on other sites

Nice list ! Thanks Lyndsey. 8).gif' alt=':seas8:'>

 

I would like to add mine one ---- eCSStender . It simplify the website design process. You can use advace selectors, custom font face, border radius and rest all.

Share this post


Link to post
Share on other sites

Such a needed websites who wanna become web designer and web developer. I did like very much in these lists.

 

I have lost my time with other forums. Here i could see a helpers and experts like you.

 

Thanks for such a huge informative lists.

Share this post


Link to post
Share on other sites

Nice list of resources above. I would add 3 more which I use quite often:

 

css3please.com - generate css3 code snippets with all vender prefixes

caniuse.com - handy overview of features supported by older browsers

unheap.com - collection of handpicked jquery plugins

 

We should put your site as well Petr -> https://ihatetomatoes.net/blog/ Always a good resource for those wanting to do web animations.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Here is a list that might help web designers and developers..

1 . htmldog.com

Web designer’s resource for everything HTML, CSS, and JavaScript.

2. CSS Tricks

CSS-Tricks* is created, written by, and maintained by Chris Coyier

3. Rogie

Illustration, design and thinking of web designer and illustrator Rogie King

4. W3 School

W3Schools Online Web Tutorials

5. Subtle Patterns

Free textures for your next web project

6. Jan Cavan

is a Designer, Illustrator & Front-end Developer

7. Andy Taylor

Words and Projects

8. Daring FireBall 9. Creative BLog

Your daily dose of design tips and inspiration

10. SitePoint

Learn Web Design & Development with SitePoint tutorials, courses and books

11. Smashing Magazine

for Professional Web Designers and Developers

12. 1stWebdesigner

Web Design, WordPress And Freelance Training

13. Spoongraphics.co.uk

Design Tutorials, Graphic Design Articles and Free Resource Downloads from the blog of Graphic Designer Chris Spooner.

14. Codrops

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

15. Web Design Ledger 16. www.daniweb.com 17. Hongkiat

Design weblog for designers, bloggers and tech users. Covering useful tools, tutorials, tips and inspirational artworks.

18. www.raywenderlich.com

High quality programming tutorials: iOS, Android, Mac, and more!

19. Webdesigner Depot

Web Design Resources for Web Designers. They include Photoshop Tutorials, WordPress Plugins, and Web Development tools. Download free icons, Photoshop brushes and many more.

20. www.speckyboy.com 21. Vandelay Design

Web design blog for professionals with topics focusing on useful design techniques, design best practices and design inspiration. Subscribe for updates!

22. www.designmodo.com

Share this post


Link to post
Share on other sites

Why would you want to generate HTML code? that's a bad idea.

 

If you cannot write HTML then you seriously need to go back and learn it, that should be the first thing you learn as a beginner.

 

As for the list of resources above.. w3Schools should be removed.

Share this post


Link to post
Share on other sites

Why would you want to generate HTML code? that's a bad idea.

...

With a few exceptions. It is nice with tools or macros to eg. convert the 50 linebreaks to li elements.

 

@@alvinajolly Dont waste your time on the generator that you posted. It really produces horrible mark up. I tried the "contact form" generator and look at the result

<form action="mailto:youremail@yourdomain.com?subject=form submission" method="post" enctype="text/plain">
<table><tr><td>
name: <INPUT NAME="name" TYPE="text" VALUE="Your name" SIZE=20><BR>
email: <INPUT NAME="email" TYPE="text" VALUE="Your email" SIZE=20><BR>

</td></tr>
<tr><td align=center>
<INPUT TYPE="submit" value="submit" style="color: #ffffff; background-color: #000000">
</td></tr></table>
</FORM>
  • No indentation
  • Tags and attributes in uppercase (the form tags opens in lowercase and closes in uppercase
  • Inline styles
  • Table layout
Edited by Nillervision

Share this post


Link to post
Share on other sites

 

With a few exceptions. It is nice with tools or macros to eg. convert the 50 linebreaks to li elements.

 

 

I think this could probably be done quicker using Sublime Text and some of it's handy shortcuts.

 

If you aren't aware holding down Ctrl and clicking on a new line will create another cursor which enables you to write repeated code multiple times.

Share this post


Link to post
Share on other sites

 

I think this could probably be done quicker using Sublime Text and some of it's handy shortcuts.

 

If you aren't aware holding down Ctrl and clicking on a new line will create another cursor which enables you to write repeated code multiple times.

 

The trick you mention, CMD+D and CMD+SHIFT+L are literally my three best Web Development friends.

Edited by NOCK

Share this post


Link to post
Share on other sites

 

I think this could probably be done quicker using Sublime Text and some of it's handy shortcuts.

 

If you aren't aware holding down Ctrl and clicking on a new line will create another cursor which enables you to write repeated code multiple times.

 

This. Even more so in VIM. I literally cannot think of any good reason to use a HTML generator. Anybody bothered about keystrokes can use Emmet, or use /learn a preprocessor like Jade.

I myself use Emmet.

Share this post


Link to post
Share on other sites

@@rbrtsmith @@Nillervision you both are right that using a HTML generator is really horrible thing..but if you are new to html and don't have enough time to learn and want quick result...than it is good to use HTML generator..after modifying some code..

 

HTML can be learnt in a matter of hours - to at least a higher standard than that generator produces. If you really must then just use a site builder like squarespace.

If you generate the HTML then what about the CSS, any JavaScript? Setting up a domain, hosting and deployment? I see no use whatsoever for generating (what this tool produces) very bad code.

 

Moreover this thread is aimed at resources for designers and developers, not entrepreneurs who need a quick site. The first thing anybody learns in web pretty much is HTML.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

2 from me that I use on a daily.

coolors.co - Great tool for designers whom want cool color palets. Strongest tool for such in my opinion

shoelace.io - I swear by this! For those developers who use Bootstrap, this allows you to draw up your grid and marks the html on the right.

Share this post


Link to post
Share on other sites

I think this page needs an update.  Many of the tools and resources listed are no longer useful for building modern web sites / applications

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

For CSS I'd add

  • CSS Wizardry: https://csswizardry.com/
  • Sass Guidelines https://sass-guidelin.es/
  • Responsive design Nebula - bit biased but I built this framework that should be useful to members on here https://nebulaui.github.io/nebula/

For JavaScript (Weird there's nothing there seen as it's the most important bit of tech to learn as a web dev...)

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By sbwebNUX
      Hi All,
      I am working on HTML5 and webAPI. I am trying to download a recording in a subfolder within my project directory. By default the download saves it to downloads folder. if I add path it adds it with an _.
       
      Is it possible at all to download my audio file to a specific folder.
      Please someone reply.
       
      Thanks, Sri
    • By GrahamUK33
      I have a boarder around an image, but when a caption is added underneath the image, I am after the boarder to encapsulate the caption.

      .php
      <div id="attachment_55" style="width: 810px" class="wp-caption aligncenter"><img class="wp-image-55 size-full" src="http://ithorizon.online/wp-content/uploads/britain-at-war.jpg" alt="britain at war" width="800" height="600" srcset="http://ithorizon.online/wp-content/uploads/britain-at-war.jpg 800w, http://ithorizon.online/wp-content/uploads/britain-at-war-300x225.jpg 300w, http://ithorizon.online/wp-content/uploads/britain-at-war-768x576.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"><p class="wp-caption-text">Britain at War</p></div>
      .css
      /*-- image, video --*/ img, video {     height: auto; /* maintain scaled height. */     max-width: 100%; /* width of container. */ } img.alignleft, img.alignright {     float: none;     margin: 0; } img.size-full {   padding: .4rem .4rem .4rem .4rem;   background-color: #fdf8f1;   border: 1px solid #f8e4ca;   border-radius: 4px;   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);   box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); } /*-- image, video caption --*/ .wp-caption, .gallery-caption {     color: #666;     font-style: italic;     margin-bottom: 1rem; /* margin before text */     max-width: 100%; } .wp-caption img[class*="wp-image-"] {     display: block;     margin-left: auto;     margin-right: auto; } .wp-caption .wp-caption-text {     margin: 0; /* text padding */ }  
      As you will notice, I am creating a WordPress theme. I am not sure if I have called up the all the right tags in CSS for the image and caption.
    • By jwbjnwolf
      Hi, I've got a PHP array menu of all folders of a directory which is ordered using the "Arraysortdate" value in each page folder's Json file instead of the folder names. 
      I've basically got everything sorted now, just this one last thing that I realise I like to have.
      A previous/next page button on each page that takes the current page, matches it with the value in the all folders array, and links to the next/previous page in that array which is sorted like previously mentioned using the "Arraysortdate".
      My json files are structuted as follows:
      {  "Arraysortdate": "2018-07-16-1",  "Month": ["July 2018"],  "Category": [    "testcat1",    "testcat2" ] } Here is the PHP I'm using for grabbing all folders and ordering them using the Arraysortdate value for each:
      <?php // initial array containing the dirs $dirs = glob('*/posts/*', GLOB_ONLYDIR); // new array with date as key $dirinfo_arr = []; foreach ($dirs as $cdir) { // get post info from file $dirinfo_str = file_get_contents("$cdir/includes/post-info.json"); $dirinfo = json_decode($dirinfo_str, TRUE); // add current directory to the info array $dirinfo['dir'] = $cdir; // add current dir to new array where date is the key $dirinfo_arr[$dirinfo['Arraysortdate']] = $dirinfo; } // sort new array krsort($dirinfo_arr); ?> Using print_r to dump the array contents, this will return for an item with say the json data as above:
      Array ( [0] => 2018-07-16-1 [1] => Array ( [0] => July 2018 ) [2] => Array ( [0] => testcat1 [1] => testcat ) [3] => blog/posts/test-blog-post ) I use this after sorting the array to output as just the folder path for using in html:
      <?php // get current dir from new array foreach($dirinfo_arr as $key=>$dir) { $dirpath = $dir['dir']; ?>    <!--HTML such as-->    <a href="<?=$dirpath?>">text</a> <?php } ?>  
    • By drkirkby
      My company (Kirkby Microwave) website was coded in XHTML, and had no errors on the W3C validator. It has been suggested that nobody uses XHTML, and I should switch to HTML 5. So I changed the bit at the top of the webpages to read
      <!DOCTYPE html >
       
      After making some minor changes, mainly removing the setting of the width inside the <img src> tag, I can get pages to almost validate. Some don't, but that is simply because I have not got around to fixing the errors. But the W3C validator is always complaining
      Warning: This document appears to be written in English. Consider adding lang="en" (or variant) to the html start tag.
      I can't seem to see how to fix this.  Despite reading the links on the W3C validator page, no matter what I try does not work! Feel free to look at the source of my homepage, and let me know how to fix this.
      I only speak English, so just want to leave it as English, and nothing else.
      I did not post the link to my homepage, as I'd be interested if anyone that Googles Kirkby Microwave finds a .com domain. There is a .com, but it should be hidden from Google, but anyone on the BT broadband network may be able to see it, as the IP address range is restricted to those that BT seems to serve me up.
      Dave
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,574
    • Most Online
      4,970

    Newest Member
    David Rodriguez
    Joined
  • Forum Statistics

    • Total Topics
      65,793
    • Total Posts
      453,272
×