I have been learning html/css and a little bit of bootstrap via FCC, udemy web dev with colt steel, and codecademy. My question is: as i start practicing and creating new projects, should i focus on trying to use only css to get a better mastery of it or should I use bootstrap to become more proficient with it as I go along?
I think they’re both useful and are not mutually exclusive. I would go ahead and learn Bootstrap and in the mean time pick up a book an CSS and slowly work through it. People tend to forget about CSS because it’s not “sexy”, but mastery of it will save you a lot of headaches.
It would depend on the urgency. If you have a project you need to complete in a short period of time and money is on the line, bootstrap is your best option. However, if you have time then I would do my very best to understand CSS. The better you understand CSS, the better you’ll understand bootstrap.
Do both. Actually, do three things. First, build your project with CSS. Then build it with SCSS. Then build it with Bootstrap.
Building the same thing three times with three different tools will give good insights into why the tools exist in the first place. Writing plain CSS is a monumental pain in the ass after you start using Sass.
You will appreciate CSS frameworks, like Bootstrap, much more after you’ve gone through the process of building your own responsive grid.
In general, I don’t think you need to “master” CSS unless you want to be HTML/CSS specialist. You probably do need to have a firm enough grasp of CSS that you can build all the standard website components (nav, footer, button, blockquote, teaser, forms, etc.). But I don’t think you need to be a Key Frame wonk before you start learning Bootstrap.
I would say get comfortable with CSS. Understand the block model, the cascade, and specificity. Learn how to position content, how to clear floats, how to use media queries, how to debug CSS using Chrome dev tools. Learn how to use Flexbox. Learn how to use transitions.
Once you have a solid understanding of vanilla CSS, learn SCSS. You could learn LESS, too - but SCSS is more valuable.
After SCSS, it probably makes sense to learn a CSS framework. Bootstrap is a good choice. But there are plenty of other options that are used instead of Bootstrap (e.g. Bourbon Neat or Lost Grid) because they don’t come with all the overhead that Bootstrap carries.
After learning a CSS framework, well, then it really depends on your interest. If you’re interested in animation you could get into Key Frames. If you don’t think any of the existing frameworks fit your use case, roll your own and open source it. Want to use the tools the “cool kids” are using learn how to configure Post CSS set up CSS Next
Just don’t get caught in the trap of trying to memorize every property and every detail. That’s counterproductive and it’s likely impossible. Build up your taxonomy of bookmarks to CSS references and use them liberally.
Ah, I totally forgot about CSS methodologies! OOCSS, SMACSS, BEM are popular. I use BEM and I love it. Pick one that makes intuitive sense to you and use it, often. I guarantee you won’t regret it.
The repsonders here are steering you in the right direction. It would be best to know both.
Let’s not forget that Bootstrap and SCSS are really just CSS, they have already done some of the hard work and tackled some common applications for you.
The answer to your question was brought up earlier, speed and re-use (which is again speed). Stay DRY (Don’t Repeat Yourself) and keep moving. In order to not code similar things or repeat yourself so your time is maximized on project / site generation. If you need it fast, let the framework or library help you (someone has already done some of the heavy lifting). If not, build it yourself.
Coding a GUI, Application, or Web project is interesting in the fact that a project that looks and acts the same can be done in many different ways, by many different people. Only those that did the code know what is in the “black box” or under the hood. The user just cares if it works and meets expectations on speed, aesthetics, accuracy.
There is likely no substitute for a fair amount of CSS knowledge, you will want to change and over-ride what is in the framework (libraries) at some point with . . . . CSS.
Such good advices, thanks!