Skip to content

This repository contains content which will be helpful in your journey as a front-end Web Developer

License

Notifications You must be signed in to change notification settings

bbauska/Front-End-Web-Development-Resources

 
 

Repository files navigation

contributions welcome Join Discord GitHub issues GitHub forks GitHub stars Twitter

Front-end web development

Hi There

This is an open-source repository for all who want to learn front-end web development.


Front-end development


Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.

Make sure to show your support by star mark & sharing the repository

A List of Useful Resources for Front End Developers


Table of Contents

RoadMap

  • Roadmap - For a well described step-by-step roadmap for front-end developers. Free

Useful

  • BGJar 🔥 🔥 - Free SVG background generator for your websites, blogs, and app. Free

Learning

  • A Complete Guide to Flexbox | CSS-Tricks - A comprehensive guide to the Flexbox Layout. Free
  • A Complete Guide to Grid | CSS-Tricks - A comprehensive guide to the Grid Layout. Free
  • Command Line Power User - A video series for web developers on learning a modern command-line workflow with ZSH, Z, and related tools. Free
  • CSS Grid - Complete video course all about CSS Grid Free
  • Best Of JS 👍 A site to check the best GitHub Repos for your favourite js framework Free
  • CodeCademy 👍 - A series of interactive courses teaching the world how to code. Offering free and paid subscriptions across a variety of languages. Free Paid
  • Coursera - A selection of courses from highly reputable schools like Stanford and Yale. Free Paid
  • CSS Almanac | CSS-Tricks 👍 - A quick reference guide to many features of CSS. Free
  • Design Resources - Design Resources from Skullface. Free
  • dev.to 👍 - Where programmers share ideas and help each other grow. Free
  • Dicoding Academy - Where everyone can learn programming from fundamentals (Available only in Bahasa Indonesia). Free Paid
  • edx - A series of University-level courses from Harvard, MIT, Wharton, and more. Free
  • EggHead - Web development video tutorials in "bite-size" segments. Has both free and "Pro" (paid) memberships. Free Paid
  • Enboard | Front End Resources 👍 - Organized resources about front end development. Free
  • Flexbox 👍 - Level up your Flexbox knowledge – an online, Zombie-centric story course. Free
  • freeCodeCamp 👍 - A free resource incorporating programming projects and interview preparation for developer jobs. Free
  • Frontend Masters - Web development video tutorials from industry leaders (updated frequently). Has both free (limited-time) and paid memberships. Free Paid
  • Full Stack Open - Course on Full Stack Web Development by University of Helsinski. Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript in one go! This course will introduce you to modern JavaScript-based web development. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js. Free
  • GeeksforGeeks 👍 - A computer science portal for geeks. Free
  • Khan Academy - A universal online learning platform that also provides the important courses for developers. Free Paid
  • LearnAnything - Search interactive mind maps to learn anything. Free
  • Mastering Markdown - A Mini Series that will change how you write documentation. Free
  • Mozilla Developer Network 👍 - The latest information about Open Web technologies. Free
  • Complete web development tutorials 👍 -Lyty.dev complete web development tutorials with well explained examples for free. Free
  • Pluralsight - Unlimited online developer training from industry experts. Free Paid
  • Saylor - An open, online learning solution offering college credit opportunities for students. Free
  • Scrimba - Code-screencast-based learning in a variety of languages. Free Paid
  • Scotch - Many Web development courses. Has both free and "Premium" (paid) memberships. Free Paid
  • Search Courses - A selection of trending courses and tutorials. Free Paid
  • SoloLearn- A free portal for learning web development. Free
  • Team Treehouse - Self-paced learning across a variety of languages and subjects. Free Paid
  • The Modern JavaScript Tutorial - Everything about the Javascript Language. Free
  • The Odin Project - An Open-Source Curriculum for Learning Web Development Free
  • Tutorials point - Tutorials for many different languages with interactive code examples. Free
  • Udacity 👍 - Learn anything online – deep learning, machine learning, front end languages. Free Paid
  • Udemy - An online learning and teaching marketplace. Free Paid
  • Watch and Code® - Build a strong JavaScript foundation for web development. Free
  • W3School - Web development reference library. Covers HTML, CSS, Javascript (jQuery, AJAX, and more), as well as some server-side languages. Includes descriptions and interactive examples. Free
  • Web APIs | MDN - Everything a beginner needs to know about Web APIs. Free
  • Web Design in 4 minutes by Jeremy Thomas creator of Bulma CSS and marksheet.io. Free
  • WesBos - Free and premium courses in web development Free Paid
  • Web Dev Tricks - All your CSS, js, jQuery trending codes with source codes in one place. Your handy partner for all types of modern web development and designs. Free
  • web.dev - Guides and resources for modern fast websites by google developers. Free
  • Become a Front-End Web Developer - Develop competency with HTML, CSS, JavaScript, and jQuery. Free Paid
  • Web Skills - A visual overview of useful skills to learn as a web developer. Free

