Web Design + Code 1 · DESN 368
Fall 2026 · Peel Up the Pixels
Brick by brick. Tag by tag. Source-level fluency.
A web page has a visible surface and a structure you can learn to read. In this studio, you will make both. You will build small pages, inspect their source, predict what a change will do, and test your prediction. Your work will grow into one published portfolio.
Course information
| Item | Detail |
|---|---|
| Course | DESN 368 · Web Design + Code 1 |
| Term | Fall 2026, September 23 to December 9 |
| Credits | 5 |
| Prerequisite | DESN 216 |
| Schedule | Monday and Wednesday, 1–3:30 p.m. |
| Location | ISL 156 |
| Quarter board | Milanote |
| Final presentations | Wednesday, December 9, 1–3 p.m. |
| No class | November 11 and November 25 |
| October 28 | Supported asynchronous practice; the instructor is away. |
Instructor
| Item | Detail |
|---|---|
| Professor | Travis Masingale |
| tmasingale@ewu.edu | |
| Office | ISL 107 |
| Office hours | Monday and Wednesday, 3:30 to 5 p.m. Check Canvas for changes. |
| Make an appointment | Schedule via Calendly |
Email is the best way to reach the instructor. Canvas messages work too.
Course description
Catalog description
DESN 368. WEB DESIGN + CODE 1. 5 Credits.
Pre-requisites: DESN 216.
Covers the foundations of web design through coding and design integration. Topics include HTML, CSS, accessibility, and version control using GitHub. Students create responsive websites, explore visual hierarchy and structure, and develop coding fluency through Figma-based design and AI-assisted workflows. Emphasis on building a professional, accessible, and well-organized web presence.
A note from the professor
This course introduces you to the actual craft of building for the web. Not with shortcuts or frameworks, but with fundamental HTML and CSS—understanding how the web actually works at the source level.
You'll develop fluency in reading and writing code, building responsive layouts, and creating interactive experiences. More importantly, you'll learn to think systematically about digital design and develop the problem-solving skills essential for web development.
What you will learn
By the end of 368 you should be able to build and explain a small responsive website using HTML and CSS. You will choose elements by meaning, establish a readable visual hierarchy, use Flexbox and Grid, trace file paths, debug with browser evidence, and publish from GitHub. You will also practice source attribution, keyboard and mobile checks, and concise explanations of design choices.
Why learn code when AI can write it? Because code is a material you need to be able to read. If you cannot read code, you cannot tell whether a model is producing garbage. You cannot direct the model either. HTML and CSS are the design side of the web, the front end of everything seen digitally. You will learn to turn visual designs into code, so that you can do it yourself or direct someone to do it well.
The course introduces the web as a platform. JavaScript, automated agents, backend services, and complex application state are not required to complete these projects. Our 378 re-entry practice describes how these foundations can carry forward.
Learning objectives
Two program learning objectives hold seven course objectives.
PLO-1 · Visual Vocabulary
Achieve fluency in design's visual language.
- Apply Graphic Design Principles to Web Interfaces. Incorporate layout, typography, and color principles into web design projects to build a visually coherent interface a reader can follow.
- Read the Web as a Made Thing. Inspect how pages are built, and explain the choices and tools behind them, including AI assistance, on a platform that keeps changing.
- Design for Accessibility and Inclusivity. Apply WCAG-based practices so pages work for people of diverse abilities: meaningful structure, text alternatives, keyboard access, visible focus, and layouts that reflow.
PLO-2 · Technical Skills
Demonstrate proficiency in relevant design skills.
- Write HTML and CSS by Hand. Write clean, valid, semantic HTML and CSS, and explain and modify any code you submit.
- Implement Responsive Design Principles. Apply responsive design techniques, including media queries, Flexbox, and CSS Grid, so layouts adapt across devices and screen sizes.
- Use Version Control and Browser Tools. Use GitHub to keep one repository, commit changes, and publish a working site, and use browser developer tools to locate a fault, predict a change, and verify the result.
- Direct and Evaluate AI Assistance. Use AI assistance only within the stage an assignment allows, evaluate its output against the source, the browser, and documentation, and explain and revise any code you keep.
Grading breakdown
| Category | Weight |
|---|---|
| Participation and engagement | 20% |
| Weekly assignments | 30% |
| Projects | 40% |
| Final portfolio | 10% |
The four projects are equally weighted within their category. Weekly assignments have different point values. Some are graded complete or incomplete. Category percentages, not the raw total across categories, determine the course grade. Each project is graded once. The final portfolio evaluates how you curate and explain the projects; it does not grade those same projects again. Weekly evidence can reference a project, but evaluates the particular source check rather than repeating its finished-page rubric.
Project evaluation criteria
Each project is evaluated on:
- Technical execution: Code validates and works
- Conceptual understanding: Documentation and comments
- Problem-solving: Handling edge cases and debugging
- Craft and presentation: Attention to detail and polish
Weekly assignments
- Micro-assignments, exercises, and tutorials
- Emphasis on consistent practice and iteration
- Quick-turn feedback cycle
Participation and engagement
- One in-class item every class day, worth 5 points
- Other participation and engagement assignments that are not daily
- The Attendance section below is the policy for the daily item
Final portfolio
- Curated selection of best work
- Reflection on growth and AI collaboration
- Professional presentation on GitHub Pages
Grade scale
| A | B | C | D | F |
|---|---|---|---|---|
| 90–100% | 80–89% | 70–79% | 60–69% | 0–59% |
Detailed criteria appear in the rubrics.
Attendance
Every class day has one Participation and Engagement item. You do it in class. It is worth 5 points. If you are not in class, you do not earn that day's points, and you cannot make it up at home. No days are dropped. Arriving late is fine: come in and join the work. October 28 is asynchronous, and that day's item is done online. If you will miss class, message me before it starts. I cannot return the points, but I can help you catch up.
Absences for reasons of faith or conscience are accommodated, as Washington law requires. Give me the dates in writing during the first two weeks. University-sanctioned events and disability accommodations follow EWU policy. Talk to me early.
Late work
This applies to projects and weekly assignments.
| How late | Penalty |
|---|---|
| Up to 2 weeks | none |
| More than 2 weeks | 20% off |
Late work is accepted until 11:59 p.m. on December 9. Nothing is accepted after that. Work builds on earlier work, so bring what you have and ask for help before it is late.
What the course provides
The course provides five things: time, tools, feedback, other people, and room to fail. Time is studio hours on Monday and Wednesday. The tools are free: GitHub, Figma, CodePen and a browser. Feedback comes from the instructor and from classmates. Other people are the classmates working beside you. Room to fail means your first try can be wrong.
The work
Each studio follows brief → build → source check → concise evidence → delivery check. Required practice usually improves your current project. Optional extensions are for exploration after the core works; they are not hidden grading requirements.
At each of the five project deliveries you tidy your repository. You then write a short look-back in its README. In Week 0 you fill in the ungraded week-0/where-i-am-starting.md. You answer it again at the end of the quarter.
DESN 368 is a 5-credit course. EWU's credit-hour rule expects at least two hours of work outside class each week for every credit, so plan on at least 10 hours a week outside our Monday and Wednesday studios. Tell the instructor when you cannot finish required work by its due date. Bring the smallest working version for help. We will adjust the remaining work based on evidence from the class.
Three places
The course runs in three places.
- The site teaches. The lessons and the learning live there.
- Canvas holds the assignments, the due dates, the submissions, the feedback and the grades.
- GitHub holds your repository, where you make the work and keep it.
Your repository is private: only you and the instructor can open it. You get it by accepting the Workspace assignment. Accepting it copies the instructor's template into the class organization on GitHub. You never fork it. In Week 0 you work in GitHub's own editor in the browser. During the opening half-week and weekend you set up GitHub, the GitHub Student Developer Pack, Figma and CodePen. You do not need a paid subscription.
The story and your place in it
The site has a fictional companion. Its notes carry the label Story. You can skip every Story note and still do every lesson. The companion never says what is due or what earns points. Canvas and the instructor do. It is a character in a story, not software you use.
The Mark as complete button sets a place marker for that lesson. Choosing Next also marks the lesson you are leaving and opens the next one; you can undo that mark if you need to. The Week 0 percentage counts these place markers, not submitted work or mastery. Your browser stores the markers and the companion's name. You can export them as a Learning Passport file and import that file in another browser. Keep it anywhere you like; your repository is one option. Canvas also has an optional weekly Save Point worth 0 points. Your instructor grades the work you submit in Canvas, not the site's markers.
Source fluency and AI
September 23 through the Week 3 check, you write the code yourself.
No AI tool writes, completes or fixes your code in that time. AI autocomplete is off. Class examples, reference documentation and people are all welcome help.
Every source check in the course uses the same four actions.
- Find the relevant source.
- Predict what a change will do.
- Make the change.
- Explain what happened and whether your prediction held.
Three AI-free checks happen in class, in Week 3, Week 6 and Week 9. You know what each check covers beforehand. You may bring notes. At each check you demonstrate the four actions on harder material. The Week 6 check is on Monday, November 2.
If you miss an action, you do a small recovery exercise and another check. Studio work continues meanwhile.
AI help then opens in three stages.
- Teach me opens after the Week 3 check and runs through November 1. You set up GitHub Copilot. It comes with the GitHub Student Developer Pack. You ask it to explain an element, a CSS rule, Grid, or why your code is not working. You do not ask it to fix the code.
- Co-coder opens after the November 2 check and runs through November 15. Copilot may complete code you have started.
- Help building runs from November 16 to the end of the quarter. You may direct AI to help build more complex things, within what an assignment allows.
Any line an AI writes gets the four actions before you keep it.
Account approval is not permission to use AI. Figma's AI features stay off until the class reaches them.
Every student can complete the course without an AI tool. You do not need a paid AI subscription.
AI policy
In this course, students can use AI-based tools (such as ChatGPT and GitHub Copilot) on some assignments. The instructions for each assignment will include information about whether and how you may use AI-based tools to complete the assignment. All sources, including AI tools, must be appropriately cited. The use of AI in ways inconsistent with the parameters above will be considered academic misconduct and subject to investigation.
Please note that AI results can be biased and inaccurate. You are responsible for ensuring that the information you use from AI is accurate. Additionally, pay attention to the privacy of your data. Many AI tools will incorporate and use any content you share, so be careful not to unintentionally share copyrighted materials, original work, or personal information.
Learning how to thoughtfully and strategically use AI-based tools may help you develop your skills, refine your work, and prepare for your future career. If you have any questions about citation or what constitutes academic integrity in this course or at Eastern Washington University, please contact me to discuss your concerns.
Studio responsibilities
Attend and take part in the exercises and critiques. Communicate early when circumstances affect participation. The participation rubric rewards evidence of engagement; quiet, written, and pair contributions can all show that evidence.
Work builds on earlier work. If you will miss a delivery date, contact the instructor and bring your current artifact so that the next step can be agreed. The Late work section above sets the penalty.
Write your own explanations and cite borrowed assets, quotations, tutorials, and permitted AI help. Do not present code you cannot explain as independent work. The assignment's stated AI allowance controls its use. Follow EWU's academic-integrity requirements and use the university's current syllabus statements and student support information linked in Canvas. Contact the instructor privately about accessibility arrangements or barriers to participating; avoid putting personal accommodation information in a public repository.