Christopher Stein – Page 2 – MMP 350 Advanced Web Design

Style Tiles

Style tiles were created by Samantha Warren. Style Tiles The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you to have a discussion about the design with teammates, clients etc, in a quick way… Continue reading Style Tiles

Week 13: 11/22 + 11/24

We will start some UI Interactivity small individual projects. Also Group time for Project Brief. In Class: EXPLORE The Join link is the same for all live sessions. There is a registration form and a waiting room to help avoid bombing. Live Sessions JOIN LIVE SESSION Session 1: JavaScript, Interactivity and Groups Monday, November 22… Continue reading Week 13: 11/22 + 11/24

Running JavaScript

There are a number of different ways you can run JavaScript code. This post goes over a number of them. Some are better for simple tests and practice and some are what you would use in production (the final version of your web site). You can also look at Wes Boss’ Setup instructions and Running… Continue reading Running JavaScript

Week 12: 11/15 + 11/17

This week we will start to look at the group project, form groups and look over what we’ve done (and are going to do). Before Class: LEARN DO THIS: Submit your 11ty Site Project on Blackboard. Apologies that the assignment wasn’t up earlier. It’s up now and I’ve changed the due date to today, Monday… Continue reading Week 12: 11/15 + 11/17

Week 11: 11/8 + 11/10

This week we will explore using Data, Nunjucks templates and Collections Before Class: LEARN DO THIS: Work on getting your Responsive Site moved to 11ty. Deploy your Netlify site on Netlify Update your Miro Progress board In Class: EXPLORE DO THIS: Join the Live Class Sessions The Join link is the same for all live… Continue reading Week 11: 11/8 + 11/10

Personal Project Post

We will go over this in class as well. Info For Your Post Title: The title should be clear that it’s a web site and the name of your project. Something like Web Site: Chris Stein Portfolio Post Content: Include the following (add headings to make it easier to read). You can take some of… Continue reading Personal Project Post

Submitting the Eleventy Site

Here is what you will need to do to submit your Eleventy site Push all of your files to your GitHub Repository. Deploy your site to Netlify Copy the URL. It should be something like https://yourproject.netlify.app Note: by default Netlify will give you a wierd project name that is a combination of words and letters… Continue reading Submitting the Eleventy Site

Week 10: 11/1 + 11/3

This week we will wrap up the first version of your Eleventy projects Before Class: LEARN DO THIS: Work on getting your Responsive Site moved to 11ty. Update your Miro Progress board In Class: EXPLORE DO THIS: Join the Live Class Sessions The Join link is the same for all live sessions. There is a… Continue reading Week 10: 11/1 + 11/3

Deploy to Netlify

This post covers how to get your site in the web using Netlify’s servers. Terminology Some words you might not know Netlify: Netlify is a hosting platform specializing in hosting projects build with workflows like ours (static site generator and GitHub). They have a generous free pricing tier that is great for the kind of… Continue reading Deploy to Netlify

Week 9: 10/25 + 10/27

This week we will dive into Eleventy Before Class: LEARN DO THIS: Work on getting your Responsive Site moved to 11ty. DO BEFORE WEDNESDAY Try Kahoot Flashcards and work on 11ty project. In Class: EXPLORE DO THIS: Join the Live Class Sessions The Join link is the same for all live sessions. There is a… Continue reading Week 9: 10/25 + 10/27

VSCode 11ty Setup

When we’re working with Eleventy there are some new file types that VS Code will not handle as you expect. Follow these steps to set up VS Code to work with them. Nunjucks This is the templating language we will use (11ty actually lets you use a number of them). Install the Nunjucks extension to… Continue reading VSCode 11ty Setup

Week 8: 10/18 + 10/20

This week we will dive into Eleventy Before Class: LEARN DO THIS: Make sure you have node installed on your computer. For windows and macOS there are steps in the dev environment instructions that cover this. Make sure you have access to your project files (brief document, html, css, js) DO BEFORE WEDNESDAY Do the Markdown… Continue reading Week 8: 10/18 + 10/20

Starter 11ty Site

This post goes through the steps to create a basic Eleventy (11ty) site from Prof Stein’s Eleventy Basic template.

Week 7: 10/13

This week we will finish the Responsive Site and get started on being ready for Eleventy. The Responsive site will be submitted on Thursday, October 14 There is no class on Monday, October 11 due to a holiday. Before Class: LEARN DO THIS: Work on your project. Roughly in this order wireframes complete create HTML… Continue reading Week 7: 10/13

Submitting the Responsive Site

Here is what you will need to do to submit your responsive site Publish the site with GitHub Pages View your published site in your browser. Copy the URL. It should be something like https://your-user-name.github.io/your-project-name Go to Blackboard for our course Click on Assignments > Responsive Site Paste in your URL in the text area… Continue reading Submitting the Responsive Site

Getting Started

This post outlines the steps to take to get a basic web site project ready to do. These are the things you do BEFORE you start writing HTML and CSS. You should also do these AFTER you have created a project brief with a sitemap and wireframes so you know what you’re going to make.… Continue reading Getting Started

Week 6: 10/4 + 10/6

This week is much like last week: we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work… Continue reading Week 6: 10/4 + 10/6

Media Queries

In order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units. This allows the layout to expand and contract to fit the width of the browser window. Flexible Media: images, video etc can also adjust their width… Continue reading Media Queries

Author: Christopher Stein