This week we will dive into Eleventy and converting your projects to 11ty. Thursday 3/16 Activity 1: Converting Static Site to 11ty Today we will focus on moving your Responsive Personal Sites (static sites) to Eleventy. To help you make sure you’re doing what you need to do and so that I can keep track… Continue reading Week 8: 3/14 + 3/16
Category: Responsive Site
Submitting the Responsive Site
You should be working on your site through the repository you created in GitHub Classroom. Those repositories are private so you will not be able to use GitHub Pages to show the site. Instead, when you submit the site you will give the link to the repository and answer a couple of questions listed below.… Continue reading Submitting the Responsive Site
Week 4: 2/14 + 2/16
This week we will work on your Responsive Personal Site projects focusing on writing HTML and CSS, Responsive Design Basics and some design concepts. JOIN LIVE SESSION Thursday 2/16 Activity 1: CSS Grid We will continue to look at how to Style with CSS Grid Activity 2: Responsive Web Design Concepts Responsive Web Design was… Continue reading Week 4: 2/14 + 2/16
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 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
Media Queries
In order to have a fully responsive web page you need three things: We have already covered Fluid Layout. When you use FR units (grid-template-columns: 1fr 1fr; ) you are creating a fluid layout. This post outlines the third item, Media Queries. Media Queries are CSS rules that allow you to apply CSS styles only… Continue reading Media Queries
Week 3: 2/7 + 2/9
JOIN LIVE SESSION Thursday 2/9 Activity 1: Portfolio Wireframes We will use a Miro (I will share the link in class as you can edit it) to get you started on your wireframes for your portfolios. After you have some time to work on your wireframes we will break into pairs to review and then… Continue reading Week 3: 2/7 + 2/9
