React, Context & Sass Build a Real World Responsive Website

In this video, I will give an overview of this section that what we will learn in this section.

In this video, we are going to create the folder structure for flexbox.

In this video, we are going to learn what is flexbox.

In this video, we are going to try flexbox practically.

In this video, we are going to talk about flex-wrap property.

In this video, we are going to talk about flex-direction property.

In this video, we are going to talk about flex align horizontal, that how we can align items horizontal using flexbox.

In this video, we are learning how to align items vertically using flexbox.

In this video, I will give an overview of this section that what we will learn in this section.

In this video, we are going to set up an environment for sass/scss.

In this video, we are going to compile SCSS code to pure CSS.

In this video, we are going to talk about SCSS/SASS variables.

In this video, I will show the basic difference between SASS and SCSS.

In this video, we will talk about SCSS partials, Partials are SCSS files with the help of partials we can divide our code into different parts.

In this video, we are going to access SCSS variables in partial.

In this video, we are going to talk about SCSS nested rules, with the help of nested rules we can nest childs in parent class.

In this video, we are going to talk about BEM methodology, with the help of BEM methodology we can create clear relations between parent children.

In this video, we are going to talk about SCSS extends, using extends we can reuse a block of CSS code throughout all SCSS files.

In this video, we are going to talk about SCSS mixins, Mixins and Extends both are the same thing but mixins accept some arguments but extends does not accept any arguments.

In this video, we are going to talk about If Else statements, how to use If Else statments in SCSS or SASS.

In this video, we are going to talk about SCSS Loops, so we will discover how to use Loops in SASS or SASS.

In this video, I will give an overview of this section that what we will learn in this section.

In this video, we will talk about react library, React is a front-end library for building user interfaces and it's created by Facebook.

In this video, we are going to create our first react app.

In this video, we are going to explore the folder of react library.

In this video, we will talk about JSX, JSX stands for javascript XML, using JSX we can right HTML in react or javascript.

In this video, I will show you how to enable emmet in JSX.

In this video, we are going to talk about react state, the state basically store values like string values, integer values, array's or objects and once we update the state react will update the view as well.

In this video, we will talk about how to update the react state.

In this video, we are going to loop an array in jsx for that simply we are going to use the javascript map function.

In this video, we are going to explore how to use conditional statements in jsx.

In this video, we are going to talk about how to use CSS in React library, we have different ways to use CSS in react you can use external CSS or inline CSS.

In this video, we are going to explore what are props in react and how to use props in react.

In this video, I will give an overview of this section that what we will learn in this section.

In this video, we are going to create react app using npx command.

In this video, we are going to install a sass package which compiles sass/scss code to pure CSS.

In this video, we are going to create a script for scss in the package.json file and along with that we will also install a concurrently package which combines two or three or many scripts into a single script.

In this video, we are going to choose a google font for our website.

In this video, we are going to talk about the CSS rem unit in this course instead px unit I will use the rem unit.

In this video, we are going to make the default padding and margin zero.

In this video, I will give an overview of this section that what we will learn in this section.

In this video, we are going to install react-router-dom package with the help the react-router-dom package we can use react routing.

In this video, we are going to talk about how to match the exact path.

In this video, we are going to create a not found page and we load that page once the route is not matched.

In this video, I will give you an overview of the section actually what we will build in this section.

In this video, we are going to style the header video, for that first we will create a header partial and we put all our scss code in that file.

In this video, we are going to create a mixin for the CSS positions, and we will reuse that mixin throughout the website.

In this video, we are going to talk about video poster images in the poster attribute we can load an image during the loading time.

In this video, we are going to create an awesome shape for the header section using the https://bennettfeely.com/ website.

In this video, we are going to add contents in the header section, we will add a heading, paragraph, and a button.

In this video, we are going to style the header section contents, in the header section we have a heading, a paragraph, and one button.

In this video, we are going to pass data as props into the header component because we will reuse the header component in all react pages and each React page will have a unique header component.

In this video, we are going to style the header button and for button styles, we will create a mixin function and it will receive some parameters I mean button properties value.

In this video, we are going to animate the subheading and button using CSS animation.

In this video, we are going to add a logo at the top of the header.

In this video, we are going to add space between the heading, subheading, and header button.

In this video, I will give you the overview of this section that what we will build in this section, in this section we will learn the basics of context api and after we will create a reusable modal with the help of context api.

In this video, we are going to create a reusable modal using react scss and context API.

In this video, we are going to talk about the scss forward rule with the help of the @forward rule we can combine many scss files in a single file, and after we can reuse those all files just with a single line of code.

