Tutorials References Exercises VideosMenu
Free WebsiteGet CertifiedPro

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS ColorsCSS BackgroundsCSS BordersCSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS OutlineCSS TextCSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS GradientsCSS ShadowsCSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS VariablesCSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox

CSS Responsive

RWD IntroRWD ViewportRWD Grid ViewRWD Media QueriesRWD ImagesRWD VideosRWD FrameworksRWD Templates

CSS Grid

Grid IntroGrid ContainerGrid Item


SASS Tutorial

CSS Examples

CSS TemplatesCSS ExamplesCSS SnippetsCSS QuizCSS ExercisesCSS Certificate

CSS References

CSS ReferenceCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Browser Support

Responsive Web Design - Introduction

What is Responsive Web Design?

Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Responsive web design is not a program or a JavaScript.

Designing For The Best Experience For All Users

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:




It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Don't worry if you don't understand the example below, we will break down the code, step-by-step, in the next chapters: