ReactJs CSS3 Flexbox Media Queries Bootstrap with 4 Projects | Free Udemy Course

In the course, you will learn all the concepts of flexbox and media queries.We will learn all the concepts with the help of code examples.Following are the topics we will cover:1.1-Installing VS Code and Server extension1.2-Introduction to Flexbox1.3-Setup index.html and style.css files1.4- Reset margin padding box-sizing on universal operator1.5-Styling the Boxes1.6-Apply display flex on parent1.7-Flex Direction row row-reverse column column-reverse1.8-Flex grow shrink2.1-Justify Content Flex Start2.2-Justify Content Flex End2.3-Justify Content Center2.4-Justify Content Space-Around2.5-Justify Content Space-Between3.1-Why you should not use Float property3.2-Align Item Flex End3.3-Align Item Flex Start3.4-Align Item Center3.5-Flex Basis same as Width on Flex Item4.1-Responsivesness with Media Query4.2-Flex Wrap Layout Creation4.3-Styling the Flex layout4.4-Making Screen Responsive with Flex Wrap4.5-Enhancing the responsiveness1.1-What is meant by Responsiveness1.2-Example Non_responsive website1.3-Creating HTML Skeleton for non-responsive website1.4-Styling the non responsive page2.1-Different Device break points2.2-Make Responsive in device upto 768px2.3-Make Responsive for device width upto 468px2.4-Make Responsive for device width above 1024px2.5-Making Responsive between 769px and 1023pxCreating account on GithubInstalling Git bashCreating github token and connecting from localUsing git commands to commit and push our local codeYou will get the complete source codeIn this course, you will learn all the concepts of CSS3 and ReactJs that will not only help you build real-world projects but also enable you to start thinking about how to design and develop a frontend that will be responsive and production-grade.You will be learning all the basics of developing components in React and moving on to learning complex topics like static and dynamic routing.We will be building 3 projects:Project One - Responsive Portfolio WebsiteProject Layout SetupWorking on the Menu OutlineStyling the Menu section Part - 1Styling the Menu section Part - 2Styling the Menu section Part - 3Styling the Body section Part - 1Styling the Body section Part - 2Making the website responsiveProject Two - Stylish Our Services SectionSetting up the skeletonWorking on the markup and layoutWorking on styling and responsivenessProject Three - Property Listing Marketplace websiteGithub-Repo-Local-SetupCreate-react-appCode-CleanupAdding-Google fontsReact-How-it-works-VSC-ExtensionCreating-TopBar-ComponentUnderstanding-JSXStyling-TopBar-Part-1Styling-TopBar-Part-2Adding-Fontawesome-Styling-TopBar-Part-3Styling-TopBar-Part-4Styling-TopBar-Part-5Styling-TopBar-Part-6Styling-Hero-Section-Part-1Styling-Hero-Section-Part-2Styling-Hero-Section-Part-3Styling-Hero-Section-Part-4Styling-Sidebar-Section-Part-1Styling-Sidebar-Section-Part-2Styling-Sidebar-Section-Part-3Styling-Sidebar-Section-Part-4Styling-Sidebar-Section-Part-5Styling-Sidebar-Section-Part-6Styling-Sidebar-Section-Part-7Working on Listing Item componentUsing CSS variablesWorking on Listing Overview screenStyling Listing Item category and time sectionStyling Listing Item description sectionWorking on layout of Listing Detail componentAdding sidebar on Listing Detail pageStyling the Listing Detail pageWorking on Listing Detail page meta data sectionStyling the image section of Listing Detail pageStyling Title and Action section of Listing PageStyling the Author and Post time section of Listing Detail pageStyling the Description section of Listing Detail pageStyling the first letter of Description on Listing Detail pageSetting up Layout for Create Listing pageWorking on Create Listing pageWorking on upload Icon on Create Listing pageStyling the Create Listing pageInstalling React Router Dom library for routing between componentsAdding Navigation and Routing for menu itemsDynamic navigation for showing property detailYou will also get the complete source code of all three projects that will help you take a reference whenever you want.Who this course is for:Any one who wants to learn how to create responsive website and Professional Frontend UI developer

Course Content:

Sections are minimized for better readability, click the section title to view the course content