I am currently learning HTML & CSS - to which I have grasped a strong understanding of the basics, but I am struggling with positioning and layouts (something I can’t get my head around).
Through freeCodeCamp - I am beginning to use Bootstrap and I have a few thoughts and issues I would like to address, and have your thoughts and opinions on them:
Should I fully learn how to use HTML & CSS before using a framework like Bootstrap? as I am under the understanding that a lot of the styling and positioning of elements is already “pre-styled” through the use of Bootstrap and this way I am not learning how to properly style and position things.
Also, can anyone advise me of a standard practice to achieve a responsive design. I have seen things like flex box, media-queries and of course Bootstrap, and this has me confused as to which direction I should learn towards.
Additonally, if anyone can point me toward some learning materials I would be very grateful.
I am of course still progressing through the FCC course, but I am not sure if using Bootstrap is limiting my knowledge of CSS.
I hope what I have said has made sense, and you can address my issues clearly.
This is somewhat debatable, people have different opinions, but I would say yes, that would be beneficial. I mean, there is nothing wrong with using Bootstrap in your first few projects, but you should learn plain CSS at some point. I’d say sooner the better.
No. You should get to learning how to program, and then circle back to HTML and CSS.
You have a lot to learn still, and you’re delaying the stuff that really matters. When you build projects, you’ll find yourself learning all the CSS and HTML you need.
I recommend DevTips from YouTube, in particular his CSS videos.
Even though he uses SASS for CSS you can still learn a lot of cool tricks from his videos. I personally learned how to use @keyframes to create custom animations from watching one of his videos.
Standard practice for responsive design? I’m not a professional at this but I would say using the viewport meta tag in your HTML and not using px - instead, use em, vw, vh, %. Play around with it in codepen to see how it works.
For positioning, understand the difference between absolute and relative, inline and inline-block. For easy horizontal centering inside a div, use “margin: 0 auto” along with “position: relative”. Realize that there’s more than one way to get the same effect.
Funny enough I was about to post a very similar post. I have been doing the FCC for about 3 weeks and I also seem to have hit a wall when I see other people projects. I am not happy with mine and feel stuck.
By reading your topic I come to understand that this is probably ok.
Again, from comparing our very similar experiences I would say: we are stuck? Then chances are there is a new technology out there we know nothing about/an element.
So the conclusion I came to reach is, when you hit a wall with your project/a partciular element, stop it, learn new things and get back to it.