Web design is a key element to the success of any website. Technology is constantly improving and features and design principles that were once considered advanced, have now become dull. Staying current with the latest website trends, will keep your website user-friendly with quick loading times and good search engine optimization. Listed below is a list of references for online resources and tools to help build and design proper webpages. Based on my own personal use of each resource and tool, I have rated each in regard of their effectiveness and ease of understanding.
W3 Schools is a free resource that offers tutorials on web development programming languages such as HTML, CSS, JavaScript, JQuery, PHP, and SQL for beginners. W3 Schools
Envato tuts+ is a free tutorial and video course to help web designers and developers to learn skills in code, photography, design and illustration, video, game development and more.Envato tuts+
HTML Dog is a free online resources and tutorial guide for programming languages such as HTML, CSS, and JavaScript.HTML Dog
Free Code Camp is a community based resource with free online programming tutorials and courses for web programmers and developers. Free Code Camp
The Odin Project is a free open source web development coding training program that covers languages such as Ruby on Rails, Node.js, HTML, CSS, and JavaScript.The Odin Project
CSS-Tricks is a free open resource tutorial that features many types of example HTML and CSS code to help create web content for your website.CSS-Tricks
The Jennifer Bourn website lists free premium stock media resources to download videos, music, animations, audio tracks, and sound effects.Jennifer Bourn
Text editing tools are used to build and design web pages, and edit Hyper Text Markup Language.
Brackets is an open source free modern text editor tool for web developers.
Brackets
Visual Studio is a free code editing tool optimized for building and debugging modern web and cloud applications.
Visual Studio
JS Fiddle is an open-source tool software application used for editing and running HTML, JavaScript, and CSS code on a single page.
JS Fiddle
HTML CSS JavaScript is a free online text editor with an instant preview.
HTML CSS JavaScript
Jet Brains Pycharm is an advanced free tool resource used for developing and debugging Python scripts.
Jet Brains PyCharm
Sublime Text is a free text editor that is simple and fast to use.
Sublime Text
Notepad++ is a free source code editor for MS Windows.
Notepad++
HTML.COM is a step-by-step free guide that teaches the basics of building a HTML and CSS website for beginners. HTML.COM
Khan Academy is a free instructional learning resource in various subjects such as math, science, art, history, and computing. It teaches programming languages such as HTML, CSS, Python, and JavaScript.Khan Academy
Mdn is a free open-source web programming platform covering the languages of JavaScript, CSS, HTML, and Web APIs for beginning developers and students.
Mdn
Tutorials Teacher is a free online resource teaching beginners how to code programming languages such as JavaScript, jQuery, C#, Node.js, Web API, and Python3.Tutorials Teacher
Dash is a free online resource that teaches basic web development in your browser, and covers the programming languages HTML, CSS, and JavaScript.
Dash
JavaScript30 is a resource for beginners and intermediate web developers.JavaScript30
Scrimba is an online learning platform that features both free and paid quality courses that teach web development.Scrimba
Colors in web design can make a website memorable, evoke emotions, and can bring attention to key information.
Coolors is an open source free color palette tool.
Coolors
Night Palette is a free color
palette resource tool designed for dark mode.
Night Palette
Web Gradients is a free collection of 180 linear gradients.
Web Gradients
Material Design Palette allows you to select two colors, that are converted into a full color palette that then can be downloaded.
Material Design Palette
Colordot is a free online resource tool for creating color palettes.
Colordot
Colorable allows you to customize colors by using sliders to adjust the hue, lightness, and saturation.
Colorable
Icons in web design draw the users attention, increase readability, and can sum up content quickly.
Boxicons is a free collection of open source icons.
Boxicons
Icofont is a free icon font application.
Icofont
Font Awesome is a free icon font library that works with a variety of frameworks and tools.
Font Awesome
Material Symbols is a free icon and symbol application with over 2,500 glyphs.
Material Symbols
Feather Icons is a free customizable icon application.
Feather Icons
Lucide is a free community made customizable icon font application .
Lucide
A wireframe is the foundation on which to begin building a website. They consist of a simple black and white page layout of how the website should function.
My Draft is an open source free wireframing tool.
My Draft
Mockflow is a free wireframing tool resource similar to a digital drawing board used for creating interface drawings.
MockFlow
Pencil Project is an open-source GUI tool resource used for creating mockups in popular desktop platforms.
Pencil Project
Wireframe | cc is a simple free online wireframing tool.
Wireframe | cc
Mockplus is a free wireframing tool used for creating any web, mobile, and desktop app projects.
Mockplus
Image editing in web design helps with visual appeal, increases faster loading times, and can grab a users attention.
Fotor is an open source free photo editor with image-enhancing tools, popular image file formats, and RAW file processing.
Fotor
Gimp is a free photo editing tool resource.
Gimp
Krita is an open-source tool resource used for animation and digital paintings.
Krita
My Edit is a free AI online photo editor.
My Edit
Be Funky is a free photo editor tool resource used for creating graphic designs and photo collages.
Be Funky
Fancy-Border-Radius is a web based tool that generates CSS code for unique and complex border radius styles.
Fancy-Border-Radius
Doodle is a website that has free hand drawn and hand drawn-like doodle illustrations.
doodle
Wild Textures is a website full of free high resolution textures and patterns for personal or commercial use.
Wild Textures
Humaaans is a free library to mix and match illustrations of people that you can customize.
Humaaans
LogoMakr is a paid resource that helps you design the perfect logo.
LogoMakr
Inkscape is a free drawing tool for illustrators, web designers, and developers.
Inkscape
Uiverse is a tool that has a collection of pre-designed open-source buttons, toggle switches, forms, checkboxes, and more. All you need to do is copy the code.
Uiverse
Emerging Web Trends
of 2023....