Install the following Application

Resources

Visual Studio Application:

https://code.visualstudio.com/

Extension for Visual Studio Code:

*) Prettier

*) auto rename tag

*) Bootstrap 5 & Font Awesome Snippets

*) bootstrap

*) live server

*) open browser

*) beautify

*) bracket pair colorizer

*) indent rainbow

*) css peek

*) intellisense for css classnames

*) php intellisense

*) live sass compiler

*) one dark pro

---------------------------------------

Node Package Manager (NPM)

Npm is a tool to automate the process of installing and upgrading packages of code required to properly run your theme locally – that’s why they’re called dependencies.

https://nodejs.org/en/download/

---------------------------------------

iFrame for sharing Code

Codesandbox.io

https://codesandbox.io

Pastebin:

https://pastebin.com/

Codepen.io

https://codepen.io/

Bootstrap Snippet

https://bbbootstrap.com/tools

---------------------------------------

GitHub.com

Git Bash:

https://git-scm.com/downloads

---------------------------------------

HTML Framework:

1. Bootstrap : https://getbootstrap.com/docs/5.0/getting-started/introduction/ or

https://getbootstrap.com/docs/5.0/examples/cheatsheet/

2. Materializecss : https://materializecss.com/

3. W3.CSS (W3.CSS is free to use. No license is necessary)

Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css

---------------------------------------

XAMPP:

XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.

https://www.apachefriends.org/index.html

---------------------------------------

Composer:

Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.

https://getcomposer.org/download/

---------------------------------------

PHP Framework

---------------------------------------

Preliminary

Images Sources:

Google Icons & Fonts : https://fonts.google.com/icons

unsplash : https://unsplash.com/

pixabay : https://pixabay.com/id/

unDraw : https://undraw.co/illustrations

Bootstrap : https://getbootstrap.com/docs/5.0/extend/icons/

Figma : https://www.figma.com/

Lottiefiles : https://lottiefiles.com/search?q=back+button&category=animations&animations-page=3

Freepik : https://www.freepik.com/

Squoosh Image Converter : https://squoosh.app/

Remove Background : https://www.remove.bg/upload

https://www.resizepixel.com/

https://crop-circle.imageonline.co/

Fonts

1. Metropolis : https://www.fontsquirrel.com/fonts/metropolis

2. Caveat : https://www.fontsquirrel.com/fonts/caveat

3. Calibri : https://www.downloadfonts.io/calibri-font-family-free/

4. Lato : https://www.fontsquirrel.com/fonts/lato

5. Poppins : https://www.fontsquirrel.com/fonts/poppins

6. Arial : https://www.downloadfonts.io/arial-font-family-free/

7. Abel : https://www.fontsquirrel.com/fonts/abel

8. Beyond Infinity : https://www.dafont.com/beyond-infinity.font

9. Montserrat : https://www.fontsquirrel.com/fonts/montserrat

10. Aharoni : https://fontzone.net/font-details/aharoni-bold

11. AG Stencil : https://www.dafont.com/ag-stencil.font

https://www.graphicsfuel.com/2015/01/product-packaging-box-psd-mockup/ OR bit.ly/box-A

bit.ly/spesial-B

Chrome Ads On

https://chrome.google.com/webstore/category/extensions?hl=en-US

1. Buildwith Technology Profiler

2. Paint Tool - Marker for Chrome

3. CSS Peeper

4. Stylebot

5. Kontrast - WCAG Contrast Checker

6. Lighthouse

7. Lipsum Generator

8. Dark Reader

9. Placeholdifier

10. Web Developer

11. Page Ruler

12. Dimensions

13. WhatFont

14. Colorpick Eyedropper

15. CSSviewer

16. Wappalyzer

17. User-Agent Switcher for Google Chrome

18. JSONView

19. Awesome Screenshot: Screen Video Recorder

20. Marmoset

https://iro.nyandev.id/

https://webaim.org/resources/contrastchecker/

https://storyset.com

https://downloader.la/gettyimages-downloader.html

pexels

https://sites.google.com/shb.sch.id/nbawebsite/home

https://www.notebookcast.com/en/board/rwzrjvy1394f9

CSS

<style>

img {

clip-path: ();

}

h1 {

font-family:;

font-size:60px;

background-img: url();

background-attachment: fixed

}

</style>

https://www.freecodecamp.org/

https://bit.ly/roadmapwebsite

https://bit.ly/sharingfileshere

https://www.notebookcast.com/en/board/jkbglkz13052f#

https://ilovecoding.org/pages/resources

3D COVERS

https://drive.google.com/file/d/14BexZMoP1gqvSbLZSfYigjUvfcXkroScK03LS63d/view