So I hit a gridlock with the creating of my webpage
Reference: https://codepen.io/nonowrites/full/mdVQBba
Problem one: The navigation bar
So I tried aligning the list items in my navigation bar with
display: gridit ended up overlapping with the background image. So I reverted to setting it to
display:block.
header nav ul li {
display:inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
The second task was centralising my menu bottoms. Ordinarily, I would have tried this
align-text: center;
Since my header's width is already set to 100%
But this worked instead (don't know how):
header nav ul {
display:block;
margin: 0 auto;
width: fit-content
Maybe someone can explain this part to me. From my FreeCodeCamp tutorial I have learnt basically two display types flex and grid. I am learning about other types like inline-grid and likes. I think I will have to deepen my knowledge, at least to a point where I don't have to run to @penderis like a little scared boy with all my CSS problems.
My major struggle today was resizing the social media icons on my webpage
HTML:
CSS:
.social-media {
width: 60px;
float: right;
}
.social-media img {
width: 200px;
margin-bottom: 10px;
}
This is the part that gets me confused. So in my footer, there are two containers and i am floating both in two different directions, one to the right and the other to the left. Now for some reason, the image is too tiny to scale and they won't move to the position i want. I tried rescaling them with unique IDs but that did not work the way i wanted it too. So i am on a break now trying to figure out if i have sense or not.
PATIENCE
I just started learning CSS two weeks ago and some of the things i have tried to do are outside the scope of what I have learnt. There is no possible way i can fully grasp everything about CSS in two weeks. I am no God. Rather than feeling stupid i should be kind to myself and learn to work with patience. So i left my pc to write this post and possibly talk to the woman who loves me for some motivation. It's been 5hours trying to wrap my head around this thing. I want to start learning javascript next week as I practise and I learn more about CSS. I am supposed to learn a CSS framework like bootstrap but javascript comes before that in my course outline.
Php is one of the languages i intent to learn but yesterday, i was watching a video about PHP and why most people don't like PHP and why i shouldn't learn PHP. I am still new in this space so i don't know too much but i am trying to gather as much information as possible so i don't spend productive hours learning rubbish. I am more interested in backend stuff. I have gone through the basics of python and object-oriented programming. In fact, i was going to practise building a website with python using Django until i got lost in the source and decided to learn some frontend stuff.
I am not planning on learning everything but enough to get me a junior developer role in 12roles. Too lofty? Maybe.
Anyways that's all for my rant now. Cheers
Update:
That was the problem all along. 🤧🤧🤧🤧🤧