Ensure you have the sample project topseed-helloworld open in VS Code and Prepros running on it. Per Lab 1, make sure the home page is running in a browser.
Visit and browse these sites: http://materialpalette.com, https://design.google, https://material.io and https://material.io/guidelines/#. We follow Material Design guidelines, put forward by Google, to make our sites and mobile apps look better.
Find '/_sass/main.css' in the home page source, and inspect it. Other than fonts, all CSS used on the site is in this one CSS.
Visit https://www.muicss.com. Read 'Getting Started/Introduction', then browse the section 'CSS/JS'. We use the MUI CSS libraries in our project. Inspect /public/_sass/_base.scss. SCSS is CSS with some added features, such as $variables and @import. You can turn any CSS file into SCSS just by changing the ending to .scss.
Inspect /public/_sass/_colors.scss. See a color scheme we generated with materialpalette.com. Use /* */ to comment it out. Go back to http://materialpalette.com, pick two colors, download your own palette in CSS format and paste it after the section you commented out. Save, refresh the browser; you should see your new color scheme applied to the site. Revert to the palette you had commented out.
Inspect /public/_sass/main.sass. SASS uses a special syntax without the curly braces or ';' at the end of a line that are used in CSS (and SCSS). SASS can also use SCSS imports such as @import '_base'. Prepros compiles the .sass and its dependent .scss imports into the single main.css used in the browser. In Prepros Files select _main.sass, check 'Minify CSS', and click Process File. Open /_sass/main.css and see that it is now minified.
Inspect /page/two/_buttons.html. Copy the entire HTML. Go to http://html2jade.org (Pug used to be called Jade) and paste this html. In the right pane you see Pug markup, a way to write html without having to worry about closing tags. We write Pug.
Inspect the code snippet at /page/two/_buttons.pug. It should match the output of html2jade. Every .pug file in the project has a corresponding .html used by the browser, with the exception of include's within another .pug file. Inspect /page/two/index.pug to find the 'include _buttons'. Inspect /page/two/index.html to find the generated buttons HTML.
Watch the video 'Do you Even JADE bro' at https://www.youtube.com/watch?v=wzAWI9h3q18. Once you know how to write Pug, you can generate beautiful HTML quickly.