LAB ACTIVITY 2D Duration: 1 Hour Responsive Verification

Testing & Optimising Responsive Layouts

Students will perform responsive testing on their Bootstrap portfolio using Chrome/Edge/Firefox DevTools. Focus: breakpoints (lg/md/sm), responsive utilities (d-none, d-md-block), and minor optimisation for mobile readability.

Back to Topic Jump to Steps

Sample Output (View First)

This lab is about testing & optimisation. View the completed output first so you know what “correct” looks like across devices.
View Completed Output Start Steps
Tip: Open the sample output and resize the browser window / use device toolbar in DevTools to observe the layout changes.

Important Notes

Read First
Reminder:
Lab ini bukan bina portfolio dari kosong. Ini lab untuk audit dan optimise responsif. Make sure semua testing guna DevTools (desktop/tablet/mobile).
  • Gunakan strategi Triple Breakpoint: Desktop (lg), Tablet (md), Mobile (sm/xs).
  • Guna Display Utilities untuk sembunyikan elemen “non-essential” di mobile: d-none d-md-block.
  • Pastikan alignment ikut device: contoh text-center text-md-start.

Learning Outcomes (CLO)

  • Construct responsive layouts using Bootstrap display and spacing utilities (Syllabus 2.4).
  • Verify layout behaviour across screen breakpoints (Syllabus 2.4.2).
  • Analyse and fix responsiveness issues for Desktop, Tablet and Mobile views (Syllabus 2.4.3).

Tools Needed

  • Browser: Chrome / Edge / Firefox
  • DevTools: Responsive / Device Toolbar
  • Bootstrap 5 (CDN) from previous lab

Steps (Testing + Optimisation)

Buat ikut turutan. Setiap step ada Hint button (reference only).
Step 1

Triple Breakpoint Strategy (Update Column Classes)

Task: Update the main row columns to support 3 views:
  • Desktop (lg): 8 (main) | 4 (sidebar)
  • Tablet (md): 7 (main) | 5 (sidebar)
  • Mobile (sm/xs): 12 (stacked)
Checkpoint: Resize browser → Desktop & Tablet still side-by-side; Mobile stack bawah.
Step 2

Responsive Visibility (Hide Non-essential on Mobile)

Task: Hide secondary/extra text on mobile to improve UX. Example: a small “tip” line only appears on tablet & above:
  • Use d-none d-md-block for tablet+ only.
Checkpoint: On mobile, the extra line disappears. On tablet/desktop, it appears.
Step 3

Desktop View Test (> 992px)

Do this in DevTools:
  • Set width > 992px (Desktop)
  • Verify sidebar is pinned to the right (still side-by-side).
  • Ensure header text aligns left on desktop: text-center text-md-start + (optional) text-lg-start
Checkpoint: Desktop view looks “professional” and not centred awkwardly.
Step 4

Tablet View Test (768px – 991px)

Do this in DevTools:
  • Set width between 768px–991px (Tablet)
  • Verify main/sidebar still side-by-side with ratio 7:5.
  • Check table readability: should remain readable (no ugly overflow).
Checkpoint: Table stays inside card/container and does not break layout.
Step 5

Mobile View Test (< 767px)

Do this in DevTools:
  • Set width < 767px (Mobile)
  • Verify sidebar drops below main content (stacked).
  • Optimise header: use text-center text-md-start (centre on mobile, left from md+).
Checkpoint: Mobile view looks balanced (header centred, content easy to scroll).
Step 6

Fill the Responsive Audit Table (Verification)

Task: Based on your output, fill the table below (screenshot later).
Device Category Screen Width (px) Grid Behaviour Observation
Desktop > 1200px Side-by-Side (8:4) ________________________
Tablet 768px – 991px Side-by-Side (7:5) ________________________
Mobile < 576px Stacked (12:12) ________________________
Checkpoint: Table lengkap (tulis observation ringkas: contoh “sidebar moved below”, “header centred”, “table readable”).
Final Step

Submission

  • Screenshot Collage: Desktop + Tablet + Mobile side-by-side (one image).
  • Code Snippet Screenshot: show the column classes for the tablet-specific layout.
Upload screenshots to CIDOS (submit to your respective lecturer).
Submit before the deadline set by your lecturer.