Web Development Hub

hamburgers

Sources

A selection of some of the best learning sources and useful resources

CSS Tricks - Web Development Hub - Sources

CSS Tricks is a website worth going back to all the time. It conains a blog which discusses all sorts of interesting development ideas and debates, a huge selection of videos, a large list of code snippets, a forum and an almanac which is a great coding reference.

Hover Effects - Web Development Hub - Sources

Here is an amazing set of hover effects for buttons, these could be used for anything you wanted to become animated. This range includes just about every animation you could ever think of. It’s worth having a look through these and using them in your project to spice your website up.

CSS3 Maker - Web Development Hub - Sources

CSS Maker is made to help you understand the basics of CSS. It has many mini tools, one example is a gradient tool where it allows you to play around with different values and sliders and see the result of what you have created. This method allows you to understand exactly how the code works and is incredibly easy to play around with it

CSS Dig - Web Development Hub - Sources

CSS Dig is a Chrome add on which will allow you to browse any website and delve right into the CSS styles. This might come in handy when you see something you like and would like to look into the styles. You can find all the selectors in the list provided to you and pick out elements check. Another clever aspect to this tool is you can search by property. For example you can search for any time 'border-radius' is used within the site. You can then see all the elements with this styling and see how many times this property occurs throughout the site.

CSS Drive - Web Development Hub - Sources

Loading times are a very important aspect for websites. This tool is designed to compress the CSS code you have written. By compressing it, it allows the browser to read this quicker and therefore the page will load quicker. The downside to compressing files is that the readability of the code will be reduced and will be difficult to edit as the structure tends to be lost. Making a copy of the file before compression is advisable.

W3Schools - Web Development Hub - Sources

W3Schools is a web development information based website. It covers all the main aspects of Web Development. It covers HTML, CSS, PHP, JavaScript, jQuery and Bootstrap. It contains tutorials and references but the site doesn’t go into great detail yet covers everything on a basic level to help you understand all the concepts.

Fontastic - Web Development Hub - Sources

This is a cool way you can use icons but instead of using images you can use a special font with preloaded Icons. You can assign an icon to each letter. The typical icons people tend to use for websites are phone icons, email icon, arrows etc. A big benefit to this method is this is a font, like typical fonts you get easily edit the colour, sizing and other style changes using CSS rather than editing the image in a photo editing software.

Typewonder - Web Development Hub - Sources

With this tool you can see what different fonts would look like on any website. Whether this is testing different fonts on your own website or seeing what some of the biggest websites would look like with a different font, this could come in handy to see which font works best for the website in question. Links to the fonts are also made available to you should you want to download it.

Can I Use - Web Development Hub - Sources

Are you making a website and worried if some of your code may not be compatible in all the common browsers. Using this website you can search for any sort of code, E.g. <canvas>, and this will display which browsers are compatible with this code and which are not. It also goes a little deeper than this as it will show which versions of each browsers support the code.

Validator - Web Development Hub - Sources

This website can check your URL and validate your code. If there are any validation issues this tool which alert you to these to easily identify the issues so you can go ahead and correct them. A correctly coded website can aid in SEO. As well as pointing out errors it can also search for warnings which may require attention.

Plyr - Web Development Hub - Sources

Plyr is a video player that you can embed into your code. The player has a very stylish theme which looks more professional than any typical default video player the browsers provide. There is also an audio player following the same theme which you can take advantage of should you require it.

HTML5 Rocks - Web Development Hub - Sources

HTML5 Rocks have a substantial amount of tutorials written by a large selection of different authors. The tutorials are incredibly well written and are easy to follow. The articles tend to go into more detail so you gain a greater understanding of what you are learning. This website is probably not aimed at newcomers of Web Development, but the more experienced trying to gain further understanding on the basics.

Channel9 - Web Development Hub - Sources

This is possibly the most ideal place to start with learning HTML/CSS. These videos contain high quality explanations and are very easy to follow. The longest video in the set is 48 minutes and covers lots of material. On the website there is also a forum should you want to ask any questions from the videos you watch.

Create CSS3 - Web Development Hub - Sources

Create CSS3 allows you change CSS styles and see the instant result of the styling. This helps you understand the properties you use to style elements and how to style them. All the properties run along the left hand side of the website. It’s great to have a play around and because this is such an interactive tool it’s great for those wanting the learn CSS.

Animate CSS