⬆ back to top


A11y

  • A11y Style Guide - A living style guide or pattern library, generated from KSS documented styles...with an accessibility twist. Free
  • Axe - Accessibility testing toolkit. Free Paid
  • Colour Contrast Analyser - CCA helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. Free
  • Deque University - Online courses on web and mobile accessibility skills. Free Paid
  • W3C Intro to Web Accessibility - Strategies, standards, resources to make the Web accessible to people with disabilities. Free

⬆ back to top


YouTube Channels

  • Adrian Twarog- Tutorials on HTML,CSS,Bootstrap,JavaScript,React,React
    Native,UI/UX and cool Designing stuff Free
  • 1stWebDesigner - Tutorials on WordPress, PSD to HTML Free
  • Brad Hussey - Tutorials on Bootstrap, SASS, jQuery, PHP, Freelancing Free
  • CSS Tricks - YouTube channel of well-known web design and development blog CSS Tricks by Chris Coyier. Free
  • Coder’s Guide - Tutorials on HTML, CSS, JavaScript, Bootstrap Free
  • Codevolution - Tutorials on React, Vue, Angular, MongoDB, JavaScript, MEAN stack, HTML, CSS. Free
  • Derek Banas - Tutorials on C#, Visual Basic, Django, Python, NodeJS, AngularJS, MongoDB, jQuery, JavaScript, CSS, Ruby on Rails, Java, SQLite, Android, HTML, PHP, Objective C Free
  • DevTips - Tutorials on HTML5, CSS, SASS, Bootstrap, Foundation, jQuery, Ruby on Rails, GitHub. Free
  • DesignCourse - Tutorials on UI/UX Design or HTML5, CSS, SASS, Animation Library. Free
  • Elzero Web School - Arabic only Free
  • freeCodeCamp - Tutorials on JQuery, JavaScript, React, Math, Science, Software Engineering, Open source software Free
  • Fun Fun Function - Tutorials on JavaScript, React, Functional Programming, GraphQL, Life as a Developer Free
  • Google Chrome Developers - Latest and greatest talks on modern web development with pro-tips, insights, and techniques to help you level up your web development skill. Free
  • Kevin Powell - Tutorials on HTML, CSS, Helping to Understand Css Better in Simple Way Free
  • LearnCode.academy - Tutorials on HTML, CSS, jQuery, JavaScript, React JS / Redux, Node JS Free
  • LevelUpTuts - Tutorials on HTML, CSS, SASS, WordPress, Magento,Drupal, React, Meteor Free
  • Mackenzie Child - Design to Code Challenge - Tutorials on UI, how to design & code multiple styles of sites. Free
  • The Coding Train - Tutorials on JavaScript, Node, Machine Learning, Neural Networks, Algorithms Free
  • The Net Ninja - Tutorials on HTML, CSS, jQuery, JavaScript, Git and GitHub, Bootstrap, MangoDB, PSD to WordPress, PSD to HTML, and many more. Free
  • TheDigiCraft - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL. Free
  • thenewboston - Tutorials on ECMAScript 6, React JS / Redux, Django, Angular 2, Gulp, Git, Python, SEO, SASS, SCSS, Grunt, Illustrator, MongoDB, PHP, Java, Ruby, Objective C Free
  • Traversy Media 👍 - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, CodeIgniter, Programming Tips Free
  • CodeWithHarry - Tutorials on HTML, CSS, Javascript, Node JS, MongoDB and hosting. Free
  • Programming With Mosh - Tutorial on React, Nodejs, Python, Javascript, Angular,Typescipt and C#. Free
  • Dev Ed - Learn web development, web design, 3d modelling, tools like figma and more Free
  • Web Dev Simplified - Learn Website Developments with Html , Javascript , Css and other Frameworks with same projects and more Free
  • Mozilla Developer - Videos for helping you with your work as a web designer, web developer, or person involved making websites or web apps Free
  • Academind - There's always something to learn. Whether you want to have look at Angular Tutorials or Guides, Vue.js, other Frontend Development Content or Data Science Topics or anything else - you're probably rightFree
  • WB Web Development - Tutorials on HTML, CSS, Bootstrap, SASS, JavaScript, Git and GitHub, MongoDB, NodeJS, ReactJS Free

⬆ back to top


Blogs

Hiring


Podcasts

  • Coding Blocks - Software development podcasts by a team of professional programmers. Free
  • Frontend Happy Hour - Front end, software, and career development podcasts by industry panelists. Free
  • JavaScript Jabber - Podcasts for JavaScript developers. Website also offers many other programming-related podcasts. Free
  • Syntax - Front end development podcasts by Wes Bos and Scott Tolinski from Level Up Tuts. Free

⬆ back to top


Code Editors

  • Atom - Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. Open Source | All Platforms Free

  • Brackets - With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers. Open Source | All Platforms Free

  • Geany - Geany is a small and lightweight integrated development environment. Free

  • IntellijIDEA - A universal IDE from JetBrains. It has code-completion, integrationa, and Version Control System (VCS). Free Paid

  • Notepad++ - Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Windows Only Free -Pycharm-Used specially for python language,It provides code analysis,a graphical debugger,an integrated unit tester,integration with version control systems and supports web development with Django as well as data science with Anaconda. All Platforms | Open Source Free

  • Sublime Text - A sophisticated text editor for code, markup and prose. All Platforms Free Paid

  • Vim - Vim is a highly configurable text editor for efficiently creating and changing any kind of text. It is included as "vi" with most UNIX systems and with Apple OS X. Free

  • Visual Studio Code - Code editing Redefined. It has syntax highlighting and autocompletion with IntelliSense, Git commands built-in, Extensible and customizable. Open Source | All Platforms Free

  • UltraEdit - UltraEdit is a powerful HTML and Code editor available for Mac, Windows, and Linux. It comes with a built-in file comparison utility, autocompletion, advanced layout, multi-tab, multi-pane editors, and syntax highlighting for the most popular programming languages. Free Paid

  • Nano - GNU nano is a text editor for Unix-like OS's. Free

⬆ back to top

Visual Studio Code Extensions

  • Auto Rename Tag - When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag. Free
  • Better Comments - This extension color codes various types of comments to give them different significance and stand out from the rest of your code. Free
  • Bracket Pair Colorizor - Colors matching brackets to make your code much more readable - very helpful. Free
  • Code Spell Checker - A basic spell checker that works well with camelCase code. Free
  • ES Lint - Javascript linter for highlighting code errors and best practices. Free
  • Formatting Toggle - A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click. Free
  • Git History - View git log, file history, compare branches or commits Free
  • GitLens - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. Free
  • Live server - A Quick Development Live Server with live browser reload. Free
  • Material Icon Theme - Google Material themed icon pack. Free
  • Path Intellisense - As you start typing a path in quotations, you will get intellisense for directories and file names. Free
  • Peacock - Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which. Free
  • Polacode - You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It's super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image! Free
  • Prettier - Format your code automatically on save. Free
  • Settings Sync - Settings Sync extension save your setting off in Github. Then, you can load them to any new version of VS Code with one command. Free

⬆ back to top


Tools

⬆ back to top


CSS Frameworks

  • Bootstrap - Design and customize responsible mobile-first sites. Free
  • Bulma CSS - Modular open source framework based on Flexbox. Free
  • Caramel - A simple, modern, responsive website framework. Free
  • Cardinal - Modular mobile-first framework for performance and scalability. Free
  • Element CSS - Vue 2.0 based component library. Free
  • Foundation CSS - Family of responsive front-end frameworks. Free
  • Halfmoon - Fully customizable and responsive front-end framework for building dashboards and tools. Free
  • Jeet - Fractional grid system for Sass and Stylus. Free
  • Less - CSS grid system for designing adaptive websites. Free
  • Material Design Lite - Implementation of Material Design components in vanilla CSS, JS, and HTML. Free
  • Materialize CSS - CSS framework aimed to allow a unified user experience across all products on any platform. Free
  • Milligram - A minimalist CSS framework. Free
  • Neat - A lightweight and flexible Sass grid. Free
  • Petal CSS - Light CSS UI framework based on LESS. Free
  • Pure CSS - A set of small, responsive CSS modules. Free
  • Semantic UI - UI framework designed for theming and responsive design. Free
  • Skeleton CSS - Simple, responsive boilerplate to kickstart any responsive project. Free
  • Spectre CSS - Lightweight, Responsive and Modern CSS framework for faster and extensible development. Free
  • Tacit - Primitive but attractive framework for beginners in graphic design. Free
  • TailwindCSS 🔥🔥🔥 - Highly customizable, low level CSS framework. Free
  • UI Kit - Lightweight and modular front-end framework for web interfaces. Free
  • Unsemantic - Fluid grid system based on percentages, rather than a set number of columns. Free
  • Vital CSS - Minimally invasive CSS framework for web applications built with Sass and Slim. Free

⬆ back to top


