Blog

Everything is really due Friday end of day

Make sure you check your site with the HTML Validator ( https://validator.w3.org/ ) and the CSS Validator ( https://jigsaw.w3.org/css-validator/)

LINK for class recording
Passcode: NPe2iM!#

TODAY WILL BE TIME TO WORK IN CLASS AND GET HELP FROM EACH OTHER

Link to recording of class here Passcode: K%z!#w7x

PRESENTATIONS ARE NEXT WEEK WED the 18th — everything must be completely completely done by FRIDAY the 20th

so the final project you must turn in should be :

Presentation:

• Cover page
• Project Proposal
• Mood Board – screen grab and link
• Style Guide -SCREEN GRAB AND LINK TO PDF
• CSS Stylesheet SCREEN GRAB AND LINK TO CSS FILE
• Supporting images/sketches
• WIREFRAMES SCREEN GRAB AND LINK
• Thank you page with your
  portfolio URL and email address

Can use Powerpoint, Google Slides,
Keynote, etc. – put a link to this presentation on the final class’s blog post in this site so i can refer to it when grading.

Be sure and look at your site on both an iPhone and an Android phone- (borrow a friend’s or pair up with a classmate who has the other kind of phone) You want your site to look ok on both because you never know what kind of phone your potential client or employer will have!

Today We’ll learn how to do a slider without any Javascript (only HTML and CSS!)

here’s the one we’re going to use: https://schepp.dev/posts/css-only-carousel/

and the code can be found here: https://codepen.io/Schepp/pen/WNbQByE?editors=1100 When you use this you will cite the code in your comments both in the HTML and in the CSS.

here is the link to the recording of the class Passcode: @#QA7a?2

CSS animation explained: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

We will go over it today in class.

I’m going to skip the web form because i don’t think that is really that important and you will need the time to get your sites all working and looking good.

so the final project you must turn in should be :

Presentation:

• Cover page
• Project Proposal
• Mood Board – screen grab and link
• Style Guide -SCREEN GRAB AND LINK TO PDF
• CSS Stylesheet SCREEN GRAB AND LINK TO CSS FILE
• Supporting images/sketches
• WIREFRAMES SCREEN GRAB AND LINK
• Thank you page with your
  portfolio URL and email address

Can use Powerpoint, Google Slides,
Keynote, etc. – put a link to this presentation on the final class’s blog post in this site so i can refer to it when grading.

Portfolio Website
● Home page
● Portfolio pages
● Resume

Must be a working website at your
personal domain

Today’s Presentation is here; https://drive.google.com/file/d/1DEHOogApjYjdXovja0g6vcV_d-QWdQs_/view?usp=sharing

We will talk about how to use media files with HTML and then we’ll do a quick project where you will get to use this skill.

We will also spend some time looking at particular problems that any of you might be having and trying to solve them.

link to week 12 recording Passcode: %C9B9CGI

Media Queries https://css-tricks.com/a-complete-guide-to-css-media-queries/

https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download

Link to this week’s presentation

https://us02web.zoom.us/rec/share/LpD3UedLhhkn4dlradN5oAA2SsEbvX04THBF6ASRc19htjD1yt-BJnEakEFXDmh0.JUOby4PZp0g7nagw?startTime=1649865895000
Passcode: 1tS$n2D1

Grid vs. Flexbox https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

A Complete Guide to Grid

A Complete Guide to Flexbox

Media Queries https://css-tricks.com/a-complete-guide-to-css-media-queries/

Homework: on one page of your site, use the three techniques we covered in class today.

CSS GRID

CSS FLEXBOX

using CSS and background image to make the logo on your page be link.

LINK TO THE VIDEO RECORDING OF THIS CLASS (Passcode: 4c8vsF!8)

Today, you’re glad this is a remote class because I’m sick (not covid I tested myself) so just an ordinary head cold, but i’m feeling pretty rotten. So here’s what we’re going to do. Your assignment was to mockups of your designs for all your page types, so we’re going to spend the time in class looking at them and critiquing each other’s work.

Then for next week, i’m going to have you do some study on your own of CSS GRID layouts. This is a powerful new tool in your CSS toolbox (well, relatively new) . THere’s a great step-by-step breakdown of how they were here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout and your assignment for next week is to try to use this tool- Plus all the other tools you already know, to start making your homepage look the way you designed it.

here’s a link to the recording of this class (Passcode: @!QCw3pN)

Presentation for this week

link to the nav example files

your home work for week 8 :
Create design mockups (JPGS) for each of your page types in your site, show what images you’ll use what colors, what fonts, your logo if you have one or title treatment if you don’t.. everything how its really going to look.

https://www.w3schools.com/cssref/css_selectors.asp

link to the recording of this week’s class (Passcode: 7kEU&chp)

LINK TO NAV EXAMPLE FILES

and here is the QUIZ

Here’s the link for the zoom recording Passcode: P4RLE7.r

This week’s presentation

this week’s assignment was to create a Style Guide in PDF form, and then implement it in CSS on your resume page, and to do a version 2 of your wireframes based on feedback from your classmates.