Our personal landing page
Follow these steps to start developing on this repository
Be sure to have Node.js installed before proceeding.
# Clone the repo
git clone https://github.com/ksu-web-dev/acm-sigweb-site.git
cd acm-sigweb-site
npm install
# Compile Sass
npm run css-compile
# Watch Sass for changes (uses nodemon)
npm run watch
# Start local server (uses sirv-cli)
npm run server
# Watches Sass for changes and starts a local server
npm start
For the most straightforward development, open two Terminal tabs to execute npm run server
and npm run watch
at the same time.
Open http://localhost:3000 to see the page in action.
The following npm scripts are available to you in this starter repo. With the exception of npm start
and npm test
, the remaining scripts can be run from your command line with npm run scriptName
.
Remember to Prefix each command with with npm run
. ie. npm run server
Script | Description |
---|---|
server |
Starts a local server (http://localhost:3000) for development |
watch |
Automatically recompiles CSS as it watches the scss directory for changes |
css |
Runs css-compile and css-prefix |
css-compile |
Compiles source Sass into CSS |
css-lint |
Runs Stylelint against source Sass for code quality |
css-prefix |
Runs Autoprefixer on the compiled CSS |
css-purge |
Runs PurgeCSS to remove CSS that is unused by index.html |
test |
Runs css-lint and css , in sequential order |
The following resources can help you to learn about what the code in this Repo means.
- Bootstrap Bootstrap 5.1 Documentation
- HTML Mozilla Developer Network's Guide to HTML
- CSS Mozilla Developer Network's Guide to CSS
- JS Mozilla Developer Network's Guide to JS
- Devdocs An aggreggator of every Documentation resource for web developers
This will lint the website you are on and notify you of any Bootstrap styling errors in your html:
- Create a new bookmark in your browser
- Set the name/title equal to something that is easy to remember. Ex: Run Bootlint
- Set the URL equal to:
javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src="https://stackpath.bootstrapcdn.com/bootlint/latest/bootlint.min.js";document.body.appendChild(s)})();
- Click the button on the website and check the console after you click okay on the prompt and it will tell you about all the errors that were made.
Use this website to check if the HTML in your website is valid:
These Extensions have the ability to greatly improve your workflow!
- HTML CSS Support Completes your html classes for you using intellisense and lints your code as you type
- Live Server Run the website as a local server that refreshes as soon as you save a file
- CSS peek Right click a class to see what the css looks like behind it
- jshint Completes your javascript and lints your code as you type