Master Front End Web Development-Build 3 Portfolio Projects

Build a responsive portfolio app with HTML, CSS and Bootstrap, featuring a header, services, skills, a project grid with hover details and live demos, and a contact form.

Set up a HTML and CSS Bootstrap portfolio project in Visual Studio Code, creating index.html, enabling live server, and organizing separate stylesheets for header, intro, skills, and projects.

Build the portfolio header with Bootstrap by adding CSS/JS CDNs, creating a navbar, applying a background color, importing Montserrat fonts, and right-aligning the nav with white links.

Refine the portfolio header by configuring navigation items: services, skills, projects, contact, and optionally home. Align responsive styling and troubleshoot bootstrap toggle behavior for a polished header.

Build the intro module for a portfolio project by centering a header with the developer name and description, and adding get started and hire me buttons with flex layouts.

Resize main headings and apply a custom belgian font via font-face, then set a cohesive theme with colors and padding; create and align get started and hire me buttons.

apply animated svg shapes and waves in the intro section, customize theme color and shape opacity, and implement the background via css with proper paths.

Builds the services section of a portfolio, featuring four cards for web development, digital marketing, ecommerce, and ux design, with hover borders and shadows and an open-source animation.

Apply styling to a four-item services card using a skills CSS, center content with flexbox, bold titles, borders, shadows, and hover effects, with a media query for mobile.

Build the portfolio skills and experience sections with a mirrored left-right layout, dividing content into three columns for UX, backend, and e-commerce skills, with cohesive styling.

Copy and convert the skill section into the experience section, highlighting time periods and detailing role name, location, and company names while styling with left-justified layout and colorized design.

Design a grid-based project module with a title, animation, and demo button, using static images and flexbox to display six projects in two rows.

Create a responsive project card with an image, title, and short description, and reveal a black overlay with a view button on hover, using shadows, circle images, and flex layout.

Replicate the styled project cards for six projects, updating titles and images for car rental, hotel rental, food delivery, social media, job portal, and e-commerce, with descriptions and navigation links.

Design and style the contact form for the portfolio project, featuring name, email, and query inputs, a text area, centered layout, and get started button styling with borders and padding.

Design a responsive footer mirroring the header, with a 'designed and developed by' line, centered flex layout and divider styling, and mobile view considerations for deployment to GitHub Pages.

Learn to add anchor hyperlinks to header sections by assigning IDs (services, skills, projects, contact) and enable smooth scrolling to each section, then test navigation by clicking links.

Push your portfolio code to GitHub and deploy it to GitHub Pages, using Visual Studio Code, public repository settings, and GitHub Pages configuration.

Set up and initialize a new React application for a portfolio project, including creating a client folder and running npm start on localhost:3000.

Explore a modular folder structure for a React app, organizing pages, components, and stylesheets, and implement routing with react-router-dom to navigate home, projects, courses, and contact pages.

Design the home page introduction with an svg background, a name and short profession, and a get started button guiding users to the technology section using bootstrap and flexbox.

Complete the intersection styling by creating a primary button with height and border radius, and applying a bold Montserrat font with a neon glow hover effect to the header text.

Build a header component with a toggleable menu using a hamburger and close icon, managed by useState, and position it fixed at the top with responsive styling.

Build a responsive header with a hamburger menu that collapses and reveals navigation links (home, projects, courses, contact) using show and hide header classes, absolute positioning, and smooth transitions.

Learn to build responsive web headers and introduction sections using media queries, adjusting font sizes, padding, and button widths for mobile, and implement an active route highlighting system.

Design a three-item image carousel from scratch for the portfolio homepage without libraries, using React icons, with full-height 100vh, a dark color #001220, and CSS layering via absolute positioning.

Learn to build and animate a three-D image carousel with CSS variables, transforms, perspective, and hover effects, including shadows and reflections, in a hands-on frontend development lesson.

Explore the JavaScript section by detailing a three-part tech stack (front end, styling, back end) and enhancing the portfolio with SVG waves, neuromorphic box shadows, and responsive card layouts.

Explore the front-end tech stack, including HTML, CSS, JavaScript, React, Redux, Angular, Tailwind, Material UI, Bootstrap, and Semantic UI, plus backend options Node.js, Express, SQL, PHP, and MongoDB.

Learn to build a responsive who am i section for a portfolio, using a centered blob background, flex layout, hover effects, and mobile adjustments for clean, scroll-free design.

Build the projects intro section with a two-column layout of text and a blob graphic, add a get started button, and center a React laptop icon on the blob.

Render the projects list by mapping a static json array into a responsive grid, displaying bold headings and svg images from the public folder for three portfolio projects.

Learn to create a hover overlay on project cards that reveals the project title, description, and demo button while dimming the image and applying a smooth scale transition.

Create a continuous project animation named 'Project' with a 20-second linear cycle and keyframes that rotate between -5 and 5 degrees, pausing on hover and hiding the project list scrollbar.

Explore the courses intro of a portfolio site with a multicolor waves SVG background, centered content, a share learnings heading, descriptive text, and a get started button.

Apply media queries and a rotating animation to the courses intro, adjust font sizes and padding for mobile, and refine borders and headers to create a responsive, cohesive project layout.

Design the second section of the courses page with why choose us, applying neuromorphic styling and a hover effect that enlarges it and changes the background color.

Style a section with hover reveal, toggling between h1 and y content using display. Apply color changes, bold fonts, box shadows, and transitions while preparing the upcoming projects list.

Learn to build a courses list on a portfolio page by reusing the project component, creating a courses data file, and styling hover animations and layout.

Design a two-column contact page for a portfolio project, placing an image on the left and a form on the right, with header/footer CSS styling and neuromorphic effects.

