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

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

Date: 2 May 2023 | Posted by: voska89

Published 4/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 16.19 GB | Duration: 29h 26m
Design social media, YouTube-like, Instagram-like website with Grid & Flex - Learn how to manipulate CSS properties.

Free Download 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

Homepage

https://www.udemy.com/course/build-social-media-videotube-webgram-with-css-gridflex/

DOWNLOAD LINK

Links are Interchangeable - Single Extraction

See full article