I’v noticed where i am stuck at. I am really good at HTML5 and CSS3 but i am having a problem which i have noticed
i am stuck at using diferent CSS frameworks like Bootstrap or Zurb Foundation. I couldn’t find a tutorial on how to build a complex website using HTML, CSS and Javascript in order to create a custom code website so no framework at all… this is where i get stuck… when creating a custom site without a framework… for responsive websites and developing the complete website… is there any tutorial or course or ANY tips how i can OVERCOME this way of thinking? Does anybody knows a good tutorial… or course… where i can teach this?
I only need to understand how to build a responsive website “I do know how to create min and max media queries” but how to create costum COLUMN widths using percetanges…
So it sounds like you have been using frameworks for RWD and now you are hoping to learn to do it on your own without them? If so, I’d encourage you to read a few resources on Responsive Web Design. You could Google and get a bunch, but here’s a good starting point:
Learning the basics of how to RWD will help you not only to develop without frameworks, but also might help you to decide for yourself in a more informed way when you think one is appropriate and when it is not - when it is too bloated vs the time it will save you to use it.
Yea thats right… i am totally not a noob i don’t need to know how paragraphs, line heights, fonts etc etc work… i know everything. But only the responsive web design… is what i need to understand.
Btw… does this includes responsive custom COLUMN widths for each window size? for example on mobile a column should be stacked with a width of 100% and on ipad oriented 50%… i guess you understand where i am going? So for a regular deskop min-width of 1200px… and higher it should be 33.33%+ times 4 for 100%…
To be honest, you should read the Foundation/Bootstrap CSS files and see how they do responsive design.
I most certainly do not recmomend you follow that approach, but see if you can understand the CSS in there. THe “basics” of RWD is there. It’s up to you to optimize it.
Using % as widths takes care of most cases. At some point the screen is too narrow for columns, so add a media query breakpoint there, so a float: left; width: 30%; may become float: none; width: 100%; if using floats for sidebars. Or you may go down the flexbox route for multi columns, so you may switch flex-direction: row; to flex-direction: column;
The best thing you can do is set up a test site and play play play. Set yourself small challenges like making a responsive 2 column grid, then a 3 column and so on. Make mistakes as you go, learn how you correct them and you should start learning on no time.
