WebDevEssentials
The open source repo for quick links to some really amazing websites to help you with your web development. The content provided is accessible for all and free.
Statistics
Content
- Quick Starters to get your projects up and running
- Planning
- Lacking inspiration?
- Frameworks
- CSS Library Must Haves
- Icons
- HTML Canvas usage
- Some documents on ideas with everything covered above
- Some Cool Concepts
- How about some AI chatbot integration?
- Contributors
Quick Starters to get your projects up and running
Use our templates to start your “WebDev” journey
TODO: @dario-maselli
Planning
Before making any major decisions, we suggest using Figma or a similar tool to create wireframes for your site. These tools make the development process much easier. From our experience, ideas that look good in your head might not work out as well in reality. Wireframing also helps prevent scope creep.
- Figma
- Sketch
- Adobe XD
- Canva
Lacking inspiration?
Have a look at sites like these to get an idea that you might like.
- Dribble
- Codepen
- Behance
Frameworks
Before starting a Website Development project, we would recommend you understand what frameworks are and which would be beneficial for you.
What is a Framework? A framework is a structured platform or set of tools and libraries designed to simplify and expedite the development process in various areas, such as software, web applications, or mobile apps. It provides a foundation on which developers can build applications without needing to start from scratch.
Laravel
Laravel is a popular, open-source PHP framework used for web application development. It follows the Model-View-Controller (MVC) architectural pattern, which helps in organizing and separating the application’s logic, user interface, and data layers. Laravel is known for its elegant syntax, developer-friendly features, and a strong focus on simplicity and readability.
Use Cases:
Web Applications: Laravel is widely used to build web applications ranging from small websites to complex, large-scale systems.
APIs: With Laravel, you can easily build RESTful APIs, making it a popular choice for backend development.
eCommerce: Laravel’s robust features make it suitable for developing eCommerce platforms, with built-in support for user management, payment gateways, and more.
Angular
Angular is a platform and framework for building client-side applications using HTML, CSS, and TypeScript. Developed and maintained by Google, it provides a comprehensive solution for developing robust and scalable single-page applications. Angular is a complete rewrite from the same team that built AngularJS. Examples of applications built with Angular include
- Google AdWords, showcasing Angular’s ability to handle complex, large-scale projects.
- parts of Microsoft Office Online for a rich, interactive experience.
- Gmail, which leverages Angular’s capabilities for enhanced performance and user experience.
Angular continues to evolve with regular updates and new features, supported by a strong community and comprehensive documentation, making it a popular choice for modern web development.
React
React is a popular open-source JavaScript library used for building user interfaces, particularly for single-page applications where you need a fast, interactive user experience. It was developed and is maintained by Facebook, along with a community of individual developers and companies.
Electron
Electron is an open-source framework developed by GitHub that allows developers to build cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. Essentially, it enables you to create desktop apps with the same technologies you would use for web development. Here are some examples:
-
Discord: Initially built as a web application using React, Discord uses Electron to create its desktop application. This allows it to leverage the same codebase for both web and desktop versions, ensuring consistency across platforms.
-
Visual Studio Code: Microsoft’s popular code editor is another well-known example of an Electron app. It utilizes Electron to provide a consistent development experience across different operating systems.
Electron is compatible with
- React
- Angular
- Vue.js
CSS Library Must Haves
Note: It is not recommended to use more than 1 CSS library as there can be design conflicts.
Icons
Font Awesome
A popular icon library that provides a vast collection of scalable vector icons. It includes icons for a wide range of uses, such as web applications, social media, user interface elements, and more.
Devicon
A set of icons specifically designed for developers. It includes a wide variety of icons for programming languages, development tools, and technology logos. The icons are available in SVG format, making them easy to customize and integrate into web projects.
Iconfinder
Iconfinder offers a large selection of icons in various styles and formats. You can find both free and premium icons, and it allows you to search by style, category, and more.
Flaticon
Flaticon provides a huge library of free icons, available in multiple formats like PNG, SVG, and EPS. It also offers icon packs and collections tailored to different themes and purposes.
Google Material Icons
Google’s Icons are based on Material Design principles and provide a consistent, modern look. The icons are available in multiple styles and can be easily integrated into web projects.
HTML Canvas usage
<canvas>
Used for drawing graphics on the fly via scripting (usually JavaScript). It can be used to draw graphs, make photo compositions or even perform animations.
Some 2D graphics and animimations libraries
Mo.js
A JavaScript library used for creating motion graphics. It simplifies the process of creating complex animations by providing an easy-to-use API. Mo.js is highly performant and works well for creating web animations that need to run smoothly across different devices and browsers.
Paper.js
An open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean API that simplifies working with paths, segments, and vector graphics, making it a powerful tool for creating and manipulating 2D graphics.
CreateJS
CreateJS is a suite of modular libraries and tools that work together or independently to create interactive content. EaselJS, one of its modules, provides a robust framework for working with the HTML5 Canvas element.
GreenSock Animation Platform (GSAP)
A powerful JavaScript library for high-performance animations. It can animate any property of DOM elements, CSS properties, SVG, and even Canvas elements. GSAP is known for its speed, reliability, and ease of use.
Anime.js
A lightweight JavaScript animation library with a simple but powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript objects, providing a versatile solution for various animation needs.
Fabric.js
A framework for creating and manipulating canvas-based graphics. It provides a rich set of features for working with shapes, images, and text on the <canvas> element.
PixiJS
A 2D rendering engine that works with WebGL and falls back to HTML5 Canvas if WebGL is not supported. It’s known for its high-performance rendering and is used in game development and complex visualizations.
p5.js
A library designed to make coding graphics and interactive content easy and accessible. It provides a simple API for drawing and animating graphics on the canvas.
Konva.js
A library for creating interactive 2D graphics on the canvas. It’s useful for applications like drawing tools, image editors, and interactive visualizations.
EaselJS
Part of the CreateJS suite, EaselJS provides a robust API for working with canvas elements, allowing for drawing and animating graphics with ease.
SplideJS
Splide is a lightweight, responsive, and modern slider/carousel library that is designed to be easy to use and customizable. being responisve, lightweight, customizable, easy access, modular and supporting multiple types.
Some 3D graphics and animimations libraries
Three.js
A powerful JavaScript library used for creating 3D graphics and animations on the web. It removes a lot of the complexity of WebGL and allows for advanced visual effects and interactive 3D scenes.
Zdog
a pseudo-3D engine for the web that uses the Canvas element. It is designed for simplicity and ease of use, allowing you to create flat, cartoonish 3D designs with minimal code.
Charting and Data Visualization libraries
Chart.js
While primarily used for creating charts and graphs, Chart.js uses the <canvas> tag for rendering its visualizations.
Some documents on ideas with everything covered above
Animations
Motion Designs
Explanations and recommendations included - CodePenLink
Transition Examples
Ease-in / Ease-in-out / Ease-out - CodePenLink
Animation cheat sheet
Some Cool Concepts
Oframe
A collection of examples and experiments built using OGL, a lightweight WebGL framework. The examples on the Oframe site showcase various techniques and visual effects that can be achieved with OGL.
How about some AI chatbot integration?
Botpress
An open-source conversational AI platform that helps developers build, manage, and extend chatbots using Node.js and other programming languages.
Dialogflow
Google’s AI platform for building conversational experiences, which integrates easily with web and mobile applications. It offers natural language understanding and supports voice and text-based interactions.
IBM Watson Assistant
A powerful platform that offers natural language understanding and dialogue management capabilities. It allows businesses to build AI-driven virtual assistants that understand user queries and provide accurate responses.
Microsoft Bot Framework
Allows you to build, connect, and manage intelligent bots to interact naturally with users on various platforms, including websites, apps, and messaging services. It supports multiple programming languages and frameworks.
Amazon Lex
AWS service for building conversational interfaces using voice and text. It provides the same deep learning technologies that power Amazon Alexa, enabling the creation of sophisticated, natural language chatbots.
Rasa
An open-source machine learning framework for building AI assistants and chatbots. Providing tools for natural language understanding and dialogue management, allowing developers to create custom AI solutions.