Creating the Navigation
All of this properties we've been talking about, the positioning, the display types, we're going to use for creating the navigation system for our site. And if we remember back to the demonstration, we have an app system which we'll open up real quick. Where when we hover over certain items, like recipes for example, we have a menu system that drops down. We're going to be creating this by using an unordered list and nesting one list inside of another list. So, the top items of our list will become the navigation pieces across the top. The sub items will be the navigation pieces inside of the top level bullet list. So again, and this is just the bullet list and we look at those more sensibly in our introduction class. So let's switch back to our html file. Let's scroll up, lets find our nav element. I'm going to add a bunch of spaces here just we can really focus on just the navigation here. Let's go back to our snippets files, so we'll go back to our project files. Let's find the file...
What happens after your web design comp is approved? How do you create the web graphics from Photoshop, Illustrator, or Sketch? How is design translated to HTML and CSS?
This course will walk you through the process of evaluating, planning, and creating a web page from a design comp. We’ll explore strategies for setting up your HTML, slicing and saving web graphics, and applying CSS rules that will re-create your design vision in a browser.
When we’re finished, we’ll have a working web page that will respond to varying screen sizes, as well as paper. Choose to follow along with the video, with the provided project files, or simply evaluate the final project as you watch the instructor.
What you’ll learn:
- How to evaluate aspects of a design for conversion
- How to structure the HTML
- To make decisions how the graphics should be created
- What graphical formats you should use
- How to add fonts and style text in CSS
- Using CSS for layout
- Incorporating graphics with HTML and CSS
- Using media queries for screens and paper
Software Used: Panic Coda 2017