5D Tools - ARTF2224
13CSS AnimationAPR 12
You can view the requirements for your final here. Please check them out and let me know if you have questions!
This is our last week 😭 and we're learning about CSS animation 🎉
Assignment
Keep working on your final for this class. Reminder: it's due April 27th by 5pm. If you want to incorporate CSS animation into your project, feel free to use it as an opportunity to practice! It's not one of the requirements, though.
12Responsive Websites (Media Queries)APR 5
You can view the requirements for your final here. Please check them out and let me know if you have questions!
This week we'll be covering how to make media queries in order to make your websites look great on both desktop and mobile.
Presentation on responsive websites
Assignment
Keep working on your final for this class. Use this week's lesson to meet the requirement for at least one implementation of a media query where soemething on your website changes upon resizing from large to small screen.
Your Final!
Your final for this class is to create a personal website. Most of you will be doing a portfolio site, but it can be anything you want. We've been talking about this all semester and finally here is a list of requirements! I originally had you create 5 html, and 1 css files, but then only required you to design 4 pages for week 11's homework so I wanted to clarify what the details were for the final.
Due Date
April 27th by 5pm EST
Grading
This project is worth 115pts. 100 of those points are based on meeting the requirements, and 15 of those points are based on whether it's apparent that you put effort and TLC into the project.
Website Requirements
- 4 HTML pages (if you make an about page, or extra page, as well I’ll count it as 5 extra credit points), and 1 css file 10pts
- All your pages should be linked together (whatever makes sense for your project) 5pts
- All links should be working properly and create “pretty” URLs (i.e. end in “/“ not “.html”) 10pts
- Reference the presentation from week 08
- At least 3 images (can all be on separate pages) 5pts
- A navigation that is consistent across all pages 10pts
- Use either floats or flexbox to create your layout 10pts
- Implement at least one externally hosted font (like a google font) or locally hosted font (using @font-face) 10pts
- Have at least one media query to make something change when resizing from small screen to large screen 10pts
- Include at least one change on hover (something like a link changing color would be fine) 10pts
- Your site must be live using AWS or whatever hosting service you prefer 10pts
What to submit
- A .zip file containing the following: 5pts
- The files that make up your website. This should be the same thing you upload to AWS or other hosting service.
- Add the URL to your website to this google spreadsheet 5pts
11Designing your websiteMAR 29
We're going to be using Sketch (please download the free trial) to design our portfolio -or other type of- website! We'll cover best practices around consistency, the basics of using sketch, and looking at examples of cool portfolio sites for inpsiration.
Presentation on designing for the web
Portfolio site example designs
- Marylou Faure (illustrator)
- Lynn and Tonic (cool breakpoints)
- JP Boneyard (web designer and screenprinter)
- Nathan Hass (web designer)
- Nathan Hass (web designer)
Places to look for inspiration
These can also be found under resourcesAssignment
Design your website for this class! Think about the things we talked about during class and what content you want to include. Your site must include the following:
- Site navigation
- At least 3 projects (or items)
- At least 3 pages linked together (it would make sense to have a separate page for each of the projects, and you would link to these from your home page)
- A mobile version of the design for each page
Export your design as a PDF and upload it. 15pts
Submit homework for week 1110Web Typography (no in person class)MAR 22
Not all of you are design students, and even if you are and know the basics of typography, there are some best practices for typography on the web that are useful to know!
Typography for the Web presentation
Assignment
Choose any recipe and make it look typographically nice and interesting on a web page according to the principles and CSS in the presentation.
Add your recipe index.html and style.css files to your newly live website on AWS (or whatever service you're using for hosting). Please add the URL to your live site to this google spreadsheet 15pts
09Getting your site online (no in person class)MAR 15
Follow this guide to get your site online!
Code snippet for enabling permissions (the one in the PDF isn't copying correctly)
08Links and ImagesFEB 28
Finally spending the time covering multi-page websites, how to add links and images to your HTML.
Assignment
1. Create 6 HTML pages from scratch (remember to include all the necessary meta information and starting tags). You can style this as much as you want to but we'll be focusing on designs in another class. 15pts
You should include:
- 1 home page
- 1 about page
- 1 page for all the projects
- 3 project pages (or equivalent if you're not doing a portfolio site)
- Please include an image on each of these pages.
- Only a title and image is required for now, but you can add as much content in these as you want to. Eventually you'll need to have content in here.
- Navigation that can take you to the home and about pages from any of the pages.
- Properly linked links and images with files in appropriate folders.
Your files are local to your computer so your URLs will not look pretty, they will be something like file://blahblah/uglyurls/yourname/my-website.......... This is totally fine for this assignment, when grading I'm looking at the folder structure that you've created.
How should this assignemnt look? It can be as plain as you want. Please just include something (like an h1 tag with a title) so that I know what page I'm looking at. You can style it and add as much content as you want, since eventually you'll be making this into your final portfolio site project, but it's not required for this week's assignment.
3. Fill out this survey (if you haven't already) to help me help you!
Upload a zipped folder containing your 5 html and 1 css files.
07Flexbox for LayoutsFEB 22
We're continuing to learn about layout in CSS, but this week using Flexbox. Refer to the resources page for a really handy guide to flexbox.
Assignment
1. Starting with the starter files (link above) and using only flexbox properties, recreate the layout in each demo from the flexbox-demos.png image. If you followed along during class, you should already be done with this. 5pts
2. Complete Flexbox Froggy, a game that helps you practice flexbox. 10pts
3. Fill out this survey to help me help you!
Upload a zipped folder containing your index.html and style.css files, and a screenshot showing that you completed Flexbox Froggy.
06Adding Fonts & Styling our Mock SitesFEB 15
Go over how to add web fonts.
Assignment
Finish styling the mock portfolio site to actually look like the mockup.
Upload a zipped folder containing your index.html file, your style.css file, the images, and font files. 15pts
05CSS Selectors and FloatsFEB 8
Review the homework (HTML structure of mock portfolio site), review CSS selectors and learn about floats, start adding CSS to our mock site.
Assignment
Style the mock portfolio site using floats, margins, and padding to achieve the layout of the mock site. Only worry about the layout for now, we will do fonts and details next week. 15pts
Upload a zipped folder containing your index.html file, your style.css file and the images.
04Web Patterns & HTML OrganizationFEB 1
Go over some common web patterns and how to write them using markup.
Assignment
Source filesUsing the "Portfolio Site Template.pdf" as a model, create an HTML file and add the content (including images) using the appropriate HTML elements. Group sections of content using divs with your own classes. Don't worry about CSS yet, we'll do that in class together. 15pts
Upload a zipped folder containing your index.html file and the images.
03The CSS Box ModelJAN 25
Going over the CSS box model, divs, spans, starting some layout, and some cool stuff.
Assignment
Recreate the "result.png" design as closely as possible using HTML and CSS that we have learned and these source files. Try to center the entire design on the page the way the image shows. 15pts
Upload a zipped folder containing your index.html file, your style.css file, and the sample image.
02HTML & CSS AnatomyJAN 18
How to structure HTML and CSS files, link them together, and setting up some basic elements. Use the links provided in the Resources section for any elements or styles we haven't covered in class yet.
Assignment
Throughout the semester we will be working towards creating portfolio sites (or a different personal site).
Adding to the files we started in class, add the following content and styles to your site:
- Change the
background-colorof thebody - Within the
h1element name what type of site you'll be creating. Within thepelement give me a little more description about it. Change the font of both theh1and thepelement. - Using the HTML element(s) necessary, make a list of the content you want to put on your website.
15pts
Upload a zipped folder containing your index.html file and your style.cssfile.
01Intro & VocabularyJAN 11
Introductions, go over the syllabus, install a text editor, go over definitions of some common web terms.
Assignment
Fill out this survey! (Easiest points ever) 5pts
Survey for Week 01