Tutorials¶
Standalone, tool-focused tutorials that sit alongside the CSC336/CSC337 lecture chapters — things every developer needs regardless of which course unit you're on. Each one is self-contained, written from beginner to intermediate level, with runnable, copy-pasteable examples.
Available Tutorials¶
| Tutorial | Level | What it covers |
|---|---|---|
| MERN Environment Setup | Beginner | Installing VS Code (and essential extensions), Node.js/npm, nodemon, MongoDB (Atlas or local), and Git/GitHub Desktop |
| Your First HTML + CSS Page | Beginner | Combining HTML structure and CSS (colors, the box model, centering, hover transitions) into one complete, real page |
| Layout Designing with div, span, and Float | Beginner | <div>/<span>, id vs. class, and building a header + nav menu + three-column layout + footer with float, width, and overflow |
| CSS Positioning | Beginner to Intermediate | static/relative/absolute/fixed/sticky, z-index and stacking, and real patterns like tooltips and a centered modal |
| Flexbox Layout | Beginner to Intermediate | display: flex, both axes, flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow/shrink/basis, align-self, and real navbar/centering patterns |
| Multilevel Navigation with Positioning | Intermediate | Building a dropdown menu from scratch: a single-level bar, then a second-level dropdown with relative/absolute, then a guided challenge to add a third-level flyout yourself |
| CSS Transitions and Animations | Beginner to Intermediate | transition properties and timing functions, @keyframes, animation properties, a spinner, a pulsing badge, a fade-in entrance, plus performance and accessibility notes |
| Responsive Web Design | Beginner to Intermediate | The viewport tag, mobile-first design, media queries, responsive units, clamp(), responsive images, and a complete responsive three-card layout |
| Git and GitHub | Beginner to Intermediate | Version control fundamentals, everyday Git commands, branching and merging, undoing mistakes, collaborating on GitHub with forks and pull requests, and GitHub Desktop / GUI alternatives |
| Submitting Coursework via GitHub | Beginner | This course's actual submission workflow: one repository, a required folder structure, and what counts as an on-time, valid submission |
More tutorials will be added here over time.