90 Days of Code: Six Lines a Coding
--
Another fun day of coding down.
Once again it’s almost midnight and I just started writing this update. Woo Hoo!
I’m getting incrementally better day by day. I’m staying consistent with getting about 40 solid minutes of video knocked out at night. Add time to actually code and you’re looking at an hour and a half of study. I would love to do more, but that is all my schedule allows for the time being. I don’t think I updated you on my current site progress in a while so check it out below:
As you can see, I’ve evolved a bit from the bland, blocky CV page from earlier blog posts. This one is almost publishable. In today’s lesson we focused on the different types of positioning we can achieve with CSS, expanding on the Display Property, and utilizing Divs more.
CSS Static & Relative Positioning
The order of elements on a screen comes from code. Placement matters
HTML children sit on top of parent elements. For example, Text inside a <div> block
All HTML elements are static by default.
Positions exist as follows:
- Static: Means go along with HTML rules and keep to default flow
- Relative: positions element relative to how it would be if static using top, bottom, left, right declarations.
- Absolute: positions element relative to its parent element. Not static position
- Fixed: fixes element to a defined position on the screen. Does not change on scroll.
Things to note:
Relative positioning doesn’t affect position of anything else on screen
Absolute positioning virtually deletes the element from page layout to move freely. For example:
.top-element{
position: absolute;
right: 300px;
top: 50px;
}
The Art of Centering CSS
- The easiest way to center elements is through the text-align property
- Text-align has to be set inside a parent container. I.e.
body{
margin: 0;
text-align: center;
}
- When centering on the elements themselves, use margin: auto to align center
- Ex. Margin: 0, auto, 0, auto;
These are just a couple of rough notes from today. I definitely dive way deeper than this during the lessons. But like I said, the language is getting easier to understand and my new website is starting to come together. I’ll keep you posted on my progress no matter how small. Be sure to check back here every day for a new update! Let me get one more woo hoo for the road.
Woo Hoo!
