Web Development is very popular topic these days, we’ve to always make sure that we’re following the right practices. As the technology keeps progressing and lots of tools are being developed to ease up the development process.

Fact:

Website Template can Restrict the Capabilities of a Website

man in gray dress shirt sitting on chair in front of computer monitor
Photo by Luke Peters on Unsplash

Today we will be sharing some resources that will help you in head starting the developmental process.

Let’s Begin…

Source: Giphy

Designing and building a modern frontend in any web project can be a long and arduous process. Here’s a collction of links to help you. Enjoy!

Concept

These sites are good to get a general idea of possible layouts and style paths to take.
  • TheBestDesigns – General list of hand picked sites from across the web.
  • Awwwards – More awesome sites of various styles.
  • Dribbble – Snaps of icons, doodles, sites, and more from a talented group of people.
  • Siiimple – Another list of sites, but on the much simpler side.
  • Httpster – A curated list of the best sites around the Internet.
  • SaaS Pages – An inspection of Netlify’s page made especially to bring you inspiration.
  • siteInspire – Get inspired.
  • Designer News – The best design / development links from the ‘net.
  • CSS Winner – Reviewed list of great websites.
  • OnePageLove – Great influence for one page and general website design.
  • CodeMyUI – List of code snippets for fancy CSS/JS that make an awesome UI.
  • CodePen – Central repository of user submitted code concepts/snippets. Great for experiments.
  • CodyHouse – Tutorials and showcase of awesome UI elements.
  • CSS3 Cheat Sheet – CSS3 Cheat Sheet

Creation

These sites are good for building a basic framework for the site.
  • Color
    • ColorsWall – Place to store your color palettes.
    • Coolors – Super fast color scheme generator.
    • Kuler – Easily create or view a custom color swatch for your site.
    • uiGradients – Gorgous gradient generator.
    • Spectral – Minimal color swatch creation.
  • Unsemantic – Provides a good grid framework for small to large projects.
  • MDN – Documentation for HTML, CSS, JS, etc.
  • Bootstrap – Very popular framework for building modern websites and web apps.
    • Bootswatch – A list of free themes for Bootstrap.
  • iconscout.com – Get high-quality Icons, Illustrations and Stock photos at one place.
  • Iconmonstr – A collection of free, simple icons.
  • Ionicons – Another great collection of free icons.
  • Subtle Patterns – A massive archive of free backgrounds for your projects.
  • Google Fonts – Tons of free, easy to use webfonts.
  • Text to ASCII – Add some sexy Easter eggs in your source code.
  • CSS3 Animation Cheat Sheet – A collection of CSS3 animation snippets.
  • Flat UI – A superb HTML and CSS framework for flat design. It’s the juice.
  • CSS2Stylus – Convert your CSS to Stylus.
  • YMNNJQ – See jQuery functions in natural JS. No libraries.
  • User Inter Faces – Get ipsum images for user images.
  • Images
    • AllTheFreeStock – All the Free stock mmages, videos, sounds and icons in one location.
    • TheStocks.im – A collection of great stock photo websites.
    • Unsplash – Free, high quality stock photos.
  • MinWiz – Starter kit for minimal, viable, good looking, production-ready websites.

Tools

Every painter needs a brush. Well… Most do.
  • Sublime Text – A very popular text editor for developers.
    • Themes
      • Flatron – It’s flat, purple, and hella sexy.
      • Predawn – Gorgeous dark interface and syntax theme.
  • Atom – A hackable text editor for the 21st century.
  • Brackets – Modern, open source editor with live preview.
  • VSCode – Free text editor
  • Hyper – Beautiful, extensible command-line interface
  • FileZilla – For those who fear FTP in the terminal.
  • WinSCP – Upload files to a MEAN stack or VPS server.
  • Sketch [OS X only] – A professional vector graphics app.
  • Taskade [OS X only] – Create beautiful task lists and outlines.

Collaborate

Working with a team? These links are for you.
  • Cloud9 – An awesome, zen way to work with others in the cloud.
  • Gist – Share code and text with others fast. Like a mini repository.
  • Scratchpad – A simple, RTC tool for coding and previewing websites.
  • Red Pen – Share your design and get feedback seamlessly.
  • Invoice Ninja – Open source invoicing platform.

Backends

Every awesome web app needs an awesome backend.
  • Firebase – A real-time front-end database for your sites.
  • DigitalOcean – A cheap and quality VPS hosting company.
  • Heroku – Cloud application platform; very easy to scale.
  • Auth0 – Authentication, done for you.
  • Hasura – Platform to build and deploy app backends fast.

Testing

Before you launch, these are good tools to make sure your site is ready for stardom.
  • Checkbot – Browser extension that tests your website follows 50+ SEO, speed and security best practices.
  • Placehold – Generate custom placeholder images of any size.
  • Browserling – Cross-browser test your website.
  • CodePen – A free web editor in your browser.
  • WooRank – A review tool for SEO elements, W3 validation, and numerous other variables. Free basic service.
  • Yslow – Tool for analyzing and finding fixes for multiple causes of slow site loading.
  • Hurl.it – Make HTTP requests in the browser.
  • Localtunnel – Open localhost ports to the world.
  • Postman – A tool to make HTTP requests, generate mock servers and make API documentation.

Good Reads

Need something to read in your spare time?
  • Smashing Magazine – A magazine for all things digital design.
  • CSS-Tricks – Awesome blog on anything and everything related to CSS.
  • Codrops – Great collection of design techniques for modern web developmers and designers.
  • Insert HTML – A blog covering current and upcoming techniques and technologies for web developers.
  • 1stWebDesign – A good, simple blog on web development and design.
  • A List Apart – Guest bloggers and full books on topics from coding to business practices.
  • GoodUI – It’s definitely not bad.
  • Mentor – Get random advice from other designers and developers.

Orginally Posted on this GitHub Repository

Like This Article? Subscribe to our newsletter! To receive more cool stuff and other important updates from us ❤️

Note: Views are expressed only from author, and not from official GitHub, for more detailed view about undertaking read 👉 Our Mission