Master HTML5 Bootstrap5 & ReactJs From Scratch

Create a React app in a project folder and start the development server with npm start to view the app in the browser, setting up initial build and tests.

Understand the React project structure, including node_modules, public files, and index.js entry that renders the app into root, with function components returning JSX wrapped in a div or fragment.

Integrate bootstrap 5, Google Fonts, and Font Awesome into your project by adding the bootstrap links and scripts, selecting a Google Font, and loading Font Awesome icons.

Create a bootstrap-based React nav bar component and place it in a components folder. Export it by default and import it into the app to render on the index page.

Learn to integrate a Bootstrap nav bar into a React component, fix JSX syntax by self-closing tags, and replace class with className for proper rendering, then customize the menu.

Customize a bootstrap nav bar by removing the disabled button and dropdown, change the button color using bootstrap background classes, and enhance with a font awesome icon.

Create and navigate between about and contact pages using a pages folder, components, and a navigation system in a React app built with HTML5 Bootstrap5.

Install the react-router-dom npm package, save it to package.json dependencies, and show how npm install installs dependencies for others.

Add routing to your React app by importing the routing package, wrapping the app in a router, and configuring home, about, and contact routes with exact matching and lazy loading.

Learn to implement true single-page navigation with NavLink by replacing anchors, preventing full page reloads, and enabling automatic active highlighting for menu items on desktop and mobile.

Design a responsive about us header using Bootstrap containers and utilities to apply borders, center text, uppercase the heading, and control padding for consistent alignment across devices.

Design an about us content section using bootstrap 5: add paragraphs, apply shadow, padding, rounded corners, adjust text size and color with muted text, and ensure responsive, mobile-friendly layout.

Create a contact us form using bootstrap form markup, tailoring fields like name, phone, email, and message, plus a best time to reach you, with accessible labels and focus behavior.

Learn to style a bootstrap contact form with custom CSS, set a 60% container, center it with mx-auto, and use media queries for mobile full-width responsiveness.

Design a footer component using container-fluid with a primary background, set a responsive height via viewport units, and apply white text with a gradient for visual polish.

Design a responsive footer with three sections using bootstrap grid. On mobile, stack them; on desktop, align them side by side, featuring quick links, newsletter, and contact sections.

Demonstrate building a footer quick links section with anchor tags, using flexbox to stack links in a column and center them with appropriate justify and align properties.

Design the footer newsletter by adding a bootstrap-styled input and a subscribe button, center the form with a flex column, adjust container height, padding, and borders for a polished layout.

Design a responsive footer contact address using flex columns and a map icon, with careful padding and margins. Test in mobile view and finalize the footer and newsletter section styling.

Design a home page layout by building a hero section and multiple sections such as services, featured posts, latest posts, and portfolio using semantic section tags to learn flexible layout.

Design a home page hero slider using Bootstrap carousel with captions and crossfade, load images from Unsplash, and tune image height with CSS for contrast and mobile viewing.

Design a responsive 12-column home page featured post section with three equal cards on large and medium displays. Make it adapt to small devices as full width sections.

Designs the home page latest post section by applying a grid layout and a full-width button. Adjusts column spans, padding, and styling to refine the feature and latest post blocks.

Design a home page portfolio section using Bootstrap's gap utilities and container padding to space images in rows and columns, then replace placeholders with real images and ensure equal heights.

Add a home link to the navigation bar, apply an uppercase style to all menu items, and introduce a call-to-action section for the homepage.

Design a full-width call to action section with bootstrap utilities, using container-fluid, a minimum height, and centered content, plus a white, uppercase button below post text.