This isa series of videos that walk through the process of moving your site from the HTML/CSS Responsive site to an 11ty site. Part 1 Set Up Creating the Eleventy Repository and setting up GitPod as the editor. Part 2: Create Markdown Files Create a Markdown file for each of the HTML files in your… Continue reading Convert Responsive Site to 11ty
Category: Projects
Eleventy Configuration
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. What do Configuration (config) files do? What is their role in the Build Process? Configuration files use Javascript to root directory of a project to configure Eleventy to a person’s own… Continue reading Eleventy Configuration
Eleventy Content Pages
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. Where are Content pages saved in the 11ty folder structure? The content pages are saved in the Markdown. What is Front Matter and What kind of information is stored there? The… Continue reading Eleventy Content Pages
Templates
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. What are Templates? A template is a reusable format for web content. How are Templates used in Eleventy? It use to avoid writing the same formatting over and over. What Language… Continue reading Templates
Static Site Generators
The content on this page is created by you in group sessions. The questions are provided by Prof Stein and the answers by students. What is a Static Site Generator (SSG)? What does it do? A tool that generates a full static HTML website based on raw data and set of templates What are some… Continue reading Static Site Generators
Deploy to Netlify
This post covers how to get your site in the web using Netlify’s servers. Terminology Some words you might not know Netlify: Netlify is a hosting platform specializing in hosting projects build with workflows like ours (static site generator and GitHub). They have a generous free pricing tier that is great for the kind of… Continue reading Deploy to Netlify
Responsive Navigation
There are a large number of ways to do responsive navigation. This post contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste.
Publish with GitHub Pages
Actually putting your site on the web where anyone can see it is called publishing your site. This post describes how to publish a site using GitHub Pages. Pages are a free feature of public GitHub repositories and a great way to host a basic site. Free web hosting through GitHub! 1. Click on the Settings… Continue reading Publish with GitHub Pages
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
Submitting the Responsive Site
Here is what you will need to do to submit your responsive site Publish the site with GitHub Pages View your published site in your browser. Copy the URL. It should be something like https://your-user-name.github.io/your-project-name Go to Blackboard for our course Click on Assignments > Responsive Site Paste in your URL in the text area… Continue reading Submitting the Responsive Site
Portfolio Project: Research
Doing research should be part of all web projects. For your portfolio projects you will need to do research to help you with determining your: Portfolio Content (what work you include) Organization of pages and content Design inspiration (type, colors, UI etc) Tone/mood inspiration There will be a section on the Portfolio Brief that requires… Continue reading Portfolio Project: Research
Dynamic UI with jQuery
This is a step-by-step guide to using jQuery in a project. We will use [0] Setup Create GitHub Repo from Template Go to the Github Template Click the green Use this Template button. Go through the steps to finish creating your version of the repository. Remember the name you gave the repository. Open the Repository… Continue reading Dynamic UI with jQuery
Submitting the Eleventy Site
Here is what you will need to do to submit your Eleventy site Push all of your files to your GitHub Repository. Deploy your site to Netlify Copy the URL. It should be something like https://yourproject.netlify.app Note: by default Netlify will give you a wierd project name that is a combination of words and letters… Continue reading Submitting the Eleventy Site
Submitting the Portfolio Brief
Instructions on how to submit your Portfolio Brief. Format Please submit your brief as a single PDF file. I suggest using Microsoft Word or Google docs to create it and then exporting as PDF. You will most likely use some other tool (Figma, XD, etc) to create your wireframes and site map. Export an image… Continue reading Submitting the Portfolio Brief
