Responsive Portfolio Website Part II & III & IV

Part II

YouTube Part II

Objectives

• Create the homepage HTML markup
• Create the core Sass/CSS for the project
• Use Sass variables, nesting, mixins and includes, and import partials

I finished working on the main page of the portfolio project. I have done similar tutorials in the past, nothing surprises me here.

I played around with some color tools online, changed the fonts, etc. I used my own variable naming for the colors in the _config.scssfile.

Some useful tools I used

• Image resizer https://www.shutterstock.com/image-resizer
• Website color generator http://colormind.io/bootstrap/

Part III

YouTube Part III

Objectives

• Apply CSS transforms to the menu button (open/close)
• Add JavaScript code to handle handle the menu button click event

CSS Transforms

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform
• CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp

Part IV

YouTube Part IV

Objectives

• Add media query SASS mixins to make the site responsive

CSS Transforms

To slide the menu open:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform

I created some original art for my site.

• Generated the portrait picture from my own photo using AI Gahaku