Improving upon the tutorial project

I am going to archive the tutorial project and try to improve some of the designg flaws. Some of the biggest problems with the design are:

• A portfolio site should have the works displayed up front. The user needs to navigate to the portfolio using the burger menu.
• Menu options should be visible The burger menu should be hidden on larger screens, and the menu items should be visible.

Improvements

Footer

I wanted to have the footer on the front page. The large background image allowed scrolling down on the page, which caused the footer to move up. I added overflow: hidden to the background img tag to prevent this.

Responsive Top Navigation

The site is missing a top navigation on larger screen sizes. I am also going to get rid of the gimmicky button animation.

• Template for topnav https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Hero Banner

I want the front page to have a profile picture image with a call-to-action.

• **Template for Hero Image ** https://www.w3schools.com/howto/howto_css_hero_image.asp

Rework Footer

I removed the background, and applied it to the hero banner.

I noticed that my footer section got broken, and no longer stays in place. I found a simple solution:

• How TO - Fixed Footer https://www.w3schools.com/howto/howto_css_fixed_footer.asp

Redundant style definitions

It is difficult to maintain the styles, as there are redundant style definitions according to the tutorial. lg-heading really is just <h1>. I am going to clean up and delete the redundant class.

Mobile First

It is difficult to maintain the tutorial portfolio because the media queries are deductive. I refactored all font styles in the project, starting from the smalles screen size. While doing this, I also made the scss more modular. The tutorial put most code into main.scss and it was growing rather large.