Like a normal html/css/js each file can be edited as you like. When switching from one page to another while editing the file - For example if you open the index.html
file in your browser to see how it looks and then click on the About Us section it would not work. To test how it would be when in production i.e. the final website here are the steps -
- Ensure you have
NodeJs
installed on your local machine. If you are installing this for the first time please look at nvm to install it. - Open your terminal and run this command
npm i -g http-server
- Once installed open your terminal in the directory of your
index.html
file - Run
http-server --cors
. The cors option allows Cross Origin Resource Sharing. Open your website at your localhost now and you are all set!
After installing and running http-server
if you wish for a hot reload function there exists an elegant solution for that too!
- Run the following command -
npm i -g nodemon
- Now once this is installed run this command -
nodemon `which http-server` --cors -e html,js,css
. This would would hot reload the http-server anytime it detects changes in an.html
,.js
or a.css
file.
Caveat - Only the server hot-reloads you will still have to reload the website on your browser to see the changes.
You are all set to develop this website!
- Crop Photos (Keep image dimensions 851px x 851px) - This should be used to crop images for the team section.
- Free Compress - Compress images incase the images are heavy. If you use heavy images the loading time for them will be more.
- Cloudinary - Use the free Cloudinary plan to host all your images. This greatly improves loading time for the images.
Anjan Nair | Gaurav Konde |
---|---|