Lesson 4.5: CSS Layout

This assignment will teach you the following:

Instructions

Merge your pull request from the previous lesson (if you haven't already):

Checkout your main branch and pull changes:

git checkout main
git pull

Create a new local branch to work on separate from the main branch:

git checkout -b lesson-4-5

Now, open the project directory in your code editor and continue to the next section.

For this assignment, you will be transforming your webpage with a more robust grid layout.

Add a navigational header to your webpage
- The navigation menu should include a link to each of your sections (i.e. "About", "Experience", etc.)
- (Optional Stretch Goal) Make the header sticky/fixed on the page
Change the layout of your "Experience" section using rows and columns so items are displayed in a grid rather than a list
- Hint: use either Flexbox or CSS Grid
Update the "Leave a Message" form to use Flexbox or CSS Grid
Use Media Queries to make sure the webpage is responsive for all device sizes (mobile, tablet, desktop, etc.) Note: You can use mobile-first or desktop-first process, but whichever you choose, be sure to properly write your media queries and make some change in at least one element for each of the three device sizes

This is the basic rubric, but we encourage you to think beyond this list and come up with your own ideas to make your webpage unique!

Check the status of your local repository to double-check the changes you made:

git status

Stage the file(s) that you edited:

git add .

Check the status again and notice that the changes from before are now staged:

git status

Create a commit for the changes you made and add a message describing the changes you made:

Note: Replace <message> with your message

git commit -m "<message>"

Push your commit to the remote repository (visible in GitHub):

git push

Check the log to make sure your commit has been published:

git log --oneline

Create a pull request and submit: