Web Development & competitive Programming

Why this E Book

  • * Do you want to learn web development or competitive programming but don't know where to start?

  • * You want to learn the basics Algorithm that can get you up and running quickly?

  • * Do you want to become a pro developer and competitive Programmer


      • If you answered YES to any of the above, then this E book is for you.

Course image

full stack Development resources

Development tools

Visual Studio Code

I recently switched to this code editor and I'm completely in love! See the next resource for my setup.

My Visual Studio Code Setup

Check out exactly what theme, extensions and settings I use for VSCode in the coding videos of "Advanced CSS and Sass".

Brackets Text Editor

The text editor I used in my HTML/CSS and JavaScript courses. The theme I used was OS X Style | Flat & Dark.

Codepen

Codepen has become an essential tool for me to quickly test out some ideas or do some tests. I use it in my advanced CSS course.

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

CSS Resources

Jonas' Advanced CSS Course

Master advanced and modern CSS, responsive design, Sass, flexbox, and so much more!

CSS3 Reference by MDN

As with HTML5, you don't need to know every CSS3 property. Use this reference instead.

CSS3 Reference by Codrops

Another excellent CSS3 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.

Animate.css

Just-add-water CSS animations. A simple CSS library that lates you add animations with ease.

Responsive Grid System

A quick, flexible and easy fluid grid for spectacularly easy responsive web design.

CSS for People Who Hate CSS

Excellent guide on how to write better, cleaner and more reusable CSS code.

Clippy

A small tool to help you using the new and powerful clip-path property.

Cubic-bezier function generator

A tool for visually generating timing animation functions to use in CSS transitions and animations.

CSS easing functions

An amazing collection of easing functions bo be used in CSS transitions and animations.

JavaScript Resources

javascript.info

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.

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.

ES6 Browser Compatibility Table

Check out all the new ES2015/ES6 features supported by the most popular browsers.

Fonts and Typography Tools

Google Fonts

The #1 resource for free and easy-to-use webfonts. Has a huge library of fonts.

Fontsquirrel

The best, 100% free fonts for commercial use. Another well-known huge font library.

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.

TypeTester

Web application for testing and comparing more than 2200 typefaces.

A Pocket Guide to Typography

Amazing resource to learn about typography. Learn typography basics in less than 30 minutes.

Great Colors and Tools

Flat UI Colors

A good starting point for choosing a flat design color for your next project.

Material Palette

Another great 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.

LOL Colors Palettes

Curated color palettes inspiration. Another source for great color palettes.

UI Gradients

Collection of beautiful color gradients for you to choose from and export to your project.

Paletton

A very popular tool which allows you to create color combinations that play well together.

0to255

A simple tool that helps you find variations of any color. Perfect for hovers, borders and gradients.

Coleure

Color management app that allows you to choose, mix and edit great colors.

Learn about colors

If you want to learn about colors, this is the #1 resource to go.

Images and Videos

Unsplash

My #1 resource for free high-resolution photos. 10 new photos every 10 days.

The Stocks

The best royalty free stock photos from multiple resources, all in one place.

ISO Republic

Free and premium stock photos for your website. Easily searchable by topic.

Pixaby

Over 620,000 free stock photos, vectors and art illustrations you can use anywhere.

Subtle Patterns

High quality resource of tilable textured patterns, completely free to use.

iStock

Millions of royalty-free images, illustrations, videos, and music clips at ridiculously great prices.

Random User Generator

Generate random user data, including photos. Like Lorem Ipsum, but for people.

Coverr

Best resource for beautiful and free videos for your website. 7 new videos added every monday.

Startup Stock Photos

Lots of great pictures of startup offices, people, devices and more. I love it.

PlaceIt

Instant iPhone and Macbook mockups. Just place your screenshot on a device, no Photoshop.

Canva

Easily create beautiful designs with drag-and-drop features and professional layouts.

Best Icons and Tools

