For most programmers CSS is a nightmare! I am one who believe this to be true ! When starting a new project I enjoyed every aspect but designing and structure of my webpage. I couldn't come terms with how long it could take me to move one simple image from the the top right of the page to the left bottom.
If you share this belief about CSS and it's difficulties hopefully this blog will help.
first you'll need render some type of element to your DOM whether it be an image, text, or a card. You want to then add a className="(name of your class)" this will be the name you will look for when trying to see where in the element tree your element lies.
Now Lets head over to our elements tab in our browser Dev Tools you can use your selector at the top left to click an element on your page, after clicking your tree should open up to the exact class you were looking for and highlight it .
This is important because if you noticed our image is within a parent div which is controlling how our child element moves along the page. So you can use this tool to find what container you may need to edit to allow you the freedom to edit a specific element.
Resources to help with CSS
- Flex Box Froggy : https://flexboxfroggy.com/
An interactive game which teaches flexbox css
- Css tricks: https://css-tricks.com/ Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.
3.
w3school: https://www.w3schools.com/css/
CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
Top comments (0)