Pin It

Useful links for web masters

To quickly find what you are looking for, enter name in search field below;

NAME

DOMAIN URL

DETAILS

MDN Web Docs 

 

MDN Web Docs - https://developer.mozilla.org/en-US/

MDN Web Docs site provides free detailed information about open source technologies such as HTML, CSS, and others.

W3Schools

w3schools - https://www.w3schools.com/

The world's largest web developer tutorials and reference site for html, css and a long list of other courses.......

Text editor - Atom

Atom text editor - https://atom.io/

Atom text editor is a free and open source code editor application developed by github.

Best Text Editor? Atom vs Sublime vs Visual Studio Code vs Vim

Text editor - Visual Studio Code

Text editor - Visual Studio Code - https://code.visualstudio.com/

Visual Studio Code is one of the best text editors for quick code and text editing

 Best Text Editor? Atom vs Sublime vs Visual Studio Code vs Vim

Button generator

Button generator - https://www.css3buttongenerator.com/

Use the button generator website to quickly create a button for your website. Once created just copy and paste the code in your index.html or any page you are working on.

Frontend Editor 

Frontend Editor - https://www.codeply.com/

Excellent Frontend Editor to learn bootstrap. Allows you to code and view your output in realtime.

Click on 'Go Ply Now' button to begin. Click on the Setting icon (on top) to enable or disable a framework(s). Type some code and click on save it see the results in the bottom window.

Bootstrap

Bootstrap - https://getbootstrap.com/

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

GitHub

GitHub - https://github.com/

GitHub is a cloud-based service that helps developers store their code during a software production. GitHum is a version control system powered by Git. 

You must create an account in order to be able to upload your own code of your own project or if you wisth, to contribute to someone else's code.

Google fonts

Google fonts - https://fonts.google.com/

Get fonts for your website by embedding Google fonts

HTML color picker

HTML color picker - https://www.w3schools.com/colors/colors_picker.asp

HTML color picker - https://www.colorcodehex.com/html-color-picker.html

RGBA color picker - https://htmlcolors.com/rgba-color

HTML Color Picker 1

Tool for choosing different shades of a color

HTML Color Picker 2

Tool for choosing colors in HEX, RGB, HSV and CMYK values.

HTML Color Picker 3

Adding transparency to your color; The RGBA Color Picker is displayed as such; rgba( 0 , 0 , 0 , 0 ), where, ( 0 , 0 , 0 , 0 ) = colors (Red Green Blue Alpha). Alpha represents the opacity or transparency of the color, where, 0% represents absolute transparency and 100% represents absolute opacity (no transparency).

TIP: You may also click on the hamburger menu in Firefox browser and choose Web Developer / Eye dropper.

CSS - clip-path:

CSS - clip-path: - https://bennettfeely.com/clippy/

If you wish to use a background image in you webpage, use the clip-path: property to shape the background image to a desired shape, eg; triangle, polygon, etc...

A Complete Guide to Flexbox

A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Comprehensive guide to CSS flexbox layout.

This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

Frontend editor - codepen

Frontend editor - https://codepen.io/

Go to https://codepen.io/ and click on 'Pen' on the left column, and you will better understand what you can do with this editor.

Video Training

Learn video editing, phtotography and more....

Lorem Ipsum Generator

Lorem Ipsum Generator - https://loremipsum.io/generator/?n=5&t=p

Lorem Ipsum is simply dummy text that you can use temporarily for your webpage creation, so you can focus on creating your webpage and not with the contents of the page.

Button icons - Font Awesome

Font Awesome - https://fontawesome.com/

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit. Click on' Icons' link on top menu to access all FREE icons that you can use in your website; https://fontawesome.com/icons?d=gallery

Domain lookup

Domain lookup - https://www.domainscanada.ca/whois.php?domain=whc&tld=ca&lookup=Search

You use this service to get information about a specific domain name. It allows you to trace the ownership of a domain name.

Eye dropper tool

Open up your Firefox browser.

Click on the hamburger menu in Firefox browser and choose Web Developer / Eye dropper. Browser over the color you are interested in and click to copy the color code.

Internet speed

Internet connection speed - https://fast.com/

Check how fast is your internet connection

Font transform

Transform your handwriting or calligraphy into a font!

Learn how to code

Learn how to code - https://www.codecademy.com/

Learning how to code online, front-end or backend development.

Data

Data sets - https://www.kaggle.com/

Find all the code & data you need to do your data science work

Music

Music for your videos - https://www.epidemicsound.com/

Music for content creators cleared for YouTube, Facebook, Instagram, Podcast and Twitch.

 

Music editor - Audacity

Music editor - Audacity - https://www.nch.com.au/wavepad/index.html?msclkid=5bdedcc5a09a1746f6e2815a8791c31a

This audio editing software is a full-featured professional audio and music editor for Windows and Mac. It lets you record and edit music, voice and other audio recordings. When editing audio files, you can cut, copy and paste parts of recordings, and then add effects like echo, amplification and noise reduction. WavePad works as a wav or mp3 editor, but it also supports a number of other file formats including vox, gsm, wma, real audio, au, aif, flac, ogg, and more.

Get it Free. The free audio editor is available for non-commercial use only. WavePad free audio editing software does not expire and includes many of the features of the master’s version. You can always upgrade to the master’s edition at a later time, which has additional effects and features for the serious sound engineer.

Slides

Slides  - https://slides.com/

Slides is a place for creating, presenting and sharing slide decks.

Images

Images -  https://unsplash.com/

The internet’s source of FREE useable images. More precisely, Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash. This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.

Skype

Skype - https://www.skype.com/en/get-skype/

Download Skype to make FREE video and voice one-to-one and group CALLS, send instant messages and share files with other people on Skype.

FREE online courses

FREE online courses- https://www.classcentral.com/

FREE online courses from top universities around the world like MIT, Stanford, and Harvard.

MOOC

MOOC - https://www.classcentral.com/help/moocs

Most MOOCs are made by universities. To see the full list of Universities - https://www.classcentral.com/universities

Beginners Guide to Massive Open Online Courses (MOOCs)

Mobile-friendly test

Mobile-friendly test - https://search.google.com/test/mobile-friendly

Test how easily a visitor can use your page on a mobile device. Just enter a page URL to see how your page scores.