Ionicons

My personal favorite #1 icon font, 100% free even for commercial usage.

Font Awesome

Another highly popular icon font, consisting of 628 icons spread across several categories.

Flaticon

The largest database of free icons available in PNG, SVG, EPS and PSD. It's even searchable.

Iconmonstr

Over 3400 free and simple icons in 246 collections, all searchable.

Icons8

A truly premium icon set with 24,600 icons in any size and format.

Icon 54

2100 Vector Icons for iOS, Android, Websites & Apps. Drawn by hand and designed to perfection.

Swift Icons

2104 high quality icon set, covering 19 categories in 4 styles: outlined, filled, colored & flat.

Fontastic

Create a customized icon font from your icons. Choose from 9000 icons or import your own.

Iconjar

A Mac app to organize, search and use icons the easy way. Works with Sketch, PS and AI.

Icomoon

A great app to convert icon fonts to SVG icons and sprites. I use it in my advanced CSS course.

Find Design Inspiration

Dribbble

The ultimate design inspiration resource, not just for web design. The show and tell for designers.

Land Book

Product landing page gallery. My #1 inspiration resource when I build a landing page.

One Page Love

The ultimate showcase of delicious One Page websites.

Site Inspire

A showcase of the finest web and interactive design. Currently over 4900 websites.

Call To idea

Get quick inspiration for common website elements such as forms, sliders, navigations, etc.

Media Queries

A collection of responsively designed websites for inspiration.

Planning, Testing, Optimization and Deployment

Periodic Table of Web Design Process

Great overview of the web design process: from project brief to launching the final version.

HTML Validator by W3C

Check if your HTML markup is valid and contains no errors. Official W3C tool.

CSS Validator by W3C

Check if your CSS code is valid and contains no errors. Official W3C tool.

Optimizilla

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.

Usability checklist

Catch common usability problems of your website before you deploy it. Very useful.

Google Mobile-Friendly Test

Test if your webpage has a mobile-friendly design, according to Google's ranking factors.

Google PageSpeed Insights

Quick tool to test your webpage for performance on all devices.

Nibbler

Website testing tool for 10 key areas including accessibility, SEO, social media and technology.

Woorank

Get a review of your website to address issues and identify opportunities to get ahead of competition.

Google Analytics

Get free insights about traffic, visitors and conversions. A must for every website.

Namecheap

Purchase premium and cost-effective domain names, web hosting, and much more.

Website Speed Optimization Guide

An excellent guide to optimize your webpage speed. This is something many devs overlook!

Sizzy

A tool for developing responsive websites crazy-fast. See your page on multiple devices at once.

Node.js development

Jonas' 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!

Node Weekly Newsletter

This is how I stay informed about everyhting happening in the Node.js world.

competitive programming resources

Programming language

C

C is a powerful general-purpose programming language. It can be used to develop software like operating systems, databases, compilers, and so on.

C++

C++ is an object oriented language and some concepts may be new. Take breaks when needed, and go over the examples as many times as needed.

JAVA

Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms,

Data Structure

geeksforgeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles

codemyschool

mycodeschool is an educational initiative. Our aim is to present some core concepts of computer programming through illustrated examples

freecodecamp

Learn to code at home. Build projects. Earn certifications. Since 2014, more than 40000 freeCodeCamp.org graduates have gotten jobs at tech companies

Algorithm

geeksforgeeks

The goal of this project is to translate the wonderful resource http://e-maxx.ru/algo which provides descriptions of many algorithms and data structures especially popular in field of competitive programming.

Advance Algorithm

The goal of this project is to translate the wonderful resource http://e-maxx.ru/algo which provides descriptions of many algorithms and data structures especially popular in field of competitive programming.

codechef

CodeChef is a competitive programming website. It is a non-profit educational initiative of Directi, aimed at providing a platform for students

Competitive practice

if you like these resource feel free to share with your friend and follow me on the below given link