There are a large number of ways to do responsive navigation. This page contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste. If you use one of these, add links to it in your Designed By page. Example 1: Responsive Nav Title and… Continue reading Responsive Navigation
Category: Projects
Week 7: 10/13
This week we will finish the Responsive Site and get started on being ready for Eleventy. The Responsive site will be submitted on Thursday, October 14 There is no class on Monday, October 11 due to a holiday. Before Class: LEARN DO THIS: Work on your project. Roughly in this order wireframes complete create HTML… Continue reading Week 7: 10/13
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
Media Queries
In order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units. This allows the layout to expand and contract to fit the width of the browser window. Flexible Media: images, video etc can also adjust their width… Continue reading Media Queries
Week 5: 9/27 + 9/29
This week we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work with GitHub. Before Class: LEARN… Continue reading Week 5: 9/27 + 9/29
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
