Build Social Media, Videotube & Webgram With Css Grid&Flex

Design social media, YouTube-like, Instagram-like website with Grid & Flex - Learn how to manipulate CSS properties.

What you'll learn

Build Social media website, Video Tube, Social gram and a corporate website

Gain more clarity on how to design industry standard and modern websites

Understand how to ensure ALL web layouts have mobile design from large screen to very small screen

Manipulate CSS Grid properties to build real-world web layouts

Manipulate CSS Flexbox properties to build modern web layouts

Learn how to fix code errors if you bump into them

Requirements

You need to have a basic knowledge of CSS properties, CSS Grid and Flexbox

You will need to have a text editor to code along with me - e.g. Visual Studio (which I will be using), Sublime Text, Notepad++, Brackets

You will need a functional device to watch the lessons and viable internet and a web browser

Description

Are looking to learn Web Design projects with Grid and Flexbox? Do you want to build standard web layout projects and upgrade your skills in CSS properties, CSS Grid and CSS Flexbox? Then this is the RIGHT COURSE for you! This is an impressive and comprehensive course. EVERY CONCEPT you need to know how to layout crisp and modern web designs will be explained step by step.You will practically and creatively learn how to build/design a responsive:(1) Social media websites (Instagram-like and Facebook-like website)(2) Video Tube website (YouTube-like website)(3) Corporate websitePamchTutor is here to teach you how to manipulate CSS properties like Absolute, Relative, Sticky, Fixed Positioning. You will also learn how to create RESPONSIVE Navigation Bars with drop down menus. As if that is not enough, you will learn how to use FLEX BASIS, GAP,  GRID-AUTO-ROWS, MINMAX(), REPEAT(), AUTO-FILL/AUTO-FIT, JUSTIFY-CONTENTS, ALIGN-CONTENTS, GRID-COLUMN, GRID-ROW, MEDIA QUERIES. In this awesome course you will build practical web designs. All the projects will be well explained, appropriately discussed and taken step by step. This web design layouts will be well structured step-by-step.Get started today and begin a new journey to gain new perspective on how to design responsive and industry ready and premium websites. It is time to learn how to design A WHOLE LOT of web design layouts by yourself.After finishing this SIMPLIFIED and PRACTICAL COURSE, you will be skilled on how to take on any challenge to build ready-to-launch, responsive, comprehensive, and professional websites that comes to your mind.

Overview

Section 1: Introduction

Lecture 1 Course Introduction

Lecture 2 A Caveat

Section 2: Social Media Project

Lecture 3 Introduction to Social Media Project

Lecture 4 Setting up for the project

Lecture 5 Basic structure of the navigation

Lecture 6 Structuring the Navigation

Lecture 7 Adding Font Awesome to the navigation

Lecture 8 Styling the search bar

Lecture 9 Styling the sideMenu and online icon

Lecture 10 8. Creating the submenu drop down

Lecture 11 Styling the icons in the submenu

Lecture 12 Styling the submenu-1

Lecture 13 Styling the submenu of sideMenu

Lecture 14 Responsiveness of Navigation - Part 1

Lecture 15 Responsiveness of Navigation - Part 2

Lecture 16 Responsiveness of Navigation - Part 3

Lecture 17 Responsiveness of Navigation - Part 4

Lecture 18 Responsiveness of Navigation - Part 5

Lecture 19 Responsiveness of Navigation - Part 6

Lecture 20 Responsiveness of Navigation - Part 7

Lecture 21 Structuring the Web Layout Content

Lecture 22 Styling the Web Layout with Flex

Lecture 23 Styling the Footer

Lecture 24 Styling the Web Layout with Grid

Lecture 25 Understanding 'auto' in a Grid item and flex item

Lecture 26 Responsiveness of the Layout - Part 1

Lecture 27 Responsiveness of the Layout - Part 2

Lecture 28 Responsiveness of the Layout - Part 3

Lecture 29 Rounding up Responsiveness of Layout

Lecture 30 Main Content - Story Line - Part 1

Lecture 31 Main Content - Story Line - Part 2

Lecture 32 Main Content - Story Line - Part 3

Lecture 33 Main Content - Post Line - Part 1

