What is in this tutorial?
- Mobile-first design principles
- Learn how ‘vh’ viewport height works
- Learn how to vertically and horizontally center elements on page
- Writing jQuery script for collapsible navigation menu
- Applying parallax smooth scrolling jQuery script for single page navigation
- Applying Lightbox 2 jQuery effects to gallery
Please watch all videos below to complete the tutorial.
Best Results Watching Videos
Depending on the speed of your connection and size of your screen, you might want to increase or decrease the streaming resolution of the videos below. To do so, start the movie, and a gear icon will appear, which you can select and choose a different streaming quality. These were recorded at a max of 720p, so if you are on a fast connection, this might be your best choice for clarity on larger screens.
Part 01 (4:34)
Exercise 5 introduction and overview.
Part 02 (10:38)
Getting started: setting up HTML, basic CSS reset, and some base CSS text rules.
PLEASE NOTE: The “reset” file instructions in this tutorial take you to a place that has now started asking for an email address first to get to the content. You can instead copy and paste the reset code found on this page: https://meyerweb.com/eric/tools/css/reset/ . To use that code, copy it, make a new css file, paste it in there, save it in your project directory as “reset.css”, and then use the <link href=”reset.css” rel=”stylesheet”> element in the head of the HTML document to connect the two files.
Part 03 (14:59)
Setting the page header to be full-viewport introduction.
A SPECIAL NOTE:
This demo shows the use of the “vh” or “viewport height” unit of measurement, which is still in development on some modern browsers and many mobile browsers. After completing this video, you can avoid the “page-header” section collapsing in older versions of Safari by adding the following to the “section#page-header header” rule:
-webkit-padding-before: 25%;
-webkit-padding-after: 25%;
Part 04 (14:06)
Setting up the HTML/CSS foundation for mobile-first main navigation menu.
Part 05 (14:56)
Writing jQuery script to make main navigation menu functional.
Part 06 (14:59)
1) Adding final styles to nav menu
2) Adding jQuery ‘removeClass’ to nav links for intuitive functionality
3) Addressing progressive enhancement with ‘noscript’ feature
4) Testing page with JS disabled
Part 07 (14:49)
Adding the page content sections and their contents. Begins to address styling of the sections.
Part 08 (14:59)
1) Dealing with content headers diving up under the fixed ‘nav’ bar.
2) Adding more advanced content in ‘Skills’ section and styling for mobile-first approach.
Part 09 (14:57)
1) Adding svg icons to social media section of ‘Contact’ section.
2) Styling ‘Contact’ and ‘Portfolio’ gallery lists.
Part 10 (14:58)
1) Adding media queries to deal with larger screen sizes.
2) Adding parallax scrolling to the page with jQuery script. NOTE: since the video, an additional article was added to the css-tricks website. To follow this tutorial, use the code base in this link for the smooth scrolling effect:
https://css-tricks.com/snippets/jquery/smooth-scrolling/#article-header-id-1
Part 11 (14:49)
UPDATED 4/25/17 – Implementing ‘Lightbox 2’ jQuery script to portfolio gallery (part 1).
Part 12 (11:48)
1) Complete the addition of ‘LightBox 2’ implementation for gallery.
2) Discuss other ways of adding background variety to specific sections of the page.