020_fm_000 is a practice to create a responsibe website with HTLM and CSS, following Youtube Kevin Powell's tutorial Build a responsive website with HTML & CSS and the other help that you can find into Reference section.
-
Kevin Powell tutorial and Github repositories
-
Build a responsive website with HTML & CSS | Part one: Analyzing the project and setting the stage
-
Build a responsive website with HTML & CSS | Part two: Writing the HTML
-
Build a responsive website with HTML & CSS | Part three: General styling
-
Build a responsive website with HTML & CSS | Part Four: The navigation
-
Build a responsive website with HTML & CSS | Part five: Spacing and stuff
-
Build a responsive website with HTML & CSS | Part seven: the footer
-
Build a responsive website with HTML & CSS | Part eight: Numbered list
-
Build a responsive website with HTML & CSS | Part nine: The Slider
-
Build a responsive website with HTML & CSS | Part ten: fixing the nav and adding the blobs
-
Build a responsive website with HTML & CSS | Part 11: Fixing the footer
-
Front Mentor
-
Utilities
-
DevDependencies:
-
Extensions
- Sass
- PostCss
- Autoprefixer
npm add -D sass postcss@latest autoprefixer@latest
-
-
Change foder structure to have a src folder:
- Create next to "package.json" file "vite.config.js"
- Add these code:
npm add -D sass postcss@latest autoprefixer@latest import path from "path"; import glob from "glob"; export default { root: path.join(__dirname, "src"), build: { outDir: path.join(__dirname, "dist"), rollupOptions: { input: glob.sync(path.resolve(__dirname, "src", "*.html")), }, }, }; Or import path from 'path' export default { root: path.resolve(__dirname, 'src'), build: { outDir: path.resolve(__dirname, 'dist'), rollupOptions: { input: { index: path.resolve(__dirname, 'src/index.html'), about: path.resolve(__dirname, 'src/about.html') } } } }
-
Add surge to test build on real web:
- Add surge devDependency to "package.json" file
npm i --save-dev surge
-
Deploy
-
Write deploy directory path.
- D:\xxxx\xxxx\020_fm_000\dist
-
Write domain name to deploy.
- fm020.surge.sh
-
-
Run
npx surge
- Update into same domain
npx surge --domain fm020.surge.sh