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
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
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
Assignment
Create two projects in Figma:
- A file creating a mini UI kit/design system containing the following elements:
- Large header
h1 - Medium header
h2 - Small header
h3-h6 - Normal text
p - Label or small text
labelorp class="small" - Primary button
a class="primary" - Secondary button
a class="secondary" - Link
awith 3 versions: normal, hover, active - Card
div class="card" - 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 9Your 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.
Website Requirements
- 4 HTML pages (if you make an about page (or some sort of extra page) as well I’ll count it as 5 extra credit points), and at least 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 lesson 3
- At least 3 images (can all be on separate pages) 5pts
- A navigation that is consistent across all pages 10pts
- Use 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 whatever hosting service you prefer (refer to ~future~ lesson 10 for guidance)10pts
What to submit
- A folder containing: 5pts
- The files that make up your website. This should be the same thing you upload to your hosting service.
- A markdown file containing the link to your live website 5pts
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 8Mock Site Code so far
As promised, links to my version of the mock portfolio site code.
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.
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 72. 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 73. 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
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
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
04CSS!MAY 21
Making it pretty 💖 Connecting a stylesheet, styling HTML elements, how to select HTML elements for styling.
Assignment
Building on the example from class, change the following things about your page:
- Change the background color of the
body - Change the font of the
h1 - Make some emphasized text bold
- Change the font size of your
lielements - Using HTMl, create three boxes on the page, then use CSS to make them all the same size, but each one have a border with a different color.
- Give the boxes a rounded edge.
Upload a folder containing your html and your css files. Make sure to name the folder with "lastname - lesson 4" 15pts
03Links and ImagesMAY 16
Covering multi-page websites, and how to add links and images to your HTML.
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:
- 1 home page
- 3 other pages
- Include a title for each of these pages.
- Include a different image on each of these pages (it can be of anything you want, they don't have to relate to the content that you want to include on your final).
- Navigation that can take you to the any given page from any of the pages (this will probably be an unordered list of links).
- 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.
Upload a folder containing your 4 html files with the proper folder structure inside. 15pts
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:
- Give your site a title and main heading telling me what type of site it will be. i.e. "Portfolio Site," "My Recipes," "Site About My Favorite Country."
- Write a short description about this website and why you want to make it. Is there anything special about it or things you're aiming to include?
- Your website will need to have at least 3 pages besides the home page. Make a list of what content will be on these three pages. i.e. "Page 1: Art project, Page 2: Game design project" ...etc. Make sure it's formatted correctly for HTML. If you don't know exactly what content will be there, that's okay, just get as specific as you can.
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.
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.
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 1What 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.