Lecture 34 Main Content - Adding Unicode to

Lecture 35 Main Content - Post Line - Part 2

Lecture 36 Main Content - Post Line - Part 3

Lecture 37 Main Content - Write Posted - Part 1

Lecture 38 Main Content - Write Posted - Part 2

Lecture 39 Main Content - Write Posted - Part 3

Lecture 40 Main Content - Write Posted - Part 4

Lecture 41 Left Content

Lecture 42 Right Content - Part 1

Lecture 43 Right Content - Part 2

Lecture 44 Right Content - Part 3

Lecture 45 Right Content - Part 4

Lecture 46 Right Content - Part 5

Lecture 47 SocialSite Project Wrap Up

Section 3: Video Tube Project

Lecture 48 Introduction to VideoTube Project

Lecture 49 Creating a basic structure

Lecture 50 Basic grid layout and scrollbar track

Lecture 51 The grid layout of the site

Lecture 52 Responsiveness of the grid layout

Lecture 53 Inserting top video and content paragraph

Lecture 54 Structuring the user profile

Lecture 55 Styling the user profile and image-side

Lecture 56 Styling the likes-side

Lecture 57 Styling the ellipsis and the responsiveness of user-profile

Lecture 58 Building and styling the views

Lecture 59 Show Less-Show More

Lecture 60 Chapters

Lecture 61 Aside Videos - Part 1

Lecture 62 Aside Videos - Part 2

Lecture 63 Aside Videos - Creating duplicates of videos

Lecture 64 Structuring the Comments

Lecture 65 Styling the Comments

Lecture 66 Comments - creating duplicates of comments

Lecture 67 Navigation structure - part 1

Lecture 68 Navigation structure - part 2

Lecture 69 22. Navigation styling - part 1

Lecture 70 22. Navigation styling - part 2

Lecture 71 Responsiveness of Navigation - Part 1

Lecture 72 Responsiveness of Navigation - Part 2

Section 4: Corporate Site Project

Lecture 73 Basic Structure of the site

Lecture 74 Navigation and slider grid layout

Lecture 75 Whole page GRID layout

Lecture 76 Spanning and arranging the grid items

Lecture 77 Footer grid layout

Lecture 78 Structuring the Navbar

Lecture 79 Styling the navbar

Lecture 80 Responsiveness of navbar

Lecture 81 Structuring the slider

Lecture 82 Styling the slider - part 1

Lecture 83 Styling the slider - part 2

Lecture 84 Structuring and styling the contents in the page

Lecture 85 Duplicating the contents in the page

Lecture 86 Footer Styling

Lecture 87 Making some adjustments to navigation

Lecture 88 Animated circles - part 1

Lecture 89 Animated circles - part 2

Lecture 90 Fixing the content with minmax()

Section 5: PAMCHGram Project

Lecture 91 Introduction to pamchgram project

Lecture 92 Basic Structure of the site

Lecture 93 Structuring the navigation

Lecture 94 Styling the Navigation

Lecture 95 Responsiveness of the Navigation

Lecture 96 Layout of the top profile and GRID picture part

Lecture 97 Creating the top profile GRID layout

Lecture 98 Structuring and Styling the picture-img

Lecture 99 Structuring and Styling the top-name

Lecture 100 Structuring and Styling the top-followers

Lecture 101 Structuring and Styling the top-intro

Lecture 102 Structuring and Styling the reels-part

Lecture 103 Structuring and Styling the icon-boxes

Lecture 104 Responsiveness of the Top GRID layout

Lecture 105 Responsiveness of the Top profile

Lecture 106 Responsiveness of the icon-boxes

Lecture 107 Structuring and styling the image in gallery

Lecture 108 Overlay effect on image

Lecture 109 Creating duplicate of images into a wrap

Lecture 110 Responsiveness of the pictures - Part 1

Lecture 111 Responsiveness of the pictures - Part 2

Lecture 112 Finishing touches

Lecture 113 Class Extension

An intermediate learner of CSS properties, CSS Grid and Flexbox who wants to gain more clarity on how to design industry standard websites,A ready to learn enthusiast of web design,A creative mind who loves to learn step by step