Even for one-page websites, a navigation menu can be used to navigate to parts of the page. In this video, see how to add a menu to your project.
- [Instructor] Back in our projects,…let's add a navigation to the top of the page.…Even though it's only a one page website,…we can use the id attribute to link…to specific parts of the page.…You can use the markup from our previous JSFiddle example.…Just remember to remove the class display or float.…Let's go back to the editor and add the nav to the html.…Semantically, it's okay to put the nav…within the header element or outside of it.…I'm going to put mine inside the header,…right after the opening header tag.…
I'm going to take a moment to make sure…my indentation lines up properly…and I'll remove this example display class.…I'm also going to update Work to Work Experience.…Next we'll add some id attributes…to create some in page linking to navigate…to certain parts of the page.…So, while we're still in the nav html,…let's add the values first.…I'm going to give my About link a value of about,…work for Work Experience, education and content.…
Now in each respective section,…I'll need to add a corresponding id.…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.