المصادر المفيدة للمطورين
مواقع وروابط رائعة ومفيدة جدا
انضم لاكثر من 20 الف مشترك بنشرتنا البريدية ولا تضيع اية تحديثات حصرية
أدوات التطوير
اعداداتنا الخاصة بالفيجوال ستوديو
Check out exactly what theme, extensions and settings I currently use in VSCode.
Emmet Cheat Sheet
Emmet is an essential tool for writing HTML. I teach it in my advanced CSS course. This is a very handy cheat sheet to get started.
HTML5 Resources
Masaq HTML5 and CSS3 Course
My premium course for building beautiful responsive websites with HTML and CSS.
HTML5 Reference by MDN
You don't need to know every HTML element. I just use this excellent reference all the time.
HTML Entity Reference by CSS-Tricks
Super useful reference, gives you HTML entity name, numeric code, hex code and ISO code.
CSS Resources
Masaq Advanced CSS Course
Master advanced and modern CSS, responsive design, Sass, flexbox, CSS Grid, and so much more!
CSS3 Reference by MDN
As with HTML, you don't need to know every CSS property. Use this reference instead.
CSS3 Reference by Codrops
Another excellent CSS reference, this time from Codrops. Make sure to check this one out, too.
Can I Use?
Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
30 CSS Selectors by Tutplus
I find myself using this handy list of the 30 most important CSS selectors from Tutplus all the time.
CSS for People Who Hate CSS
Excellent guide on how to write better, cleaner and more reusable CSS code.
CSS easing functions
An amazing collection of easing functions bo be used in CSS transitions and animations.
JavaScript Resources
Masaq JavaScript Course
My premium course to learn and truly understand JavaScript, by coding real-world projects.
JavaScript Reference by MDN
Another reference by MDN, this one is for JavaScript. This is pretty advanced stuff.
JavaScript Operator Precedence Table
Very handy cheatsheet to determine which JavaScript operators are evaluated first.
JavaScript Event Reference
Handy reference list of all DOM events with explanations, nicely categorized.
ES6+ Browser Compatibility Table
Check out all the new ES6+ features supported and their browser support.
DOM Manipulation Reference
Called "You Might Not Need jQuery", but I use this as a complete DOM manipulation reference.
JavaScript KeyCodes Reference
Get keyboard codes, unicodes and keycodes. Vital reference for keypress event handling.
Principles of Writing Good JavaScript
While I don't follow this 100%, it's good to have a style guide to write better code.
JavaScript Design Patterns
For more advanced developers: learn all common JavaScript design patterns. Perfect reference.
Fonts and Typography Tools
The 100 best free fonts by Creative Bloq
List of free fonts, from vintage-inspired typefaces to slab serifs, for a range of projects.
MyFonts
World's largest library of premium fonts, if you need more than free fonts for your next project.
A Pocket Guide to Typography
Amazing resource to learn about typography. Learn typography basics in less than 30 minutes.
Great Colors and Tools
Open Color
An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch.
Tailwind Colors
Another excellent and popular set of color pallettes. Great selection of colors for all your projects.
Material Palette
Yet another set of colors, inspired in material design. Generate and download your palette.
Colorhunt Palettes
Don't know what colors to use for your website? Colorhunt helps you with beautiful color palettes.
UI Gradients
Collection of beautiful color gradients for you to choose from and export to your project.
Tint and Shade Generator
Easily create lighter and darker versions of any base color. Perfect for hovers, borders and gradients.
Coolors Contrast Checker
Tool to check whether two colors have a good contrast ratio. Essential for building accessible websites!
Images and Videos
Unsplash
My #1 resource for free high-resolution photos. There are more photos here than you can imagine!
Pexels
Another great resource for free stock photos and videos, created by photographers around the world.
unDraw
Hundreds of free and open-source illustrations for your websites, and colors are even customizable.
Random User Generator
Generate random user data, including photos. Like Lorem Ipsum, but for people.
Best Icons and Tools
Font Awesome
A highly popular icon font, consisting of 1000+ icons spread across countless categories.
Line Awesome
Font awesome (previous icons) looks a bit outdated at this point, so this is a very simple alternative.
Iconmonstr
4500+ free and simple icons in 300+ collections, perfect if you need a single icon and not a whole set.
Icons8
An incredible premium resource. Has 175,000+ icons, some for free, across countless styles and categories.
Icon 54
5000 vector icons for iOS, Android, Websites and Apps. Worth checking out if you have a budget!
Popular Blogs & Communities
Stack Overflow
The biggest programmer community. Ask and find answers to HTML, CSS and JS questions.
CSS Tricks
Excellent articles, guides, and even an almanac, all about front-end development, with a focus on CSS.
Front End Front
A place where front-end developers can ask questions, share links, and show their work.
Testing, Optimization and Deployment
Google PageSpeed Insights
Easy tool to test your webpage for performance. You can also use it in Chrome DevTools (Lighthouse).
Squoosh
Compressing images is the most important performance optimization. This is my #1 tool to do so!
Optimizilla
Another tool to compress up to 20 JPEG and PNG images while keeping a good level of quality.
Real favicon Generator
Just upload an image and this tool creates favicons for your website for all platforms.
The Front-End Checklist
Extremely popular checklist to check if your website's code is actually ready for deployment.
Web Usability Checklist
Another checklist, this one is to catch common usability problems of your website.
Website Speed Optimization Guide
An excellent guide to optimize your webpage speed. This is something many devs overlook!
Woorank
Get a SEO review of your website to address common issues, and get ahead of your competition.
Google Analytics
Get free insights about website traffic, visitors and conversions. A must for every website.
Fathom
A privacy-first alternative to Google Analytics. Doesn't require annoying GDPR cookie notices!
Node.js development
Node.js Bootcamp
My premium course for modern back-end dev with Node, Express, MongoDB, and many more.
Node.js Documentation
The Node.js documentation is an essential guide for every developer. There are also useful guides.
Express Reference
Essential manual for building express applications. Also contains tutorials and other resources.
The MongoDB Manual
Learn all about the amazing features of MongDB, especially the ones not covered in my course.
Mongoose Documentation
Keep this open at all times when building an app. Indispensable documentation for every developer!
Node.js Best Practices
Huge list of best practices for building Node apps. Important for big projects.
Awesome Node.js
Want to use more packages than you learned in my course? This is a great list to get you started!
Greenbackend Cloud Hosting
one of the best domain registrar and reliable hosting for Node.js and Web
أدوات لصناع المحتوى
Speakerdeck
Speaker Deck is the best way to share presentations online. Simply upload your slides as a PDF, and we'll turn them into a beautiful online experience.
