In this practice, you will learn how to create a webpage shown in the following.
But first, you must visualize the layout as boxes, so we can analyze how many division <div> we will need.
Download Files to Start
You may want to start by going to Terminal to access the files for this practice at Github
You can use git and type the following in your VS Code Integrated Terminal
git clone https://github.com/peihwee/css-flex-startOnce you got the files, you can continue to watch and follow the lessons from the videos below.
Step 1
Setting Basic Structure
In the following video, you will learn how to setup the structure and divisions for the layout.
Step 2
Add in the Contents
In the following video, you will learn how to add the contents and use CSS for layout.
Step 3
Using CSS Flexbox
In the following video, you will learn how to use CSS Flexbox to make the banner and the navigation.
Step 4
Layout of Images
In the following video, you will learn how to CSS Flexbox to layout the images.
Comments