Enhance the contact page by adding a hover scale to inputs and textarea, styling a blue button with white text, and ensuring responsive padding and a 'contact us' heading.

Learn to design and implement a footer component for a portfolio site, including header integration, wave background, social icons with hover effects, and responsive styling.

Complete the footer by applying padding, adding the name, adjusting the SVG wave color, copying and replacing graphics, and testing the layout on mobile.

Add web animations using scratch techniques or the optional animate on scroll library with data-aos, set 500 ms duration, and apply fades and slides to key sections.

Finalize front-end styling by updating the home page, carousel, and navigation anchors with smooth scrolling and responsive tweaks. Validate projects, courses, and contact pages for consistent styling and deployment readiness.

deploy a react app to free hosting by pushing to github, linking the hosting service, adding a public _redirects file for routing, and configuring the build command before deployment.

Explore Tailwind CSS with hands-on practice on Tailwind Play and the official docs. Learn about text and background color, font sizing, and other utility classes to style rapidly.

Explore Tailwind CSS color utilities by applying background and text colors with classes like bg-red-500 and text-pink-500 in React.js projects, and learn how to contrast text on dark backgrounds.

Explore tailwind height and width utilities, calculate rem-based sizes, and apply h- and w- classes to create 100%, 50%, and 75% layouts using fractions and screen utilities.

Master Tailwind spacing by using margins and padding utilities, rem-based sizing from pixels, and the space property to apply x and y gaps in components.

Master styling buttons and borders with Tailwind CSS by applying background colors, padding, border radius, and text and border properties; preview flex boxes and the grid system in next lecture.

Explore flex boxes in Tailwind CSS by building a three-child layout with flex, flex-row, and flex-col. Learn justify-content and align-items for horizontal and vertical alignment, plus basic responsive behavior.

Learn to use tailwind breakpoints, the grid system, and responsiveness to build flexible layouts that adapt from mobile to desktop, with responsive grid spans and typography.

Configure and apply tailwind in a React portfolio project by installing tailwind, configuring craco, creating tailwind.config.js and postcss.config.js, integrating tailwind into index.css, and building tailwind-based UI styles.

Create a reusable folder-based layout by building header and footer components and a layout wrapper that renders page content via children for a consistent site structure.

Create a reusable portfolio layout by building four pages—home, projects, courses, and contact—wired with react-router-dom v6, and wrapped with header and footer styled by tailwind.

Build a responsive Tailwind-based navbar in a React portfolio app, configuring custom colors and fonts, and rendering dynamic menu items with a collapsing mobile layout.

Learn to make a responsive navbar using Tailwind max-width breakpoints, update the Tailwind config, and toggle a mobile menu with state to show/hide the menu on small screens.

Build a responsive React and Tailwind navigation that toggles a mobile menu with a hamburger icon, switches from row to column, and highlights the active route.

Design the homepage intro with a responsive two-column grid, placing a lottie animation beside a self-intro, and integrate the animation script into index.html to mirror the deployed look.

Finalize the home page intro by adding a grid border and background, applying a rotate transform with tailwind, adjusting for lg devices, then fix header position and z-index.

Design a technologies section that showcases project skills using React icons and Font Awesome, arranging logos in a responsive grid with individual colors and subtle animations.

Apply top margins and animate bounce to technology icons across Angular, Bootstrap, and CSS, validating in mobile view, as you refine the technologies section before moving to JSP.

Focus on the JavaScript section, create a dedicated highlight with a container, heading, and logo text, then outline a two-video plan: structure first, styling second, with a Lottie animation.

Learn to apply margins, box shadows, and hover effects to the JavaScript book section, refine typography, and build responsive front-end layouts for a three-project portfolio course.

Build the My Dave Stack section in the Regs and Tailwind portfolio project by creating a three-column grid for front end, UX, and back end, with titles, colors, and animations.

Develop the dev info blob on the homepage by centering four detail fields (name, edge, gender, country) inside a blob animation, and render the JSON with JSON.stringify(obj, null, 2).

Design the project page of a React portfolio app, integrate an animation and a centered quotation, and apply responsive, tailwind-inspired styling to mirror the deployed design.

Represent the projects list with a static data array and loop through it to render project cards with hover titles and demo links, using images stored in the public folder.

Iterate through the projects data, render a responsive grid, and center each project image with fixed height and width while applying margins, padding, and borders to match the deployed version.

Explore how to implement a hover overlay for project cards built from a map function of static projects, with a center-aligned title and demo button that appear on hover.

Reuse the projects page layout to build the courses page, adding a teaching animation and a bottom wave with a bg theme for all courses.

Update the courses page by reusing the projects layout, importing courses data, and updating text and colors, with hover effects and image styling for a polished, ready for deployment section.

Learn to design and implement the contact us page for a portfolio project, featuring a deployed Lottie animation, a static multi-field form, and responsive layout with media queries.

The lecture demonstrates styling a contact form with padded inputs, lg shadows, a gray background, rounded corners, a text area for queries, and a red submit button.

Build the project footer with icons for Facebook, Instagram, mail, LinkedIn, and GitHub and include the 'designed and developed by' credit text, centered with borders using Tailwind and React icons.

Implement the footer steps format using SVG waves, customize colors and height, and adjust responsive heights for desktop and mobile to achieve a consistent footer design.

Implement iOS animations in the React Tailwind portfolio to add scrolling effects such as fade and slide. Use data-iOS attributes, initialize the library, adjust duration, and ensure smooth top navigation with useEffect.

Learn to deploy a react app to netlify by pushing to github, configuring a public _redirects file, and adjusting the build command to enable automatic deployment from the repository.