If you want to spice up your website to adding animations to elements of your website this resource comes with a longlist of different custom animations. Most the work is already done for you it’s just a case of copying the code, then dapting to the animation you want as well as the element you want to effect. Bounce, flash and pulse are amongst the animations you can choose from.

HTML Codes

This is a reliable resource for learning HTML. If you navigate to 'Tags' this lists all the HTML tags and gives a thorough explanation to help you understand. All well as this if you navigate to 'Codes' this has many example of code which also shows you the result. The way this site is designed makes this easy to use and easy to learn.

Code Library

Here you can find a great range of code snippets. This website looks at coding concepts and explains them well.

CSS Play

CSS play hosts a whole load of information of varying types with lots of code snippets. If your looking for an image slideshow for example the website will provide you wtih a good selection. The best part of the website are the 'demonstrations' as these show exactly how things are coded. The 'Layouts' sections is very interesting which made to inspire others with lots of different design ideas for websites.

CSS Atoms

CSS Tricks is a website i go back to all the time as this has the lot. A blog which discusses all sorts of interesting developer ideas and debates, a huge selection of videos, a large list of snippets, a forum and an almanac which is a great coding reference presented nicely.

Basic Use

This is an amazing site and one many people return to, this is likely to build your skills and also provide some great ideas. The articles are well written along with clear code snippets and the ability to click onto the live demos. There is also a tips sections which provides useful information and examples you can hold on to for your projects.

HTMLam

HTML.am is a very well presented learning resource. This is definitely aimed at beginners as it doesn’t go into great detail, but the information on show is of a high quality. The downside to this site is that it doesn’t cover as much HTML as it probably should do.

Codyhouse

Cody House has an exceptional library of code examples specialising in CSS Transitions, Transforms and animations. There is a online course on this website which comes at a cost but can be used purely for the library, as the examples have a thorough explanation on how its coded along with a demo button so you can see the animations in action.

Pleeeease

The issue when coding sometimes is when using new material, the material may be compatible in some browsers but not others. Often if it does work in a browser you need to use a prefix. This website allows you to paste your CSS code and it will automatically add the prefix code where necessary to allow the code to work in all browsers. This can save a lot of time by adding all the different prefixes in seconds.

Shapes of CSS

Want to be able to include any shape on your website without the need of using an image? You can use pure CSS to achieve the majority of shapes out there. Here is a cheat sheet which presents you the code for all the shapes you could think of.

CSS Atoms

This site hosts some great CSS ideas to look over and inspire you. The navigation on the side allows you to filter through the kind of CSS you would like to look at. A great advantage is you can see a live demo of the code within the page rather than having to click a link to a new page making everything that little bit easier for you. The material added to this tends to focus on animations.

Codeply

This is a tool is a responsive design playground in the form of an online editor. You can type your responsive code like Bootstrap, Pure CSS and Skeleton. Users can also submit their work and there is a library full of ideas which you can look through to build your skills further. When using the editor there are also drop down menus to assist with your coding which are worth checking out.

CSS Lint

Here you can paste your CSS code and it will search for numerous things including errors and duplication then will return with your amended code all within a click of a button. This will also aim to improve the performance of the code.

HTML Dog

HTML Dog splits their site into four main areas, tutorials, techniques, examples and references. The tutorials split the contents into beginners, intermediate and advanced material. This prevents you from learning anything too challenging too early. The example area provides some great snippets to explore also.

FreeCodeCamp

This website walks you through learning all the coding skills needed to learn Web Development. It will split topics in to separate lessons whereby it explains and teaches you the information, then it instructs you to try some coding on what you have just learnt. This starts with HTML and CSS then moves on to jQuery and JavaScript along with many other aspects.

HTML Goodies

HTML Goodies was designed for website developers to learn their trade, and to provide them with tips and guides allows others to become more accomplished. There are all sorts of articles on many different subjects to have a read through and are well worth reading.

JS Hint

JS hint is an online JavaScript editor. Whenever a mistake is made it will alert you in the form of a hint. Typically, with similar editors, the hints provided can be vague particularly for JavaScript new-comers. This editor dumbs the errors down a bit more and is therefore a useful tool to put your JavaScript to the test.

Eloquent Javascript

For those wanting to learn JavaScript, it would probably be highly beneficial to read this book. This includes everything you need to know about JavaScript and is written in a way that it would be easy for anyone to read and understand. This website allows you read the whole book online and you can use the contents links to start reading from different chapters.

