5D Tools - ARTF2224

12Working Class (Last Class!)JUN 20

You can view the requirements for your final here

Your final is due June 26th by 11:59pm EST

Use today to ask me questions and get some work done on your project.

11Responsive Websites (Media Queries)JUN 18

Reminder: You can view the requirements for your final here

In this day and age, all websites need to be as viewable on a desktop computer as on a phone. In web development, we use media queries to accomplish this. In this video I go through the following presentation, as well as the sample code to learn how.

Presentation about Responsive Websites

Class Code and Sample Code

Assignment

You've made the designs and you've gotten your sites online. If you haven't started working on your final yet, do that now. You can use and tweak snippets from work we've done throughout the semester, and reference all of our materials.

When I get back we'll have a working class where I'll help you with your finals (or, I have a lesson on CSS Animation we can do if you'd all prefer that! Take this poll to let me know which you'd prefer). Use today's lesson to meet the requirement for at least one implementation of a media query where something on your website changes upon resizing from large to small screen.

10Getting your site onlineJUN 13

Let's get our websites to actually show up on the internet! You'll be able to create a domain (refer to our first vocab lesson on what "domain" means along with other terms), and access it on the ✨world wide web ✨ via a URL.

Guide to Hosting a Static Website with Namecheap and AWS S3

There's no video for this lesson, the guide should provide enough instruction for you to complete this. You can use any files we've created in class or anything you'd like to test with to see that your site is live. (A simple HTML page that says "Hello World!" is fine). As always, email me if you have questions, and feel free to work together on this!

If you would prefer to use github pages or some other method of hosting your website, that's totally fine by me! I just don't have guides for those and you will have to figure them out on your own.

Assignment

Get your site online, and add the URL to a markdown .md file via Github (adding a markdown file per the instructions from the video in lesson 9) 15pts

Submit homework for lesson 10

09Designing for the WebJUN 11

You'll be making websites for your final, and the code is important, but let's also make sure they look great. Today we're going over how to use Figma to design your websites.

Links to UI Kit examples shown in video

Example #1

Example #2

Example #3

Example #4

Example #5

Example #6

Assignment

Create two projects in Figma:

  1. A file creating a mini UI kit/design system containing the following elements:
  2. A completed design using those elements, and more, for your final site design. This should include 4 pages.

Please create a markdown file using the instructions in the video to submit the link to your figma prototype.

This and the rest of your the homeworks while I'm gone are not due until I get back, which gievs you plenty of time to complete these designs and the other assignments. 15pts

Submit homework for lesson 9

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!

Due Date

June 26th by 11:59pm 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.

Tender love and care ❤️

Website Requirements

What to submit

Submit your final!

08Web TypographyJUN 6

Learning how to add custom fonts to make our websites beautiful!

Presentation about Web Typography

All of your homeworks through lesson 7 are due TODAY

Assignment

Add a custom font (I used Work Sans from Google fonts) to the mock portfolio. Style the rest of it to look like the mockup (including colors, font styles, small layout adjustments, etc.) 15pts

Submit homework for lesson 8

Mock Site Code so far

As promised, links to my version of the mock portfolio site code.

HTML structure

CSS for single image + text component (homework from lesson 5

07FlexboxJUN 4

We're learning about layout in CSS using Flexbox. Refer to the resources page for a really handy guide to flexbox.

Starter files

All of your homeworks through lesson 7 are due this Wednesday 6/6

Assignment

1. Complete Flexbox Froggy and upload a screenshot proving that you've completed it. 10pts

Submit part 1 of homework for lesson 7

2. Using what you learned about flexbox from class and the game, add flex styles to elements in the mock portfolio site to achieve the same layout as the mockup pdf. You do not have to style beyond layout, your page will look black and white and Times New Roman, but everything will be in the correct place. 15pts

Submit part 2 of homework for lesson 7

3. Complete this survey to help me help you!

06HTML StructureMAY 30

Continuing on our journey of structuring HTML for styling and organization.

Presentation on HTML Structure

All of your homeworks through lesson 7 are due next Wednesday 6/6

Assignment

Download homework source files

Looking at Portfolio Site Template.pdf (included in the source files in the link above), write the HTML structure that will build this page. Refer to the class presentation for examples of how to group elements together using divs and using semantic markup. 15pts

Submit homework for lesson 6

05The Box Model & CSS SelectorsMAY 21

Learning about the box model (everything is a box!), structuring some HTML in prep for homework, and learning more complex ways of selecting HTML elements in CSS.

Presentation on the Box Model and CSS Selectors

Starter files for class

Assignment

Using the HTML we started in class, use CSS to style the elements so that your page looks exactly like result.png (included in the source files in the link above).

Use the class presentation and ✨Google✨ to achieve this.

Upload a folder containing your html, css, and image files. Make sure to name the folder with "lastname - lesson 5" 15pts

Submit homework for lesson 5

04CSS!MAY 21

Making it pretty 💖 Connecting a stylesheet, styling HTML elements, how to select HTML elements for styling.

Starter files for class

Assignment

Building on the example from class, change the following things about your page:

Upload a folder containing your html and your css files. Make sure to name the folder with "lastname - lesson 4" 15pts

Submit homework for lesson 4

03Links and ImagesMAY 16

Covering multi-page websites, and how to add links and images to your HTML.

Presentation from class

Download multi-page site example file structure from class

Assignment

Create 4 HTML pages from scratch (remember to include all the necessary meta information and starting tags).

You should include:

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.

Upload a folder containing your 4 html files with the proper folder structure inside. 15pts

Submit homework for lesson 3

02HTML AnatomyMAY 14

How to start an HTML file and project from scratch, view it in the browser, and add basic HTML elements for the start of a website.

Assignment

Throughout the semester we will be working towards creating portfolio sites (or a different personal site).

Create an HTML file from scratch called index.html (like we did in class), and add the following content:

15pts

Upload your index.html file to this week's folder on GitHub following the same process as last week. The instructions can be found on the repo's main page.

Submit homework for Lesson 2

01Intro, Vocabulary, & How to Submit HomeworkMAY 7

Introductions, go over the syllabus, install a text editor like Sublime, go over definitions of some common web terms, and set up GitHub accounts for submitting homework.

Vocabulary presentation

Assignment

Let's make sure we all know how to upload the homework! Please fill out this survey, and follow the instructions for uploading homework. Please submit an appropriately named folder containing a screenshot of the completed survey. 5pts

Submit homework for Lesson 1

What is GitHub and Why are We Using it?

GitHub is a version control system for code.

Let’s say me and a friend are working on the same code on different computers. If we both change the same thing, we want to make sure that we pick the right version, and that when I make updates, the other person can get them without copying and pasting a bunch of things.

When I’ve written some code that I want other people to get, I submit what’s called a Pull Request (PR). Before my code becomes part of the main system, someone checks it to make sure it’s written well and won’t screw anything up. This is the feature we’ll be using for checking homework because it allows me to comment on specific lines of code.

You’ll submit PRs each week and I’ll comment on them until they’re good to go. Once it’s merged, you know it’s correct.