CSS Grid resources

Ryan was kind enough to give us a demo of CSS Grid in class on Nov. 21. He recommended these resources for learning to use grid layouts:

.

Advertisements

Using a background image

In your final project, some of you may want to use images in ways that seem awkward at first. Maybe you have forgotten that an image can be used as a background for any container-type element in HTML: a div, an article, a section, etc.

Here’s an example of the same image (one image) used to “cover” the background of three different-sized divs, with the image centered in each case. This is done with CSS. Robbins explained this where she talked about the background property in CSS.

Notice how I wrote white text over top of the image using normal HTML <p> tags.

Here’s the code (HTML and CSS only) for that example.

You’ll notice that Codepen is a site similar to jsFiddle, only more beautiful. It’s a good place for searching for solutions to tricky CSS and Bootstrap problems you need to solve. Just make sure you link to the exact Pen you used if you copy any code from Codepen! You may also embed the URL to the Pen in your CSS or JavaScript as a comment.

Do not steal code and fail to give credit to where you found it. Always include a complete URL for any copied code so that you don’t break the plagiarism rules.

Final Project Details 2017

In the week of Nov. 13–17, we will have our last quiz, and you’ll turn in your last weekly assignment.

That’s also the week when your project work begins!

The project has several deadlines. You are graded on EACH deadline, and you cannot make them up later.

  • Sun Nov 12 – Project proposal due
  • Tue Nov 28 AND Tue Dec 5 – Project presentations in class
  • Sun Nov 26 – Project Week 1 due
  • Fri Dec 1 – Project Week 2 due
  • Fri Dec 8 – Project Week 3 due
  • Mon Dec 11 (finals week) – Project Final due – posted on your own website (not GitHub)

During this time there are no quizzes or other assignments. Class continues to meet, and attendance will be taken. Friday workshop hours will be discontinued with one exception: On Friday, Dec. 8, I will be available if you tell me in advance you want to come in. Classes end on Dec. 6. Our class WILL meet on Tuesday, Dec. 5 (and we may need to move to a different room that day; I will tell you closer to that date).

Inspiration

Design examples

What is a good project?

Above all, I want you to create a web apps project that will be a great addition to your personal portfolio.

Your project must be about something, or it helps the users to do something. Before you choose the subject, imagine showing it in a job interview. The person interviewing you will probably ask WHY you built an app about this topic. Now, I can imagine two different ideas in that person’s head: (1) “Why in the world would anyone make a web app about this?” Or: (2) “Interesting! I wonder why he/she picked this?” That (1) is a pretty negative thought, and it’s not what you want that person to be thinking! So aim for (2) when you plan your app, and be able to answer the question.

Here are criteria for your project:

  1. Your project must NOT be a personal website, a website about you or a friend or a small business, or a resume or portfolio website.
  2. It must use HTML, CSS and JavaScript.
  3. All images must be fully legal to use and fully attributed and linked (if they are your own images, made by you, that fact must be explicitly stated in text that is visible on your page).
  4. Any videos, music, maps, charts, illustrations, etc., that you use must be fully attributed and linked to their sources. No copyrights can be violated. Plagiarism rules from this course’s syllabus ARE in effect.
  5. JavaScript must be included in a way that is useful. Including Highcharts charts and/or Leaflet maps qualifies as useful JavaScript, but those are not the only ways we can use JavaScript. You could create a game or a quiz from scratch. You could use a JavaScript library for animations. There are lots of possibilities. (You are not required to include Highcharts charts and/or Leaflet maps.)
  6. Interactivity is expected. Your users should not just be staring at text and images. They should be able to DO THINGS on your page.
  7. All pages are fully responsive. I will test them at very large widths and very small widths, and also for iPhone 6 in the Chrome Dev Tools.
  8. Your app may include more than one page, but many web apps today are completely contained on just one page. In fact, it is more common nowadays to see a one-page app. So I encourage you to create a one-page app that demonstrates current best practices in web design.
  9. You MAY use Bootstrap, but it is not required. If you do not use Bootstrap, you will still be held to professional standards of design, including: correct font stacks; fully responsive design; accessibility of images and form controls; page layout with thoughtful spacing and arrangement of elements.
  10. If you use Bootstrap, you MAY use a free or paid theme. Using a Bootstrap theme is NOT easy; you will learn lots of new things if you try this (just Google bootstrap themes). Once you have mastered a Bootstrap theme, you have a new and very valuable skill. Make sure any theme you use is specifically for Bootstrap 4. Whether you use a theme or not, you will be graded on correct use of Bootstrap styles.

If you have questions about the project, please post them HERE as a reply to this post.

Examples of Bootstrap apps

Building personal projects is the best way to get better at code and front-end development. Here are two personal projects I made with Bootstrap 3 (note: NOT 4 — they are older).

You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.

The reason I chose to use Bootstrap for each of those projects was because my main aim was to work with JavaScript and handling data, so I did not want to spend a lot of time thinking out the design and writing CSS. That’s exactly the kind of project for which Bootstrap is great!

Each of the examples also has a README at GitHub if you’re curious about the why and how of it.

Plain talk about file names

There are a lot of conventions in web design and development, meaning “the typical ways things are done.” When you don’t follow the conventions, sometimes it would make a hiring person scratch her head and wonder why you don’t do things in the typical way.

