Join Nigel French for an in-depth discussion in this video Set breakpoints, part of Designing a Portfolio Website with Muse.
- [Instructor] Okay, let's add the breakpoints…to the portfolio in progress.…And my intention here is to have two desktop breakpoints.…We have the one at 1200, I'm going to add…a second at around 1,000.…I'd like a tablet breakpoint that's going…to occur around 768, and this is for a tablet…that's in portrait view.…And a mobile breakpoint which will be at around 450.…The planning is all important here.…If we take a look at the home page,…I'll hide the guides on this,…you can see that a lot of the content is centered,…there are generous margins on the left and right.…
So as the browser width contracts,…it's the margins that are eaten up first…and the content remains relatively unaffected.…We can also apply responsive sizing where appropriate.…We can pin content to the left, to the center,…or to the right of the page.…And then we're going to need to adjust…certain elements of the layout…at different breakpoints.…So I'm going to use my breakpoint ruler…and drag this to the left and we'll see what happens.…
So there's a few things that are breaking down here.…
- Starting a new portfolio website
- Making a header and footer
- Adding navigation
- Including social media icons
- Adding an autoplay slideshow
- Making thumbnail images and buttons
- Creating an About page and a Contact page
- Linking pages together
- Creating an accordion menu
- Adding breakpoints for responsiveness
- Testing and publishing a website
Skill Level Intermediate
Creating Icon Fonts for the Webwith James Williamson3h 56m Intermediate
1. Plan Your Portfolio
2. Set Up Your Site in Muse
3. Display Your Work
4. Add Pages
5. Make Your Site Responsive
6. Publish the Site
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.