15. Playing around with GitHub and Media Queries (Day 11)

Happy Friday!

I am slightly happy with my study today - spent 3 hours practicing a few things like GitHub commits, building a sample HTML page with a focus on responsive design, flex, and Media Queries, and finally attempting a coding challenge.

GitHub

Honestly, I am beginning to love the exercise of GitHub commits! These are the 3 main command line prompts I've been using to push my code from VS Code to GitHub.

git init
git add filename
git commit -m "an action name"
git branch -M main
git remote add origin the-SSH-value
git push - u origin main
git status
git log
git diff

If you want to know more about the above, these cheat sheets can help you:

• https://education.github.com/git-cheat-sheet-education.pdf

• https://about.gitlab.com/images/press/git-cheat-sheet.pdf

• https://www.atlassian.com/git/tutorials/atlassian-git-cheatsheet

Show-off time:

• A recipe page I created: https://github.com/emanoj1/recipe-page-ca

Media Queries

This is used in CSS, and we've been told by the tutor to really understand this technique for styling websites across various screen sizes (desktop, tablet, mobile, etc).

With Media Queries, you can check things like the dimensions of the device, the viewport dimensions, and orientations (portrait, landscape), and then get the contents of the site to behave in a particular way.

For example:

@media screen and (min-width:1000px) {
    body {
        background-color: thistle;
    }

In the above code, we are telling the site to change its background color (originally grey) to thistle color if the minimum width exceeds 1000 px.

I can use the above formula for text also, where the color of the text changes for different screen sizes.

Time to hit the sack. It's 10:15 p.m., and I have 4 hours of class tomorrow!