Day 2
Well, today I was going through my coursework again on Academy and I have learned lots of things in regard to mainly CSS.
I started off going over Pseudo Classes, and these are classes that let me apply an element in relation to other thing's I can use them with. I'm not very good at explaining them right now but this is an example of the type of code I was using to learn about Pseudo classes.
CSS
button:hover {
color: blue; }
What did I learn from this?
What I learned from this particularly is I can combine things I want together in a single line of code, so if I want a button and I want it to have a hover effect when a user hovers over the icon, I can use the hover class.
Checkerboard Exercise, what did I find hard?
One of my assignments in my course was a checkerboard exercise as shown here.
What did I have to do with this?
Well, What I had to do is duplicate what I see in CSS only. I had been given a empty boxes with no colors. I had to use what I had learned by using this code below to solve have this checkerboard colored correctly.
CSS
div:nth-of-type(1n) {background-color:red}
div:nth-of-type(2n) {background-color:black}
At first,I got stuck doing this, I was not sure how exactly I had to sort them to have them colored evenly, or every other box. Once I had realized how to do this I had thought I had luckily solved this problem, but I did not know that red was overridden by the black div-nth type which cancelled out the red in those red boxes, because 1n should be making all the boxes red, but after some confirmation with my developer friends they had confirmed that it does indeed override those previous ones.
Learning what Specificity Is & how it works
After doing the last exercise, I had realized just how specificity works and why it worked in previous assignment. I had learned how things override each other & there is basically a points system in place depending on ID,Classes or Elements, which all rank differently with ID being the highest.
Last part of my day learning about Box models, and width & heights
What did I learn from this?
Well box models where very interesting and a little bit confusing depending on how I wanted things to be setup. I worked on an assignment to create this
I was trying to create proper sizing for this image following these instructions.
The Card div had to have
210px Width
1px Grey border,with solid border style
5px Border radius
center aligned text
The Image had to have
200px wide
5px border with color of rgb(236,183,191) and a solid border style
50% border radius
How did I solve this and what issues did I run into?
Well, at first I was having difficulties with sizing and widths I was getting a huge white border across the whole screen, and I was not sure what I should do.
Here is the HTML Code for Reference
HTML
<div class="card">
<img alt="" src="https://assets.codepen.io/123865/dog.png">
<h1>I Am Dog</h1>
</div>
CSS
div {
width: 210px;
border:1px solid grey;
border-radius:5px;
text-align:center;
}
img{
width:200px;
border: 5px solid rgb(236, 183, 191);
border-radius: 50%;
}
I overall feel like I did well on this, I utilized what I had learned in my previous course on Udemy & basically I just had to learn how to read what it is expected of me and to translate that to code, of course things would not be as simple as this in the real world, I would not expect a client to tell me the exact pixels he would want, or border radius on his website but it does help me understand what these things do & how I can utilize them to change a image to fit the assignment given to me.
Overall Day 2
Overall day 2 went well, I enjoyed it and I do see my self improving ever so slightly, I just cant wait till I can utilize these on my own personal projects just to see how far I can utilize all these things I have been learning onto my own personal project.
Top comments (0)