How to build consistent looking containers on your website ITW-EB pt3

Опубликовано: 03 Апрель 2021
на канале: Zen

730

Hi and welcome to this video on How to build the containers for your website and stay consistent. This video is part of the ITW easy build series and it is the true start of building a webpage.

This video is centred around creating the card container system (the sections of your page that will actually hold the text and images) for the home page of the Into The WIld demo website.

Links:
Files for this video: http://tiny.cc/itw3card
Zenpen Drive videos:    • pendrive  101
Designing Into The Wild in Figma series:    • Figma: Into the wild design
Coding Into the wild Easy Build series :    • Into The Wild Website Easy Build Series

Chapters:

0:00 Video intro
2:10 Build overview
3:46 Create the cards.css file and index.php
5:16 Creating the card class
6:26 Using Figma to get the card values
7:24 Why max width and min height
8:00 Medium and small card CSS challenge
8:42 Creating the large card HTML
9:40 Creating the medium card HTML
11:00 Hiding the back of the card via CSS
11:50 Creating the small cards HTML challenge
12:33 Fixing the whoopsie
13:10 Looking a the centre alignment issue of the large cards
14:10 How to fix the positioning of the medium cards
18:33 Small cards placement challenge and answers
20:49 The collapsed margin issue and fix
22:53 Video wrap up