Join Nigel French for an in-depth discussion in this video Breakpoint considerations, part of Designing a Portfolio Website with Muse.
- [Instructor] Before we add additional breakpoints…to our portfolio in progress, I just want to go over…some of the issues that are going to come up…when we work across different breakpoints.…I'm going to come to my breakpoint ruler…and grab the gray bar and simulate…the size of the browser width.…And we can see a few things happening when I do this.…The picture and the turquoise rectangle,…those are both resizing in width and height.…The orange rectangle is not resizing.…Furthermore, its position is moving around,…it starts off as being centered,…and then it sort of wanders over to the right.…
The text is not resizing until we reach a certain point…when the size of the text container does resize,…not the size of the text itself.…To prevent this rectangle, which, let's imagine…this is a logo, we don't want it to resize,…if we want it to stay in the same position…relative to the page, then we can pin it.…In the case of the portfolio, we are pinning the header,…including the menu, to the top of the browser,…here I'm going to pin to the center of the page.…
- 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 55m 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?
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.