Can I make a full responsive webpage using just HTML and CSS and how? If there's no way, what should I learn for responsive web design?

Answer 1

Absolutely!

First: There are a lot of frameworks and tools that developers use to help make their webpages responsive, because these tools enforce consistency in your code and usually handle applying the various properties needed to support older browsers, normalize behavior from one browser to the next, and ensure things remain as accessible as possible, among other nifty benefits. JavaScript is also heavily used to cut down on manual work and to keep code easily changeable and manageable as projects grow larger.

That said, at the end of the day, the browser needs to work with the DOM (document object model— this tells the browser what to draw) and CSSOM (CSS object model— this tells the browser how to draw it), which come from plain old HTML and CSS.

In the interest of keeping this succinct, we can say that everything on a webpage is created from HTML and CSS, and as developers, we’ve really just created a million different ways to generate that HTML and CSS.

So, the good news is that yes, you can do this with just HTML and CSS. The better news is that creating responsive webpages entirely from scratch is significantly simpler than it used to be.

There are a few things that are very beneficial to learn about before or while you’re coding; I hope this list helps you get started!

Pretty much required for responsive web:

1. Base understanding of HTML elements and layout (you can google “HTML box model” for more in-depth reading about this). This includes understanding that one HTML element can contain anywhere from zero to unlimited other child elements (each element is like a little box that you can put other things into), and you can manipulate the space outside of an element using margin, and inside of it using padding. The more you know about the box model, the more you can use it to your advantage.
2. Know how to style HTML with CSS (using IDs and classes in your HTML, and using CSS selectors and properties to apply styling to it)
3. Understand how to use CSS media queries. These tell the browser to use different styles on different types of screens or devices. For example, we can use the media query `@media (min-width: 768px)` to declare that a block of CSS should only be applied if the browser window is at least 768px wide, and ignored if it is smaller than that.

Not required, but will save you tons of time and potential headaches:

1. Use CSS3’s flexbox layout properties. These can help you create complex responsive layouts in a few lines of CSS instead of dozens. A good intro is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. Knowing a little JavaScript is very helpful for adding/removing classes and elements, and many other things, as you can use it to respond to mouse/touch events, react to a window resize event, etc. However, unless you need to display dynamically loaded content without refreshing the page, you can get by without it.

Happy coding!