For this project you will be designing a blog template. Blogs usually are created using what's called a content management system (CMS). A popular one is Wordpress. The purpose of this assignment is to start thinking less about designing web pages and more about creating design systems that can be put together in different arrangements to create pages.
Watch this video of Brad Frost talking about modular design. There is a section in the video where he goes into a specific tool for coding. You can ignore that part. It's from minute 22:28 through 38:28.
After that video, watch my video where I describe the project.
The template you build should have a theme as its focus. You will be designing the home page of the blog and also the style guide (watch my video for description). Here is an example of a style guide from a student last semester.
Your template and style guide should have the following components:
Save your project in a folder called blog-template and upload it to the server. Save the style guide as style-guide.html.
For this project, you will be creating an online form to accept donations from a user. Your focus will be on researching and using the best practices for a form of this kind. Getting someone to give money is a very difficult procedure and it requires creating the easiest experience possible for the user. It requires making the form as simple as possible to use. Usability is our main focus here. Here is an example of a student project.
You can choose the organization of your choice for this project, or invent a new one. Just make it convincing. Your form should guide someone through the entire process of making a donation. I suggest researching existing donation forms and looking for patterns that work. Your form might be a long scrolling page or broken up into different screens—whatever you think is appropriate. Be sure to style all of your inputs to create an orginal look, not the default styles. Here is an example of how can completely transform the look of your form through CSS.
All about forms
Form Design Best Practices
Web forms cheat sheet
Custom radio buttons with text field
Save your project as donation and upload it to the server.
Our next project is going to be focusing on usability. To begin, you need to watch the following playlists and then take this quiz.
A timeline website is one that presents information on a topic, divided into sections, in a linear order. This assignment focuses on...
Timeline websites are often scrolling websites, but can also be slide-based, or even scroll horizontally instead of vertically. The topic is up to you and does not necessarily have to involve the passage of time. The information could be sectioned off according to some other quality. For example, a sports website could focus on a series of great players.
Here are a few examples...
Lois JeansDesign a mockup of both the desktop and mobile versions of your site and upload the images here. Your mockups will probably be very long and rectangular, either vertically or horizontally, in order to represent all of the content. Due 3/10
Build the site. Name your project folder timeline and upload it to the server.
CSS Zen Garden is an online project challenging designers to harness the power of CSS. Using the same HTML file, numerous layouts have been created by many designers using only CSS — each one distinct from rest.
Design a mockup of your layout and upload a screenshot here. Due 2/6.
Download the HTML file, link it to your own stylesheet, and get started. The only part of the HTML file you are allowed to edit is the <link> tag to your
stylesheet. Do not add any elements, classes, id's, etc.
Use this as chance to become more familiar with CSS grid, flexbox, and combinator selectors. There are links to helpful resources on the schedule page.
This assignment is meant to be an introduction to responsive design. You will be creating an alternate set of styles to adjust your design so that it looks and functions better on a mobile phone.
Start with the CSS Zen Garden layout you already have. Open in a browser with the developer tools turned on, switch the viewing mode to mobile (here's a how-to article for all the browsers). Notice what parts of the layout and design are causing problems, or are not as effective. These are the things you will override with new styles.
Your final design should contain the following components
background-image property to add graphic elements to the designFor help with responsive design concepts and code, watch this Lynda playlist.
Save your project in a folder called csszengarden and upload it into your GD150 directory on the server.
1. Watch these videos:
2. Refer to this article: Complex Selectors by Shay Howe
Create a webpage about your winter break. This could be anything at all — a trip, shoes you bought, a list of movies you watched, maybe the fantasy vacation you wish you'd taken. The point of this assignment is simply to wake up your brain and refresh what you remember about writing html and css. Start with the basics of simply creating a blank html file. Then add a header or some body copy. See if you can add a photo. Refresh your memory on how to use a google font. Ideally you would have a minimum of some text (using a web font), an image, and some css styles. However, the most important thing is that you go at your own pace and do what you are comfortable with.
I don't care how messy your code is. I won't be looking at it. Just make something and bring it to class.
Do not do this assignment in codepen.
Maybe one of my youtube videos would help. Or maybe the interactive tutorials at codecademy.com.