Responsive design

I decided to refactor media queries to use min-width only instead of the ranges in the tutorial project.

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.

My thoughts on Responsive and Mobile-First

Part VI YouTube Part VI Objectives Create a one column layout for the Work page Use Flexbox for the Contact page Block Quotes Learned about the blockquote element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote For what I have learned previously, Mobile-first responsive design should start from the smallest screen, and then applying styles for larger screens. Traversy started with the desktop version, and then applied styles for the smaller screens. I’d like to improve the usability of this Portfolio project;

CSS Grid Layout

Part V YouTube Part V Objectives Build the about page using a grid layout Create media queries to add responsiveness to small screens Grid Layout This is the first time I learned about the Grid Layout. This is much more simple that what I’ve seen and used before. CSS Grid Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

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.

Introduction to workflow and sass

Part I Objectives Setting up the dev environment Learn about SASS Learn about responsive design YouTube Part I node-sass "scripts": { "sass": "node-sass -w scss/ -o ./dist/css/ --recursive" },

Starting the Course

I just created a new directory locally, and ran git init on it. I will create a subfolder under coursework for each YouTube tutorial.