Responsive Web Design Tutorial with jQuery & JavaScript (Beginner Example)

Publicado em: 08 Janeiro 2015
no canal de: Ghost Telepathy

4,460

responsive web design tutorial, jquery responsive layout, javascript responsive website, css responsive example / in this video, I walk you through the core principles of responsive web design using just HTML, CSS, jQuery, and JavaScript.

We’ll build a simple webpage in JSFiddle and make it responsive by detecting browser width, resizing elements, repositioning logos, and adapting navigation menus.

This is a beginner-friendly responsive design tutorial that covers the basics of resizing layouts, responsive navigation bars, and scaling logos. By the end, you’ll know how to add responsive behavior to your own website without frameworks / just vanilla JavaScript and jQuery.

⏱️ Timestamps:
00:00 – Fast-forward preview of the tutorial
00:11 – Overview: responsive web design basics
01:12 – Creating a simple static webpage in HTML & CSS
02:09 – Centering the page with margins and adding content
03:57 – Adding a footer and building a basic page layout
04:40 – Why static width creates scrollbars (non-responsive)
05:00 – Adding jQuery to JSFiddle for responsiveness
05:59 – Detecting browser width with $(window).width()
06:46 – Using the resize event to adapt layout dynamically
07:09 – Applying if conditions for responsive resizing
08:30 – Setting width to 100% when window 525px
09:34 – Switching back to fixed width on larger screens
10:02 – First responsive test: no more scrollbars
11:05 – Adding multiple breakpoints with extra if statements
12:05 – Example: changing background color below 200px
13:15 – Making logos responsive with IDs and CSS changes
15:01 – Centering and resizing logos for smaller screens
16:02 – Adding navigation menus with ul and li
18:05 – Styling the nav bar (inline, no bullet points)
20:02 – Adjusting nav menu with borders, padding, alignment
21:28 – Creating a resize() function for reusable logic
22:07 – Calling resize on page load with $(document).ready()
23:02 – Using float:left for navigation list items
24:50 – Fixing UL height with CSS to handle floated elements
25:51 – Setting percentage widths for nav items
26:59 – Debugging spacing & margin issues in calculations
29:05 – Centering nav text and applying background styling
30:01 – Making nav bar fully responsive (height change below 500px)
32:00 – Achieving drop-down effect for smaller screens
35:00 – Resizing nav items side-by-side for narrow layouts
37:00 – Adding content styling (padding, font, readability)
38:20 – Final responsive template walkthrough
39:00 – Conclusion: responsive web design with jQuery & JavaScript

🏷️ Tags
responsive web design tutorial,jquery responsive layout,javascript responsive website,css responsive design,html5 responsive example,responsive navbar tutorial,responsive logo resizing jquery,jsfiddle responsive demo,responsive web design basics,responsive website with jquery,learn responsive design javascript,css responsive menu tutorial

Nesta página do site você pode assistir ao vídeo on-line Responsive Web Design Tutorial with jQuery & JavaScript (Beginner Example) duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Ghost Telepathy 08 Janeiro 2015, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 4,460 vezes e gostou 49 espectadores. Boa visualização!