Icons

  • Brandicons - Icon font generator and viewer. Free
  • Flat Icon - Database of free icons in PNG, SVG, EPS, PSD, and Base64 formats. Free
  • Font Awesome 👍 - Open source icon set and toolkit with consistent styles. Free Paid
  • Glyphicon - Icons for use with Bootstrap, other CSS frameworks, and any web projects. Free
  • Google Material Design Icons 👍 - An overview of material icons and how to integrate them into projects. Free
  • Icomoon - Icon font generator and icon collection. Free Paid
  • Icongram - Collection of icon packs from different sources. Free
  • IconSVG 🔥 🔥 🔥 - Quick customizable icons for your projects Free Paid
  • Icons8 - Consistently styled and customizable icon packs. Free
  • Ionicons - Open source icons in SVG and webfont. Free
  • Mapicons - Icon font for use with Google Maps API and Google Places API using SVG markers and icon labels. Free
  • Material Design Iconic Font - Full suite of material design icons for easy SVGs on website or desktop. Free
  • MfgLabs-Iconset - MFG Lab's icon set for use in webfonts and CSS. Free
  • Micon - Windows font and CSS toolkit. Free
  • The Noun Project - Comprehensive icon collection. Free
  • Octicons - Collection of GitHub's icons for projects. Free
  • Open Iconic, a free and open icon set - Open source icon set in SVG, webfont, and raster formats. Free Paid
  • OpenWebIcons - Webfont for scalable vector icons and logos. Free
  • Shape.so - Customizable collection of icons and animations. Free Paid
  • Stackicons - Customizable icons for social brands. Free
  • Typicons - Free-to-use vector icons embedded in a webfont. Free
  • Weather Icons - Weather themed icon font and CSS. Free
  • Zocial | CSS3 Button Set - Create social buttons using CSS and rendering social icons as a font. Free

⬆ back to top


Colors

⬆ back to top


Typography

⬆ back to top


Design Inspiration

  • Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired. Free
  • Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world. Free
  • Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide. Free
  • Site Inspire - siteInspire is a showcase of the finest web and interactive design. Free
  • Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world. Free
  • Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things Free

⬆ back to top


Animation Frameworks

  • Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70) Free
  • Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code Free
  • Magic Animations - Showcase of different animations with link to GitHub repo Free
  • Particles JS 👍 - A lightweight JavaScript library for creating particles. Free
  • Typed JS - A JavaScript typing animation library with a great documentation on GitHub Free
  • Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page Free Paid

⬆ back to top


Stock Resources

  • Canva 👍 - 8,000+ free templates and thousands of free photos Free
  • Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free. Free
  • Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions. Free
  • Humaaans - Library of editable people illustrations. Free for both commercial and personal use. Free
  • I’d Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I’d Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site. Free
  • MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools). Free
  • Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they’re all completely free. The website does ask that you credit the photographer when possible. Free
  • The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing. Free
  • Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color. Free
  • Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license. Free
  • Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations. Free
  • Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required Free Paid
  • Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images. Free
  • StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license. Free
  • The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage Free
  • UnDraw 👍 - "MIT licensed illustrations for every project you can imagine and create Free
  • UnSplash 👍 - "Beautiful, Free Photos" & themed collections of photos Free

⬆ back to top


Geolocation

⬆ back to top


APIs

⬆ back to top


Mockups

  • Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot. Free
  • Figma 👍 - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas Free
  • Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more Free Paid
  • Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac. Free
  • The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format). Free
  • MockupsJar 👍 - Build mockups with screenshots of your application or web Design for free to share with customers and clients Free
  • MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks! Free
  • Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser. Free
  • Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic Free

⬆ back to top


Books

⬆ back to top


Challenges / Games

  • Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage. Free
  • Codewars - Improve your skills by training with others on real code challenges. Free
  • CSS Diner - It's a fun game to learn and practice CSS selectors. Free
  • CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own. Free
  • Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels. Free
  • Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels. Free
  • Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout. Free
  • Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges. Free
  • JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript. Free
  • Leetcode - Coding problems to solve in a range of categories and difficulties Free Paid
  • Project Euler - Challenging computer science and mathematical problems. Free
  • 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day. Free

⬆ back to top


Free Tools For Students

  • JetBrains Student License: Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members. Free
  • Student Developer Pack: The best developer tools, free for students via @githubeducation Free

⬆ back to top


YouTube Videos

⬆ back to top

Testing

  • Jest - JavaScript testing framework Free
  • Mocha - JavaScript testing framework Free
  • Karma - JavaScript test runnerFree
  • Istanbul - JavaScript test coverage tool Free
  • TestCafe - Node.js end-to-end testing Free
  • Cypress - JavaScript end-to-end testing framework Free Paid
  • Puppeteer - Google's Chrome automation tool for E2E testing.
  • Playwright - Microsoft's browser automation tool for E2E testing.
  • Sinon.JS - Standalone test spies, stubs and mocks for JavaScript Free
  • Chai - Assertation library for JavaScript testing Free

⬆ back to top

About

This repository contains content which will be helpful in your journey as a front-end Web Developer

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published