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 | Font transform - https://www.calligraphr.com/en/ | 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. |
Text editor - Sublime | Text editor - Sublime - https://www.sublimetext.com/ | A sophisticated text editor for code, markup and prose (for Windows) |
DOM - HTML tree generator (Chrome extension addon) | DOM - HTML tree generator (Chrome extension addon) URL - https://chrome.google.com/webstore/detail/html-tree-generator/dlbbmhhaadfnbbdnjalilhdakfmiffeg | Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree. Make sure you have Chrome open in order to add this addOn, and once you install it, right click on the icon on the upper right corner of the Chrome browser and from the menu choose; Manage extensions. Enable 'Allow access to file urls' and the addOn should work. |
HTML - CSS - JS: The Client-Side Of The Web | HTML - CSS - JS: The Client-Side Of The Web URL - https://html-css-js.com/ | HTML, CSS and Javascript are the parts of all websites that users directly interact with. |
Chrome web store (addons) | Chrome web store (addons) - https://chrome.google.com/webstore/category/ext/11-web-development | Chrome favorites in developer tools extensions |
IDE (Integrated Development Environment) - IntelliJ IDEA | IDE (Integrated Development Environment) - IntelliJ IDEA - https://www.jetbrains.com/idea | IntelliJ IDEA Community Edition is the open source version of IntelliJ IDEA, a premier IDE (Integrated Development Environment) for Python, Java, Groovy and other programming languages such as Scala or Clojure. To get the FREE version click on the download button under the 'Community' heading. |
IDE (Integrated Development Environment) - PyCharm | IDE (Integrated Development Environment) - PyCharm - https://www.jetbrains.com/pycharm/download/#section=windows | PyCharm is designed by programmers, for programmers, to provide all the tools you need for productive Python development. To get the FREE version click on the download button under the 'Community' heading. |