Learn to code - 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 SchoolsSoloLearnMozillacodecademyLinkedIn LearningHTML cheat sheetHTML 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 SchoolsSoloLearnWeb.dev by GoogleMozillacodecademyLinkedIn LearningCSS 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 SchoolsSoloLearnThe Modern JavaScript TutorialLinkedIn LearningYoutubeLearn JavaScriptJavascript cheat sheetJavaScript best practicesThese websites help you to learn HTML, CSS, and Javascript:General Assembly DashfreeCodeCampUdemyBootcampKhan AcademyDon't Fear the InternetInterneting Is HardeducativeTutorial Republicand more...
Package Managers is a system that will manage your project dependencies. Popular Package Managers:Node package managerYarn
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 BootstrapTailwind CSSBulmaChakra UIMaterial DesignFoundationUIkitMilligramPureTachyonsMaterializePicoSemantic UI
To write concise, readable, and efficient CSS code, you can use Leaner Style Sheets (Less)Syntactically Awesome Style Sheets (SASS)PostCSSCSS Modulesstyled-componentsstyled-jsx
To use beautiful and awesome fonts on page web, you can use Google fontsFont SquirrelMyFontsdafontEverything FontsFontGetFontShare
Icons, illustrations, favicons: Font AwesomeBootstrap IconsIconFinderIconDuckIcons8Tabler IconsIcon HorseApp Icon ResizerSVG repoFree SVGflaticonCreative FabricaFree SVG DesignsFree SVG DownloadfreepikFree SVG Cut Files
You need to insert the necessary tags/attributes/schema, optimize page load speed when doing SEO Search engine optimization (SEO)Structured dataLighthouseWeb performance optimization (WPO)Markup Validation ServiceSchema Markup validatorRich Results TestImage compression 1Image compression 2WebPImport mapsTurbo
Besides traditional Javascript, we also need to learn TypeScriptCoffeeScript(Convert Javascript to Coffee: js2.coffee) ES6JSX
Javascript build toolsWebpackesbuildGruntNPM scripts
Testing your apps with JestReact Testing LibraryCypressEnzyme
Server side rendering (SSR) with VueJSAngularReactRedux
Generating static websites with Next.jsGatsby
Want to build mobile applications? Try React NativeFlutterNativeScriptIonic
If you find our website useful and want to support us, you can now donate. Donations go directly to our paypal.me/vulehuan account and help us continue to provide quality content.