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 Luke Ottey
      @Seth and I are working on a website that uses Envira-gallery and are unable to use CSS code to move the image caption (which is currently located in a white font in the top left) of the front-page gallery images to below the bottom border of the image (in order too see the caption you have to first click on the image). We are looking for a way to center the caption below the image in the same spot regardless of what the viewport size is. Here is a link to the page: https://webdesignstaging.site/firstfloorflow/
      Any help would be wonderful, thanks so much!
    • By carloswebwdf
      Hello !!
      Following the instructions from the site 'W3Schools', I created one dropdown menu in javascript, like shows in the link below:
      http://www.terezanininha.com.br/Exemplo_proprio_4.html
      But what I need, for exampple, after click in the button and show de list, at mouseover on the link 'Link2' for example, shows another list in the right
      side with more link options !!
      How Can I do that ??
      Wating answer...
    • By BrowserBugs
      Hi,
      A bit stumped really. I'm trying get get a live test for given urls, mainly the url you're currently on. I've the following which works, but never on the page you're viewing, it just hangs so I'm missing something for sure;
      <?php function pageReport($var) { $ch = curl_init($var); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_VERBOSE, 1); curl_setopt($ch, CURLOPT_HEADER, 1); curl_exec($ch); $arry = curl_getinfo($ch); curl_close($ch); return $arry; } $wdf = pageReport('https://www.webdesignerforum.co.uk/forum/95-server-side/'); print_r($wdf); // Works $other_page = pageReport('https://www.mydomain.co.uk/other-page.php'); print_r($other_page); // Works // However add the following and it goes squiffy... $this_page = pageReport('https://www.mydomain.co.uk/test.php'); // this is the page we're testing on print_r($this_page); ?> I'm sure it freaks due to some weird double connection on the current page? Any ideas around this?
      Cheers.
      Update: After much digging a few articles the best answer to what's happening; "Be aware that if you're issuing the CURL request to your own site, you're using the default session handler, and the page you're requesting via CURL uses the same session as the page that's generating the request, you'll run into a deadlock situation." stackoverflow.
      For me i'm still struggling, I've a cron approach I'm working on to generate for each page at set intervals and saving the array for inclusion; essentially running this page on it's own is fine for any urls on the site as it never tests self. It's a small site so not many to do, would rather a cleaner method if anyone has any ideas?
    • By lcot
      I am on the search for a jQuery or even vanillaJS-based plugin that can replicate similar functionality to that of the 'FIND WHAT MATTERS' section of this web HOMEPAGE . It is the 'team grid' section where there are rows of responsive images, and a dropdown container beneath each row that contains dymanic content dependent on which 'accordian item' or image was clicked on.
      You can see a screenshot here: https://monosnap.com/file/M8zQInDm6d3IQ84QOb49Y0JqSlA78F
      The grid is responsive, shrinking from 8 per row, to 3 per row on mobile and the dropdown expands beneath the row of the image, no matter the screen size.
      Does anyone know of any plugin that can achieve this functionality, or am I going to have to develop this by myself?
      Thanks!
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

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

    Newest Member
    jackharry058
    Joined
  • Forum Statistics

    • Total Topics
      65,736
    • Total Posts
      453,130
×