Javascripting

This is my favorite collection of scripting libraries for JavaScript all in one place. There is a filter on the side to search for what kind of JavaScript library you are looking for. From there it will provide the link to the library so you can then use it. When going to the libraries website there will usually be a guide on how to use it.

Tympanus

This is an incredibly cool website which provides code to bring a selection of amazing animations to the images on your website. The website displays all the ways you can affect the image and copying in the code to your project is very easily done.

Deaxon

This website provide some great code snippets. Lots of them include to likes of fancy animations or nice drop down menus. If you like the look of one and you would like to use it you can use the browsers inspector to grab all the code and then paste this into your project.

Scroll Speed

This clever jQuery plugin allows you to change the scroll speed on your website. Once installed this is a really neat feature which you may end up using on many of your projects.

QuackIt

Quackit has some great examples for HTML, JavaScript and PHP which will help you learn effortlessly. The clean style of the website makes readability easier, along with the colour coding they use to differentiate between the properties in the code. There is also a nice reference area which may be worth bookmarking so you can return to this when necessary.

Javascript Source

JavaScript Source is ideal for learning JavaScript. It covers all the essentials and gives users a good user experience. It appears they take most of the code and ideas from lots of other sites to make an all in one JavaScript source. If you have any JavaScript related questions this site also has a handy forum.

DHTML

DHTML Goodies has plenty of interesting ideas and information to broaden your imagination and skills. It even has walkthroughs on how to make JavaScript games like Suduko so some of the contents of this site suit the more experienced JavaScript coder. The RegEx Tool is also very useful should you need any help with registry expressions

Snipplr

Snippler has a great range of code snippets which you can use for yourself to save time. The JavaScript and PHP snippets are both very useful but this website also covers all sorts of languages, not just relating to web development.

HTML Dog

HTML Dog splits their site into four main areas, tutorials, techniques, examples and references. The tutorials split the contents into beginners, intermediate and advanced material. This prevents you from learning anything too challenging too early. The example area provides some great snippets to explore also.

jQuery Playlist

This set of videos by theNewBoston on YouTube explains every aspect of the jQuery library. The content is delivered incredibly well with good and useful examples to get you thinking in a jQuery mindset. This explores the great advantages of using this over JavaScript. It's recommended for anyone wanting to learn JavaScript to watch this series from start to finish.

Mozilla

As well as creating a great browser Mozilla also provide a comprehensive amount of information on JavaScript. One great aspect of this site is it has a section explaining all the new features in new JavaScript releases. You can use the search bar on the site and this will bring back results for absolutely everything that is JavaScript related.

FreeCodeCamp

This website walks you through learning all the coding skills needed to learn Web Development. It will split topics in to separate lessons whereby it explains and teaches you the information, then it instructs you to try some coding on what you have just learnt. This starts with HTML and CSS then moves on to jQuery and JavaScript along with many other aspects.

W3Schools

W3Schools is a web development information based website. It covers all the main aspects of Web Development. It covers HTML, CSS, PHP, JavaScript, jQuery and Bootstrap. It contains tutorials and references but the site doesn’t go into great detail yet covers everything on a basic level to help you understand all the concepts.

QuackIt

Quackit has some great examples for HTML, JavaScript and PHP which will help you learn effortlessly. The clean style of the website makes readability easier, along with the colour coding they use to differentiate between the properties in the code. There is also a nice reference area which may be worth bookmarking so you can return to this when necessary.

Snipplr

Snippler has a great range of code snippets which you can use for yourself to save time. The JavaScript and PHP snippets are both very useful but this website also covers all sorts of languages, not just relating to web development.

New Boston Playlist

Watching this PHP playlist will get absolutely anyone up to speed with the PHP language. Watching all these through helps others orginally grasp the basics and then after this it goes into more depth. Many others recommend this as the perfect place to start learning PHP.

W3Schools

W3Schools is a web development information based website. It covers all the main aspects of Web Development. It covers HTML, CSS, PHP, JavaScript, jQuery and Bootstrap. It contains tutorials and references but the site doesn’t go into great detail yet covers everything on a basic level to help you understand all the concepts.

PHP.net

PHP.net is the official documentation of PHP. If you’re learning to pick up PHP it has comprehensive documentation to guide you through. It will also shows all the latest PHP updates and share any of the new features so you can keep up to date. If you want to use it as a reference it has a search box in the corner to find absolutely any PHP related material.

