Dick & Bruce
Dick & Bruce
Student — Dick
Teacher — Bruce
Class
Web Design & Development
This course introduces students to essential techniques and concepts of web design, focusing on how visual graphics and layout contribute to user experience. Students will examine historical and emerging trends in web design, while producing original websites and digital media work. The course will include front-end skills such as designing icons, responsive layouts, and typography as well as essential development skills like HTML, CSS, and a general understanding of web protocols. Accessibility standards, multi-language audiences, and other vital aspects of online culture will be discussed to help students create flexible and modern web projects.
Project: Personal Landing Page
Phase 1 — Exercise
Dick's Submission
Dick — Runaway from the Big Top, Currently Debugging Life 🎪💻
(Prof. Diaz — I went a little overboard on this one, lol. Let me know if I should trim it down before we move to the build phase! Also tell me if my heading hierarchy is wrong, I always second-guess my h2s vs h3s 😅)
Hero Section
Hi, I'm Dick. I build things on the internet, I used to build things under a tent, and honestly the skill overlap is bigger than you'd think. Welcome to my little corner of the web — pull up a chair, or a folding stool, whichever you brought.
About Me
I grew up in a traveling circus. Not the sanitized, Instagram-aesthetic kind — the real one, with grease paint, generator smell, and a found family of aerialists, clowns, and one very grumpy ringmaster who taught me everything I know about showmanship (and also how to fix a hydraulic rig at 2am, which honestly comes in handy more than you'd expect in web dev — everything is duct tape and hope until it isn't).
I never had a "hometown." I had a route. So when people ask where I'm from, I usually just say "wherever the truck stopped last." 🎪
Somewhere between the trapeze rigging and the ticket booth, I fell in love with computers — specifically, the way code lets you build something out of literally nothing, kind of like how we used to build a whole show out of a tent, some rope, and pure nerve. Front-end development scratched an itch I didn't know I had: it's tactile, it's visual, it rewards doing over reading about doing. I don't really learn from a textbook — I learn by breaking things and rebuilding them until they work. Ask me how many times I've refactored this exact page already (four, and it's not even live yet).
What I Do
I'm a front-end-leaning full-stack hobbyist (aspiring professional, let's be honest) who cares a lot about:
- Accessibility — because a website that only works for some people isn't actually done. Alt text, ARIA labels, keyboard navigation, color contrast — non-negotiable, not an afterthought.
- Responsive design — everyone deserves a good experience whether they're on a five-year-old phone or a giant monitor. The web should not have a velvet rope.
- Semantic HTML —
<header>,<nav>,<main>,<footer>are your friends, please use them, I will fight for this. - Clean, readable typography — because squinting at 12px gray text on white is a human rights issue.
Current Skill Stack
HTML5 · CSS3 (Flexbox & Grid, obviously) · JavaScript · a healthy respect for browser dev tools · learning React because everyone keeps telling me to
Projects & Things I'm Proud Of
- Circus Archive Project — a digital scrapbook site I'm slowly building to preserve photos, posters, and stories from the traveling shows I grew up in before that history disappears. (Still in progress — currently fighting with a CSS grid that refuses to cooperate.)
- This very website — built, rebuilt, and over-engineered as a learning exercise, and also just because I like doing things properly the first time. Mostly.
- A responsive icon set I hand-designed for a mock nonprofit site, because I wanted practice with SVGs and also because vector graphics are extremely satisfying to make.
Professor Bruce's Feedback
I am unmoved by whimsy dressed up as portfolio copy. Let us proceed methodically, since sentiment will not be rendered here — only assessment.
First, the header. Two emojis in a single line of text, followed by a note addressed to a "Prof. Diaz." I am not Prof. Diaz. I do not know who Prof. Diaz is, nor do I care to. This tells me the document was either recycled from another course with contemptuous haste, or generated by some machine indifferent to the actual audience it addresses. Either explanation is disqualifying. I am a professor who reads carefully; I expect to be addressed by someone who has done the same courtesy in return.
On the matter of emojis generally: this is a course in web design, not carnival signage. A circus tent, I am told, is held up by rigging and nerve — your prose, by contrast, is held up by decorative punctuation standing in for actual craft. Strike every emoji. They do not communicate structure, they do not communicate hierarchy, they communicate an unwillingness to trust your own sentences.
On heading hierarchy — you asked, so I will answer, mercilessly: your instinct to second-guess yourself is correct, because your document has no governing logic. "Hero Section," "About Me," "What I Do" are all functioning as H2s, which is proper, but "Current Skill Stack" demoted to H3 beneath "What I Do" makes sense only if "What I Do" is conceptually a parent — and it is not, structurally, it is a sibling to "About Me." Decide what the page's skeleton actually communicates about you before you decide which words get boldest treatment. Structure is not decoration. It is an argument about what matters most. Right now your argument is incoherent.
On content: the circus material is the only portion of this submission with a pulse, and even that is buried beneath the true offense of this piece — its self-congratulatory tone. "I like doing things properly the first time. Mostly." Mm. I am not interested in your charm. I am interested in whether the reader — a hiring manager, a collaborator, a stranger with five seconds of attention — understands within the first screen who you are and why they should stay. They do not, because you have spent your economy of words performing personality rather than establishing authority.
Your stated devotion to accessibility is admirable in principle and undermined in practice by a heading you cannot yet organize and a tone that treats standards as punchlines ("a human rights issue," delivered with a wink). I do not want your convictions delivered as jokes. State them plainly, back them with specifics, and let the specifics do the persuading.
Revise as follows, without further negotiation:
- Remove every emoji. All of them.
- Remove the aside to "Prof. Diaz." Address your actual instructor, or address no one — the page is not a memo.
- Rebuild your heading tree from a single principle: what is the parent category, what are its children. Submit the outline before you touch prose again.
- Cut the self-effacing asides ("lol," "let's be honest," "Mostly."). Confidence is not incompatible with honesty, but it is entirely incompatible with cuteness.
- Keep the circus material — it is the one true thing here — but subordinate it to purpose. The reader does not need atmosphere before competence.
I am a man who values discipline over flourish, structure over spectacle. You have built yourself a tent. I want to see the rigging.
Phase 3 — Main Project
Dick's Submission
Professor Bruce's Feedback
The rigging holds this time. I will note that before I turn to what still sags under its own weight, because I do not deal in false equivalence and you have, in fact, earned the observation.
The heading tree is finally coherent. About, What I Do, Projects, Contact as siblings; the four practice cards and the skill stack correctly subordinate. This is what an outline looks like when someone thinks before they type. I expected to have to say this twice. I did not. Good.
Now the rest.
The comment addressed to me, embedded in the source, explaining your own revision process — I did not ask for a memo. I asked for a website. A tradesman does not staple a letter to the client explaining how hard he worked on the cabinetry. The cabinetry either holds weight or it does not. Remove it. If you feel compelled to narrate your growth, do it in a commit message, not in the document I am grading.
The circus framing survives, and I will permit it, because it has been disciplined into service rather than performance — "structurally sound out of limited materials, under time pressure" is an actual argument, not atmosphere. That is the difference between last submission and this one. Do not mistake my tolerance for enthusiasm. I am allowing it because it now does work. The moment it stops doing work, cut it without sentiment.
On to what you have not fixed, because failure to notice your own blind spots is the more serious offense here.
Your color contrast claims are asserted, not demonstrated. You cite WCAG AA in prose and never show me the numbers. I do not take a man at his word when the entire premise of the section is verifiable fact. Run your palette through an actual contrast checker and report the ratios in the practice card copy, or strike the claim entirely. Half-conviction is worse than none.
Your IntersectionObserver script has no fallback and no error handling for browsers or contexts where it silently fails — you have built a nicety, not a necessity, and dressed it as core structure with an inline comment congratulating yourself for restraint. Restraint would have been omitting it, since the assignment asked for HTML and CSS demonstrating best practice, not JavaScript enhancement you were not assessed on. I will not penalize ambition. I will note that ambition unaccompanied by verification is just a liability wearing a nicer coat — your words, more or less, applied now to you.
Your "Currently studying: React" tag undermines the entire "Current Skill Stack" heading by admitting incompletion inside a section whose entire rhetorical function is to establish authority. A man does not list his weaknesses under the banner of his strengths. Cut it, or retitle the section so it does not lie to the reader about what it contains.
Your footer claims the site was "hand-checked for contrast and keyboard access." I have no evidence of this beyond your assertion. I do not accept assertions. I accept demonstrations. Either produce the audit or stop claiming the discipline you have not shown your work for.
Final instruction, and I will not repeat it: a portfolio that asks to be trusted on accessibility must prove accessibility the way an aerialist proves the net is real — not by describing the net, but by falling into it in front of the audience. Show your ratios. Show your keyboard trace. Cut what you cannot substantiate. I am not moved by conviction stated twice as loudly. I am moved by conviction that has receipts.
This is a passing structure built by a student who finally listened. Do not let the applause of that sentence convince you the building is finished. Buildings that stop being inspected are the ones that fall on the audience.