Front-end developer

The front-end of a website is the part that users interact with. Everything that you see when you’re navigating around the Internet, from fonts and colors to dropdown menus and sliders, is a combo of HTML, CSS, and JavaScript being controlled by your computer’s browser.

HTML

HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.

Places to Learn HTML Online:

W3 Schools SoloLearn Mozilla codecademy LinkedIn Learning HTML cheat sheet HTML Best Practices

CSS

CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.

Places to Learn CSS Online:

W3 Schools SoloLearn Web.dev by Google Mozilla codecademy LinkedIn Learning CSS cheat sheet

Javascript

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.

Places to Learn Javascript Online:

W3 Schools SoloLearn The Modern JavaScript Tutorial LinkedIn Learning Youtube Learn JavaScript Javascript cheat sheet JavaScript best practices

These websites help you to learn HTML, CSS, and Javascript: General Assembly Dash freeCodeCamp Udemy Bootcamp Khan Academy Don't Fear the Internet Interneting Is Hard educative Tutorial Republic and more...

Package Managers is a system that will manage your project dependencies. Popular Package Managers: Node package manager Yarn

As a front-end developer, you will hear the concept of Responsive web design. You can code it yourself or use built-in libraries such as Bootstrap Tailwind CSS Bulma Chakra UI Material Design Foundation UIkit Milligram Pure Tachyons Materialize Pico Semantic UI

To write concise, readable, and efficient CSS code, you can use Leaner Style Sheets (Less) Syntactically Awesome Style Sheets (SASS) PostCSS CSS Modules styled-components styled-jsx

To use beautiful and awesome fonts on page web, you can use Google fonts Font Squirrel MyFonts dafont Everything Fonts FontGet FontShare

Icons, illustrations, favicons: Font Awesome Bootstrap Icons IconFinder IconDuck Icons8 Tabler Icons Icon Horse App Icon Resizer SVG repo Free SVG flaticon Creative Fabrica Free SVG Designs Free SVG Download freepik Free SVG Cut Files

You need to insert the necessary tags/attributes/schema, optimize page load speed when doing SEO Search engine optimization (SEO) Structured data Lighthouse Web performance optimization (WPO) Markup Validation Service Schema Markup validator Rich Results Test Image compression 1 Image compression 2 WebP Import maps Turbo

Besides traditional Javascript, we also need to learn TypeScript CoffeeScript (Convert Javascript to Coffee: js2.coffee) ES6 JSX

Javascript build tools Webpack esbuild Grunt NPM scripts

Testing your apps with Jest React Testing Library Cypress Enzyme

Server side rendering (SSR) with VueJS Angular React Redux

Generating static websites with Next.js Gatsby

Want to build mobile applications? Try React Native Flutter NativeScript Ionic

Want to build desktop applications? Try Electron Carlo Proton native

Making HTML should be easy, beautiful, and efficient with Haml (HTML abstraction markup language) (Convert HTML/ERB to HAML: awsm-tools Html2Haml ) Handlebars Mustache EJS Jade BlazeJS

To create dummy texts, images and JSON you can use Lorem Ipsum generator Lorem Picsum Fake JSON JSON Placeholder micro-jaymock mockable Hình ảnh miễn phí Unsplash SKUAWK Pexels

Chart tools: Google charts ChartJS Chartist.js Recharts n3-charts ZingChart HighCharts FusionCharts Flot amCharts Emprise Javascript Charts Plotly CanvasJS TOAST UI Chart AnyChart - JS charts

Wireframe Wireframe tools: Pencil Whimsical Sketch Adobe XD FigJam UXPin Freehand justinmind mockplus Axure RP Balsamiq Wireframe.cc

Some useful links: Difference between HTML and HTML5 Client-side form validation Emmet Difference between CSS and CSS3 Cross-Browser Development JavaScript HTML DOM JavaScript Cookies JavaScript Hoisting Fetch API Cross-Origin Resource Sharing (CORS) ESLint EmberJS GraphQL Apollo Graph Platform Prettier StandardJS WebAssembly jQuery Google polymer D3JS PixiJS SWFObject Three.js Velocity.js WinJS Lodash SPA (Single-page application) Underscore REST APIs Filebase HTML Formatter HTML Minifier Remove Image Background AI Background Remover Buttons Generator Beautiful CSS buttons Glassmorphism CSS Generator CSS Layout Generator

Online File Converter for JSON, XML, Excel, PDF, and other formats Conversion Tools Generate HTML, CSS, JSON-LD, Twitter Cards, Open Graph and more with Web Code Tools Build Full-Stack Javascript Apps with Meteor The WAVE allows you to evaluate web content for accessibility issues directly within your browser

Support the development of the website

This website was created to provide useful and free information to the community. To maintain and develop it, we need support from you.

If you find the website valuable, you can contribute any amount, whether it's $1 or $2, to help keep it running. Your contribution will help cover operating costs, maintenance, and content improvement. Every donation is greatly appreciated and will help us grow sustainably.

Thank you sincerely for your support!