Laurent Perrier

Programming with PHP Laravel & Vue.js

The Blog #4 - Making The Layout Responsive

In the fourth episode of this series, we'll be making our blog layout responsive so that it looks good at any resolution and on smaller devices. I'll share how I choose breakpoints and a few other tricks that help with responsive website development and media queries.

September 5, 2017
Use Flexbox To Create A Website Layout

If you’re not familiar with Flexbox, it’s a set of CSS properties that make it easy to style websites and position elements on a page. You can use it instead of floats, or table layouts, both of which are pretty awful to use.

In this video, we'll be creating a website layout using flexbox for a fictitious company that specializes in cars, solar roofs, tunneling, as well as some space exploration on the side.

August 21, 2017
How It's Made - The Stripe Navigation (Part 2)

This is the second part of a series on recreating design elements from the Stripe homepage.

In today's video we'll be tackling the header navigation which is one of the most dynamic part of the page. We'll be using Sass, Vue.js and a bajillion CSS transitions to recreate all the swinging, sliding and resizing animations.

To keep things a little simpler, we will be handling the horizontal resizing, but not the vertical resizing. The process to animate the height and width are pretty much the same so it shouldn't be too hard to figure out once you've watched the video.

August 18, 2017
The Blog #3 - Sticky Sidebar With Vue.js

In the third episode of this series, we'll be using Vue.js to keep our blog's sidebar post visible as we scroll down the page. We'll be using dynamic class bindings to position the sidebar depending on its height, the window's height, and the scroll position.

August 12, 2017
How It's Made - The Stripe Homepage (Part 1)

This is a new series where we'll recreate designs and features from popular websites. We'll be using Laravel as the backend framework, Sass for the CSS, and Vue.js for the JavaScript.

The first website we'll be working with is the Stripe homepage. There's a lot of interesting things going on there, but for this episode we'll start by focusing on recreating the header's background.

August 10, 2017