for my projects I use either parceljs or vite
Make sure you have nodejs installed. If you never worked with nodejs before then go watch some youtube tutorials.
- download the depedencies with:
npm -i
- start server (the code depends on the tool I use, just check the 'scripts' in package.json of each project):
npm run start or npm run dev
something like this should appear in the terminal, click on the http* link:
Server running at http://localhost:1234
✨ Built in 4ms
(optional) compile scss & optimize the files for deployment or whatever reason, this code will minify the css and js files, set a hash on the files etc.
npm run build
The projects are hosted online for free on netlify. It will last approximately for 3 months
-
recipe-page-main: https://recipe-page-tn.netlify.app/
-
blog-preview-card-main: https://tn-blog-preview-card-main.netlify.app/
-
space-tourism-website-main: https://master--frontendmentor-spacetourism.netlify.app/
-
socila-links-profile-main: https://profil-links.netlify.app/
-
product-preview-card-component-main: https://cardcomponent-main.netlify.app/
-
Write clean and well-structured SCSS without many repetitions for better maintainability
-
Use BEM methodology
-
Use images with the correct dimensions & type to ensure optimal performance and avoid unnecessary scaling.
-
Implement best practices for achieving a strong website performance, including techniques like image optimization, code minification, font preload, SVG Sprites etc.
-
Evaluate and identify the best tools, plugins, and workflow setup to maximize efficiency and productivity. Tools, plugins, approaches & methodology I am currently using/learning/testing:
- CSS / SCSS - Kevin Powell
- CSS & Js - Kyle
- Animations, CSS, JS - Jhey
- Animations, CSS, JS - Hyperplex