Here is the process to deploy your project to Netlify. STEP 1: Create GitHub Repository You should already have this, but you will need a GitHub repository with all of the Eleventy files STEP 2: Ready Your Project Install Eleventy in Your Project You haven’t had to do this before because most of us installed… Continue reading Deploy to Netlify
Category: Topics
Week 14: 5/10 + 5/12
Before Class Work on your Final Projects and come with questions. Live Sessions JOIN LIVE SESSION Session 1:Final Workshop Monday, May 10 at 7:30p–9:10p Monday we will answer questions that you have. I have also made some more tutorials that are linked to below. Links for Monday Session Collaborate with GitHub Dynamic Lists and Pages… Continue reading Week 14: 5/10 + 5/12
From a Data File: show list of items and create pages
These two videos show you how to create a list of items that are in a data file (a list of images in this case) and then also to dynamically generate pages from that data file. This is similar to what we did in class with the Clients pages. These work with the eleventy starter… Continue reading From a Data File: show list of items and create pages
Collaborate on GitHub
Here are some of the basics for collaborating on GitHub. Use a Single, Shared Repository One of the people in the group will create the repository that everyone will use. After the Repository is created then invite the other members to collaborate on that. DO NOT FORK THE REPOSITORY. We did that with mine and… Continue reading Collaborate on GitHub
Creating HTML from Wireframes
When making your web site you need to create HTML that matches your wireframe diagrams. Perhaps the biggest lesson here is to make sure to that you have set up Page Structure elements (see HTML 5 Periodic Table) to match the page areas that you have outlined in your wireframes. Remember that for both CSS… Continue reading Creating HTML from Wireframes
Responsive Images and Video
Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example: The following needs to be in… Continue reading Responsive Images and Video
Icons
Icons are a good way to make your page easier to scan, communicate across languages and add visual interest to the site. Use them when they complement or add meaning to the text content and don’t overuse them on any individual page. Occasionally it’s OK to use them without text but generally they should be… Continue reading Icons
Week 13: 5/3 + 5/5
Before Class Work on your Final Projects and come with questions. Live Sessions JOIN LIVE SESSION Session 1:Maps and APIs Monday, May 3 at 7:30p–9:10p Monday we will go over Some of the basics for using APIs on the client side and using Leaflet.js Links for Monday Session Leaflet Quick Start Guide https://leafletjs.com/ Leaflet Layers… Continue reading Week 13: 5/3 + 5/5
Week 12: 4/26 + 4/28
Before Class Make sure you completed the learning journal from last week Live Sessions JOIN LIVE SESSION Session 1:Collections Monday, April 26 at 7:30p–9:10p Monday we will go over how to use Collections. We may also have time for a presentation and for you to work on your Final Projects. Links for Monday Session Miro:… Continue reading Week 12: 4/26 + 4/28
Eleventy
This post has information about how Eleventy works as well as links to all of the LinkedIn Learning course videos and our related class materials. Eleventy Course on LinkedIn Learning We have followed a long with the Building Serverless Apps with JamStack and Eleventy from LinkedIn Learning. This section lists all of the videos from… Continue reading Eleventy
JSON
WHAT Short for JavaScript Object Notation it is a data file for JavaScript programming that allows for data to be saved and exchanged. It’s written in plain text so you can read it with any program that lets you read text files. You can create JSON files to store and use data in your own… Continue reading JSON
Progress Check (week 4)
You can use this post to do a progress check. It lists the major concepts we have covered and activities you were asked to do. It also checks to see where you are with creating a habit of practice for our class. This is voluntary and something you mainly do for your own benefit. That… Continue reading Progress Check (week 4)
JavaScript Intro
These are some resources to help you got started with JavaScript LinkedIn Learning JavaScript Collection These three collections of videos are an introduction to JavaScript from what it is, why it is important to some of the basics. Watch these collections in order. I’ve collected these from a few different LinkedIn Learning video courses. JavaScript… Continue reading JavaScript Intro
One-Line Layouts
10 modern layouts in 1 line of CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. Article (written and video): https://web.dev/one-line-layouts/ Editable Demo Examples on Glitch: https://1linelayouts.glitch.me/ GitHub Repository: https://github.com/una/1linelayouts YouTube Video… Continue reading One-Line Layouts
HTML Resources and References
This is a link to some outside resources on HTML. HTML Essential Training View Course (LinkedIn Learning sign on required)This is a LinkedIn Learning Course by Jen Simmons who is one of the leading HTML and CSS Advocates. This course goes over everything in HTML. Most likely you will not go through the whole course.… Continue reading HTML Resources and References
CSS Resources and References
Here are some places where you can find out more about CSS Syntax, Selectors, Properties and Values. Mozilla Developers Network: MDN This site sets the standard as a reference for all things web. CSS: Cascading Style Sheets This is the main area for all things CSS at MDN CSS Syntax CSS Reference selectors syntax values… Continue reading CSS Resources and References
HTML Fundamentals Videos
This is a series of videos I made showing the fundamentals of HTML and how to write it. HTML Fundamentals Part 1 This covers the basics of what HTML is and it’s purpose. Duration: (11:10) HTML Fundamentals Part 2: How to Write HTML In this video I cover writing HTML and how tags are structured… Continue reading HTML Fundamentals Videos
HTML5 Periodic Table
This is an interactive site that helps you to view the different types of HTML elements. Clicking on the buttons on the top filters the elements. You should know all of the Core elements. Important sub-sets are: Setup: These elements set up the page so that it is ready. Most of these elements will be… Continue reading HTML5 Periodic Table
Issues with Homebrew
This is only for people with macs. When I was installing Git on my mac with Homebrew I ran into some issues. There were conflicts with it and some other versions I think and also some extra files that may have been from other things I had done. I’m putting this here in case it… Continue reading Issues with Homebrew
