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 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 PracticesCSS 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 sheetJavaScript 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 practicesThese 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