Pexels

Pexels is a great free website for high quality stock images. The high quality makes these images perfect for websites. Although not a huge library there’s usually a good choice no matter what it is you’re after. Once you find the image you are after you can download various versions varying in pixels, along with the option to save the image in a custom size. As a bonus the website also offers short videos which may suit your websites in some cases.

Coolors

This tool makes finding colour schemes effortless. It gives you 5 colours and you have the ability to change these using by changing the hue, saturation, brightness and temperature sliders. However you change these attributes the tool will provide 5 colours that complement each other well. By clicking on the browser link you can also look over other peoples colour schemes and pick out any you like.

What Font Is

If you see a font you like the look of you often then want to find what font it is. What Font Is allows you to upload any image containing an particular font and it will search through its database and find you what font it is for you. From there it will also allow you to easily download the font in question

Subtle Patterns

Subtle Patterns is ideal if you’re looking for a subtle pattern or texture suitable for a being used as a background on a website. There is a large amount to choose from so finding a pattern for your needs shouldn’t be too much of a problem. Using patterns or textures as a background can add depth to any design.

FreePik

Free Pik is a large library of images and photos. These can be at a cost but there are also plenty of images for free. If its free pictures you’re after there is a filter to make sure you are only returned with the free ones.

Patternizer

Here is a tool to easily create custom patterns for your website. There are plenty of options to create a pattern exactly how you want it. Once you have the pattern you can then copy the code and use this in your own work.

CSSDSGN

Need some inspiration to design your website? This website picks what they believe to be well designed websites and puts them on show. There is a button to find websites of certain design genres like 'Events'. This can help give you ideas if you require some inspiration and is always worth a look while coming up with your own designs.

Icon Flow

Icon flow is great if you looking at creating your own icons. There are a number of way of customizing the icons so it shouldn’t be too difficult to design them to specification you have set. I like to create numerous icons for my projects with the same theme. From my experience there is an icon for nearly everything when using the search bar.

Color Theif

Got an image you want to base your design around? This clever tool finds the relevant colour palette for the image along with a dominant colour. This allows all your colours on your project work and blend together well.

Free CSS

Unlike most desgin sites, you can actually download the full code of each and every template they provide. There are a huge choice of templates and the quality of these tend to be high. This may be ideal for developers who havent got great design skills. Just find a design suitable for you and change the code where neccassary to suit your project.

Pictura

If you use Photoshop to create your designs this is the perfect add on. This simple add on allows you to add a panel to your Photoshop window and you can then search for any image you want and use it in Photoshop. There is also a feature to search for images without copyrights.

Material Palette

If you want an easy way to find a good selection of colours this is a great tool. By simply selecting two main colours of your choice, it will then select several other colours to create a palette where all the colours work well with each other.

Responsinator

If you want to check out how your website would look on a range of today’s favourite devices use this tool. This includes iPhones, Samsung phones and iPads and shows you an accurate representation on how the site would render.

Awesome Images

Here is a comprehensive list of some of the best free stock photo collections. The libraries they use contain images of only the highest quality. Take a look at the collection and see which resource you like the look of.

PlaceIt

This website allows you to upload an image which will then fit into a device like a phone or laptop on numerous images they provide. The final product of this is very professional and you could use this on the website itself or possibly a leaflet to show and advertise there you have a website. Rather than uploading a screen shot as well you can just put in your URL and the tool will do all this for you.

Font Squirrel

Font Squirrel is one of the best collections of fonts. It has fonts of all sorts including the weird and wonderful. Any font you like the look of you can easily download. It also has a nice feature where you can upload an image with an unknown font and the website will find what font it is for you.

Google Fonts

This is another great selection of fonts. My favorite part of this site is you can search for fonts and filter by thickness, slant and width using the sliders. By changing the value of these sliders it will instantly narrow down the search to find the right font. Ideal for those who have a style in mind but want to see what different fonts are available.

Icon Finder

Icon Finder is the ultimate collection of icons. The collection of icons is now getting towards the 1 million mark so there are plenty to choose from. Once you find the icon you want you can also chose what format you want to save it in and modify the size. To avoid any costs you can filter results to find all the free icons

leftarrow - Web Development Hub - Sources
HTML / CSS
rightarrow - Web Development Hub - Sources
leftarrow1
1 of 5
leftarrow2