The future of web design is in Responsive Web Design That simply means building one website that can be accessed with any device: desktop, laptop, tablet, cell phone and anything in between.
Web pages built using Responsive Web Design techniques will adjust to each different device width or resolution that visits.
The large picture above will shrink and expand with each device that views it, while those below use a swapping technique via Media Queries that replace the image with a different width of the same image. We used 4 pics whose widths are 300, 250, 225 and 200 pixels.
4 Columns
Beginners will run into problems getting adjacent divisions to line up side by side.
If you can master this concept, you can master the art of building web pages.
Everything you add to a division, margins, padding and borders, adds to its size.
Starting out, don't use borders or box-shadow on adjacent divisions. Get a little experience before you try it!
Even box-shadow on images set to width:100% can cause divisions to misalign.
Easy HTML5
One of the secrets to learning HTML code is to USE AS LITTLE AS POSSIBLE!
You should spend as much time or more learning about CSS (cascading style sheets).
This site will teach beginners the fundamentals needed to create responsive web pages with HTML5 and CSS.
We try to use as little technical jargon as possible, sometimes to a fault.
Start your journey on The Road to Responsive Web Design.
Media Query
Media queries are probably the most important addition to CSS in decades. They are used to make websites responsive, which means they adapt their layout and style settings depending on the viewing size of the device accessing them.
In simpler terms: Media queries let you apply different styles settings based on screen size, resolution, orientation, or other media features.
This is especially useful for improving the appearance of the same web page on phones, tablets, laptops, and big monitors.
Drop Downs
Different types of lists can be nested or placed within each other to create sophisticated hierarchical structures.
Nested lists of anchor tags are used to make Multi Tier Drop Down Menus defined using CSS.
