byron2016 / 020_fm_000

Kevin Powell - Build a responsive website with HTML & CSS

 

070_00_CSharpCompClientServer

 

Project Description

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.  

Technologies used

References

• Kevin Powell tutorial and Github repositories

  • Youtube playlist

  • Build a responsive website with HTML & CSS | Part one: Analyzing the project and setting the stage

    • Code Part 01

  • Build a responsive website with HTML & CSS | Part two: Writing the HTML

    • Code Part 02

  • Build a responsive website with HTML & CSS | Part three: General styling

    • Code Part 03

  • Build a responsive website with HTML & CSS | Part Four: The navigation

    • Code Part 04

  • Build a responsive website with HTML & CSS | Part five: Spacing and stuff

    • Code Part 05

  • Build a responsive website with HTML & CSS | Part six: CTA

    • Code Part 06

  • Build a responsive website with HTML & CSS | Part seven: the footer

    • Code Part 07

  • Build a responsive website with HTML & CSS | Part eight: Numbered list

    • Code Part 08

  • Build a responsive website with HTML & CSS | Part nine: The Slider

    • Code Part 09

  • 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

  • The Frontend Mentor project

• Utilities

  • SVGSprites
  • Tools to convert to .ico
    • ICO converter

Steps

1. DevDependencies:

   • Extensions

     • Sass
     • PostCss
     • Autoprefixer

     npm add -D sass postcss@latest autoprefixer@latest
     

2. 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')
   			}
   			}
   		}
   		}

3. 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