Front End: HTML/CSS HW #1

All Homework Must be Uploaded to it own GitHub repository. You will copy the URL Link for your GitHub Repository and Submit that link for each of your homework assignments

Greetings!

In this assignment, you will clone my repository from here: https://github.com/brandon-apol/my_github_tutorial

Then, you will update the code, adding an h2 tag with your name in it that says hello.

Finally, you will create your own repo, and add, commit, and push your new updated code to your GitHub repository. If this step is not working well for you, feel free to delete the .git folder from your local cloned copy, then go back from the git init step.

Once completed, commit the project to GitHub and submit the link to the assignment by clicking start quiz.

For more reading and understanding, please glance over (no need to memorize or take notes on) the notion doc below as well as the graphic.

Useful Resources:

https://github.com/brandon-apol/my_github_tutorial

https://www.notion.so/zarkom/Introduction-to-Git-ac396a0697704709a12b6a0e545db049

Image Resources:

Note: You can right click images and press ‘save image as’ to save the image to your computer.

git flowchart

Useful CSS Resources:

Playgrounds for Bootstrap columns, media queries, and grid. Feel free to change the code – it will go back to how I made it when you refresh.

Also, links for extra games/practice for Flexbox (Flexbox Froggy), and a cheat sheet for flexbox that I am sure will prove helpful. If you feel you have a good grip on flexbox, bootstrap containers and columns, and css-grid, feel free to move on.

Zen garden is useful for ideas for web layouts in the future; I also use https://dribbble.com/ and look at web designs on Figma for inspiration.

Bootstrap cheat sheet is best used with the inspector tool, so you can see what classes are being applied to each element.

Bootstrap Columns Codepen

Media Queries Code Pen

Zen Garden

CSS Grid Code Pen

Dribble

Figma

Flexbox Playground Code Pen

Flex Box Froggy

Flex Box Guide

Bootstrap 5.0 Cheatsheet

Skip to content