The way we name files and folders in websites and apps follows some conventions. Some of these make a huge difference, and some are just for convenience.

  1. The primary HTML file on a site, or in a subject folder, is named index.html. This is more than just a convention — the browser will open that file automatically if it is left off the end of the URL. Examples:
    https://weimergeeks.com/ (index.html at top level of site opens)
    https://weimergeeks.com/examples/ (index.html in the /examples/ folder opens)
  2. The primary CSS file for a site or a project usually has a name that indicates its status as the main CSS for the site. Thus many web developers would name it main.css, or possibly styles.css. Some people like to name it default.css or site.css. When you have different projects, you will likely name the style files to match the project name. Look in the /css/ folder here to see examples.
  3. Note that a JavaScript library — such as Highcharts — often includes its own CSS file. Typically, that file is named after the library — highcharts.css, for example. Thus you should NOT name your personal CSS file the same name as a library you are using. It might create problems, later if not immediately.
  4. Your folder names in a web project should clearly indicate the contents of the folder. All images are typically inside a folder named /images/. The CSS files are often inside a folder named /css/. but (alternatively) may be inside a folder named /styles/. The JavaScript files are often inside a folder named /js/. but (alternatively) may be inside a folder named /scripts/.

As you continue learning and exploring other people’s projects, you will probably see folders named assets, modules, components, model, view — these will contain components that make the site or app work, rather than pure HTML files.

Remember:

  • Filenames and folder names NEVER have spaces in them.
  • They contain no punctuation other than possibly an underscore or a hyphen.
  • Do not use uppercase letters in filenames or folder names.
  • All files have a file extension — .html, .css, .jpg, .png, etc.
  • The only dot in a filename is the one at the start of the file extension.

Follow the conventions, and your work will be easier!

JavaScript tips for Assignment 6

Until now, you’ve been using two markup languages, HTML and CSS. This week, you’ll begin using JavaScript, a programming language.

Markup languages change how things look.

A programming language makes things happen.

I’ve given you lots of resources for getting started with JavaScript.

This post provides a quick reference related to the assignment.

  1. What is a variable? How does it work? Watch this video. Also see Robbins, pages 465–466.
  2. What are the alert, prompt, and confirm dialogs? See figure 19-5 on page 464 in Robbins.
  3. How do I use the JavaScript console? Same video, at the 1:00 mark. Note: Use Chrome.
  4. How do I change the value of a variable? Same video.
  5. How can I use alert, prompt, and confirm dialogs? That’s in this video, at the beginning.
  6. What is an if-statement, and how can I use one? See Robbins, pages 470–471, and this video, starting at 6:59. This shows you everything a beginner needs to understand a basic if-statement in JavaScript.
  7. What is an array? Watch this video. See Robbins, page 468.
  8. What is a for-loop and how does it work? See this video at 6:54. See Robbins, pages 471–473.
  9. For-loops are continued in this video. How to loop over an array is specifically shown around 2:53 in that video.

NOTE that when you write console.log() in JavaScript, the string or instructions in parentheses will ONLY be seen in the JavaScript console. If you want something to appear in an alert, confirm or prompt dialog, you cannot use console.log() in your code.

One final note about this assignment: The point is NOT to teach you how to use alert, confirm and prompt dialogs. The point is to teach you how to use variables and arrays, which contain values that can be changed, and to use if-statements and for-loops to get work done.

Tips for Assignment 4 (CSS 2)

Be sure to also read this.

Common mistakes on Assignment 4:

  1. If you start Part 2 before Part 1 is perfect and finished, you are making extra work for yourself.
  2. You forgot to put box-sizing: border-box; into a CSS rule that includes margin and/or padding.
  3. You used a width in pixels where a width in percentage would work better.
  4. You did not clear your floats correctly.
  5. You added too many declarations in a rule for one element. Less works better. Try to use the minimum possible to achieve what you want.
  6. If your background color inside an element has “collapsed,” read the “TIPS” note under Part 2 (3.b) in the assignment.
  7. text-align: center; is ONLY for text. Never use it to center an image or any other element.
  8. You forgot that head, header, and h1 are all very different things in HTML.
  9. We will never, ever use any color words in CSS. We use only hex codes for all colors.
  10. We will never put CSS into the HTML file. CSS stays in its own file with the .css extension.

Updates inspired during class:

  • If you’re having trouble with the header color being too narrow (top to bottom), have you specified a background color for the header?
  • Floating left and right: Again, this concerns the header (and h1 and nav). Even though you’re working on Part 1, read the “TIPS” note under Part 2 (3.b) in the assignment.
  • Clearing floats: You do not need to add a class or an id to the HTML to clear floats. Just add the clear property into the rule for the appropriate selector in your CSS.
  • Trying to add some space below the white article box in Part 1? Using margin on the article element won’t work, because of margin collapse. Try adding padding-bottom to a different element.

Week 5: Sept. 18–22 (more CSS)

The videos this week will be very helpful for your homework — Assignment 4 — because I show you how to do all of the things that are required in the homework.

Margin, padding, and floats can become very difficult and very badly messed up if you apply them willy-nilly in your CSS. So take the time to watch me make HTML elements (such as div and article) behave exactly as I want them to, and you’ll be able to do the same.

Here’s the video list for this week.

Screen Shot 2017-09-17 at 2.22.58 PM

These CSS skills are covered in the Robbins book as well, but sometimes seeing the results in a video is better than just reading about the way the CSS properties work.

Hurricane week updates (week 4)

Unless I hear compelling arguments from students in this class, I’m going to keep the deadlines and the syllabus unchanged.

We will have workshop hours on Friday from noon until 4 p.m. in Weimer 3020.

Note, please, that Assignment 3 is going to take more time to complete than the previous assignments.

You’re starting to use CSS on this assignment. Right now we are focused on using the background and color properties correctly. We have not yet covered fonts, margin, padding, and many other elements of CSS. Do not use what we have not covered.

The assignment requires you to use several HTML tags we have not used before: article, aside, header, footer, figure, and figurecap. It’s important that you use them correctly, as instructed in the assignment.

I sent a lengthy email to the class Listserv earlier today. Check your UF email to find it.