{"id":5,"date":"2026-08-31T13:10:00","date_gmt":"2026-08-31T13:10:00","guid":{"rendered":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/?page_id=5"},"modified":"2026-09-05T15:42:25","modified_gmt":"2026-09-05T15:42:25","slug":"syllabus","status":"publish","type":"page","link":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/syllabus\/","title":{"rendered":"Syllabus"},"content":{"rendered":"<p><strong>Roman Jaster<\/strong><br \/>\n<a href=\"mailto:roman@romanjaster.com\">roman@romanjaster.com<\/a><\/p>\n<h2>Contents<\/h2>\n<ul>\n<li><a href=\"#course-summary\">Course Summary<\/a><\/li>\n<li><a href=\"#toolkit\">Toolkit<\/a><\/li>\n<li><a href=\"#domain\">Domain and Hosting<\/a><\/li>\n<li><a href=\"#show-and-tell\">#show-and-tell Slack Channel<\/a><\/li>\n<li><a href=\"#attendance\">Attendance<\/a><\/li>\n<li><a href=\"#resources\">Resources<\/a><\/li>\n<\/ul>\n<h2 id=\"course-summary\">Course Summary<\/h2>\n<p>In this course, we will cover a broad spectrum of coding techniques that will enable you to create contemporary webpages. While discussions about design and usability are encouraged, our central focus will be on front-end development. Be prepared to write a lot of code.<\/p>\n<p>The class will start with a review of the basics: how to properly write semantic HTML and contemporary CSS to create responsive and mobile-first web pages.<\/p>\n<p>After that, focused mini-projects will allow us to tackle specific issues:<\/p>\n<ul>\n<li><code>@media<\/code> queries<\/li>\n<li>Web typography<\/li>\n<li>Accessibility<\/li>\n<li>Creating layouts with <code>flexbox<\/code> and <code>grid<\/code><\/li>\n<li>CSS variables<\/li>\n<li>CSS units, such as <code>vh<\/code>, <code>vw<\/code>, <code>ems<\/code> and <code>rems<\/code><\/li>\n<li>CSS <code>transform<\/code>, <code>transition<\/code>, and <code>animation<\/code> properties<\/li>\n<li>Image compression<\/li>\n<li>Favicons<\/li>\n<li>Basics of JavaScript<\/li>\n<li>Using AI technologies like Copilot to help us code while\u2014hopefully\u2014staying in control<\/li>\n<\/ul>\n<p>I\u2019m open to discuss anything else you might be interested in. Let me know!<\/p>\n<p>For the final project, you will apply your coding knowledge to create a small website or web-based tool.<\/p>\n<h3>Prerequisites<\/h3>\n<p>A basic understanding of HTML and CSS. Ideally, you should have coded a website before and be comfortable using a text-based code editor. More importantly, you must have a real interest in web design, the urge to fiddle with code, and the ability to be proactive and figure things out.<\/p>\n<h3>Bring a Laptop<\/h3>\n<p>Ideally, bring your laptop to class every week. You\u2019ll work more comfortably and effectively in an environment that\u2019s customized to your preferences. If you don&#8217;t have access to a laptop, we&#8217;ll figure something out.<\/p>\n<h3>A word about AI<\/h3>\n<p>AI is nothing short of magical when it comes to coding, and I&#8217;m using it extensively in my own work. While we will use AI help in the latter part of this course, please do not rely on AI in the beginning. You need to truly understand the fundamental concepts before letting AI write your code. And when you do use AI, make sure to ask for explanations so you understand what the code accomplishes.<\/p>\n<p>Please <em>do<\/em> use AI as a personal <em>tutor\u00a0<\/em>as much as you like.<\/p>\n<h2 id=\"toolkit\">Toolkit<\/h2>\n<p>We will utilize the following tools in this class:<\/p>\n<ul>\n<li>This <strong><a href=\"https:\/\/teaching.romanjaster.net\/calartsfall2025\">class website<\/a> <\/strong>(teaching.romanjaster.net\/calartsfall2026) where you can access all presentations and assignments.<\/li>\n<li>A <a href=\"https:\/\/calartscodingfall2026.slack.com\/\"><strong>Slack group <\/strong><\/a>for communicating among ourselves.<\/li>\n<li><strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a> <\/strong>as our code editor.<\/li>\n<li><a href=\"https:\/\/github.com\/features\/copilot\"><strong>Github Copilot<\/strong><\/a> for AI help. Students get a <a href=\"https:\/\/docs.github.com\/en\/copilot\/how-tos\/manage-your-account\/get-free-access-to-copilot-pro\">free account<\/a>.<\/li>\n<li><strong><a href=\"https:\/\/www.figma.com\/\">Figma<\/a> <\/strong>for creating visual mockups.<\/li>\n<li>Your own <strong><a href=\"https:\/\/www.namecheap.com\/\">domain name<\/a><\/strong>.<\/li>\n<\/ul>\n<h2 id=\"domain\">Domain and Hosting<\/h2>\n<p>You should have access to your own domain name. If you don\u2019t already have one, I can help you purchase one. You can use any domain registrar you like. If you don\u2019t have a preference, use <a href=\"https:\/\/www.namecheap.com\/\">Namecheap<\/a>.<\/p>\n<p>All assignments will be hosted for free using <strong>GitHub Pages<\/strong>. You\u2019ll connect each project to a subdomain of your own domain. For example:<\/p>\n<p><code dir=\"ltr\">project1.coding.yourdomain.com<\/code><\/p>\n<p>By the end of the semester, you\u2019ll have a small portfolio of projects created in this class.<\/p>\n<h2 id=\"show-and-tell\">#show-and-tell Slack Channel<\/h2>\n<p class=\"isSelectedEnd\">Each week, one student will share a web discovery in the <a href=\"https:\/\/calartscodingfall2026.slack.com\/archives\/C0BTYDYSHU7\"><strong>#show-and-tell<\/strong><\/a> Slack channel.<\/p>\n<p class=\"isSelectedEnd\">Find and share two things:<\/p>\n<ol start=\"1\" data-spread=\"true\">\n<li><strong>A tool or coding technique<\/strong><br \/>\nSomething useful, surprising, new, or novel.<\/li>\n<li><strong>A great website<\/strong><br \/>\nA site that looks spectacular or works spectacularly. Please find a <em>real<\/em> website\u2014built with HTML and CSS, responsive, accessible\u2014rather than something that feels like a video game or is entirely built in p5.js.<\/li>\n<\/ol>\n<p>See the resources below as a starting point.<\/p>\n<h2 id=\"attendance\">Attendance<\/h2>\n<p>It is very important that class starts on time and that you attend every class. You can easily fall behind if you miss lectures and critiques in class.<\/p>\n<p>This class has a strict attendance policy:<br \/>\n<strong>Class starts exactly at 9:10am<\/strong><\/p>\n<p>In the event that you miss a class, please review the class website and contact a class mate to find out what was covered. If you have remaining questions, you are welcome\u00a0to contact me\u00a0directly.<\/p>\n<h2 id=\"resources\">Resources<\/h2>\n<h3>References<\/h3>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Structuring_content\">MDN: Learn Web Development: HTML Basics<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=EUJlVYggR1Y\">How to Get Started with VS Code<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\">HTML elements<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/\">CSS Properties<\/a><\/li>\n<li><a href=\"http:\/\/caniuse.com\">caniuse.com<\/a> (browser support lookup)<\/li>\n<\/ul>\n<h3>Podcasts<\/h3>\n<ul>\n<li><a href=\"https:\/\/shoptalkshow.com\/\">Shop Talk Show<\/a><\/li>\n<li><a href=\"https:\/\/syntax.fm\/\">Syntax Web Development Podcast<\/a><\/li>\n<\/ul>\n<h3>People<\/h3>\n<p><a href=\"https:\/\/chriscoyier.net\/\">Chris Coyier<\/a><\/p>\n<ul>\n<li>CSS Tricks, Code Pen, ShopTalkShow podcast<\/li>\n<\/ul>\n<p><a href=\"https:\/\/daverupert.com\">Dave Rupert<\/a><\/p>\n<ul>\n<li>ShopTalkShow podcast<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=aHUtMbJw8iA\">Miriam Suzanne<\/a><\/p>\n<ul>\n<li>CSS advocate and educator<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.youtube.com\/layoutland\">Jen Simmons<\/a><\/p>\n<ul>\n<li>Web advocate, especially for layout techniques<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.joshwcomeau.com\/\">Josh Comeau<\/a><\/p>\n<ul>\n<li>Front-end developer and educator focusing on React and CSS<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.chrbutler.com\/archives\">Christopher Butler<\/a><\/p>\n<ul>\n<li>Writer &amp; thinker about UX, design, and technology<\/li>\n<\/ul>\n<h3>Newsletters<\/h3>\n<ul>\n<li><a href=\"https:\/\/newsletter.uxdesign.cc\/\">newsletter.uxdesign.cc<\/a><\/li>\n<li><a href=\"https:\/\/tympanus.net\/codrops\/collective\/\" target=\"_blank\" rel=\"noopener noreferrer\">tympanus.net\/codrops\/collective<\/a><\/li>\n<li><a href=\"https:\/\/figmalion.com\/\">figmalion.com<\/a><\/li>\n<li><a href=\"https:\/\/sidebar.io\">sidebar.io<\/a><\/li>\n<\/ul>\n<h3>Inspiration<\/h3>\n<ul>\n<li><a href=\"http:\/\/awwwards.com\">awwwards.com<\/a><\/li>\n<li><a href=\"http:\/\/siteinspire.com\">siteinspire.com<\/a><\/li>\n<li><a href=\"https:\/\/www.siteofsites.co\/\">siteofsites.co<\/a><\/li>\n<li><a href=\"https:\/\/tinyawards.net\/\">tinyawards.net<\/a><\/li>\n<li><a href=\"http:\/\/onepagelove.com\">onepagelove.com<\/a><\/li>\n<li><a href=\"https:\/\/www.cssdesignawards.com\/\">cssdesignawards.com<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/\">smashingmagazine.com<\/a><\/li>\n<\/ul>\n<h3>Tools<\/h3>\n<ul>\n<li><a href=\"http:\/\/validator.w3.org\">validator.w3.org<\/a> (Validate code)<\/li>\n<li><a href=\"https:\/\/squoosh.app\">squoosh.app<\/a> (Compress images)<\/li>\n<li><a href=\"https:\/\/realfavicongenerator.net\/\">realfavicongenerator.net<\/a> (Creating favicons)<\/li>\n<li><a href=\"http:\/\/fontsquirrel.com\/tools\/webfont-generator\">fontsquirrel.com\/tools\/webfont-generator<\/a> (Webfont generator)<\/li>\n<\/ul>\n<h3>VS Code Extensions<\/h3>\n<p><em>Basic:<\/em><\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\">Live Server<\/a><\/li>\n<\/ul>\n<p><em>Intermediate:<\/em><\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vunguyentuan.vscode-css-variables\">CSS Variable Autocomplete<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=GitHub.copilot\">GitHub Copilot<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=donjayamanne.githistory\">Git History<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ExodiusStudios.comment-anchors\">Comment Anchor<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=alefragnani.project-manager\">Project Manager<\/a><\/li>\n<\/ul>\n<p><em>Advanced:<\/em><\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=Natizyskunk.sftp\">SFTP<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=glenn2223.live-sass\">Live Sass Compiler<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Roman Jaster roman@romanjaster.com Contents Course Summary Toolkit Domain and Hosting #show-and-tell Slack Channel Attendance Resources Course Summary In this course, we will cover a broad spectrum of coding techniques that will enable you to create contemporary webpages. While discussions about design and usability are encouraged, our central focus will be on front-end development. Be prepared [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":11,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/pages\/5\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/teaching.romanjaster.net\/calartsfall2026\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}