In this video, we are going to talk about the React Context API, with the help of Context API we can create a global store or global state and we can access that store and global store throughout the React components without deeply nested props.

In this video, we are going to create the Context object, Context object has the ability to provide data into React child components.

In this video, we are going to create a global store or state using Context API.

In this video, we are going to access our global state or state in the React components.

In this video, we are going to open modal and the modal state is stored in the global state and we will access the modal from the Context API store.

In this video, we are going to close the modal and that's very simple, we will only update the global state.

In this video, we are going to animate the model when we open the model in the opening time I want to add animations to the modal.

In this video, we are going to move our global state and functions into a separate component.

In this video, we are going to implement the reducer function, Reducer is a function that basically mutates our state and with help of the reducer function, we can make our code slightly more clean.

In this video, we are going to call the reducer function with the help of the dispatch function.

In this video, we are going to move the reducer function into a separate file.

In this video, we are going to create a types file and I will keep all types inside that types file.

In this video, we are going to create the register form.

In this video, we are going to style the register form using scss.

In this video, we are going to style the register button and basically, I will create a dark button.

In this video, we are going to create the login and that is very straight forward because we have already created the register form.

In this video, we are going to open a specific model and we will control specific model control with context API.

In this video, we are going to create the login form when I click on already have an account message.

In this video, we are going to bind the register form input fields, binding means when we add some data in the register form then I want to access that data in React.

In this video, we are going to bind the login form input fields.

In this video, I will give you an overview of the section, that what we will build in this section.

In this video, we are going to create a transparent layer or background with SCSS.

In this video, we are going to create the navigation bar using React.

In this video, we are going to style the navbar links in scss file.

In this video, we are going to create nav context and nav provider inside the provider we will store the nav status and it will have the boolean value the value is true then will show the navigation bar otherwise not.

In this video, we are going to access the state from the nav provider inside the nav component.

In this video, we are going to create the navbar toggle component.

In this video, we are going to style the toggle menu and first I will create the scss file, and after I will put the CSS code inside that file.

In this video, we are going to toggle the navigation with the help of Context API.

In this video, we are going to create the navigation close icon.

In this video, we are going to add meta data to each react HTML page and for that, we will use the react-helmet-async package.

In this video, we are going to generate favicons for our website.

In this video, I will give you an overview of this section that what we will build in this section.

In this video, we are going to create row and columns in scss and for that I will use the scss for loop.

In this video, we are going to create destination headings.

In this video, we are going to style the destination heading with the help of scss.

In this video, we are going to keep the destinations data in the data folder and that will be static data because we don't have any backend so that's why we will have static data in data folder.

In this video, we are going to create context object for destinations and also we will create provider tag and reducer function for destinations.

In this video, we are going to access the destinations data from the context store.

In this video, we are going to loop the destinations array.

In this video, we are going to style the destination images with scss.

In this video, we are going to add a little bit space between images block.

In this video, we are going to optimize the image loading process, I want to load the images as we need them.

In this video, we are going to show the country name on the image card.

In this video, we are going to create an information card, in that card we will show the details link and once we click on that link we will see the destination details.

In this video, we are going to style the explore link with the help scss.

In this video, we are going to create details page, in that details page we will show the specific destination details.

In this video, we are going to access the destination Id from the url.

In this video, we are going to access the specific destination details from the store based on Id.

In this video, we are going to work on the details header section if we have the details page then instead header video, we will use an image in the header component.

In this video, we are going to show more details about the destination, for that first of all we will create a new component and we will pass details as a prop into that component.

In this video, we are going to language and currency information on the details page.

In this video, we are going to set up the cities data and for cities, we will use the static data you can access that static data from the resource file.

In this video, we are going to access the cities in details page.

In this video, we are going to create skewed background inside there we will show our cities.

In this video, we are going to loop filteredCities array and we have already filtered cities from the cities array.

In this video, we are going to display and style packages' status.

In this video, we are going to show the package name and package duration in the card and also we will style package name and package duration.

In this video, we are going to show the package price and style that package price.

In this video, we are going to show package facilities and style package facilities.

In this video, we are going to show the buy now button in the cities card.

In this video, we are going to create a folder for cities components, because have many cities components so we have to store those components in a separate folder to make our code clean and clear.

In this video, we are going to divide the Cities component into sub-components because it's too large.

In this video, we are going to display all images in high resolution and for that we will use a CSS trick.

In this video, we are going to scroll to the top as we load the details page or home page or any react component/page.