Learn PSD to HTML : Responsive Portfolio Website Design

Explore the 12-column Bootstrap grid system to manage horizontal and vertical content for a responsive portfolio website design, enabling two-column and multi-column layouts with careful margins and paddings.

Create a cohesive color palette by defining primary, text, light, and dark swatches in the swatches panel, then apply them to backgrounds and headings.

Learn to design a header with a logo and navigation for a responsive portfolio, using grid and guides to align elements and prepare an underline active state for links.

Design the hero area to fill the viewport with a full-height rectangle, a clipping mask for the image, a 70% overlay, and a welcome message with font awesome social icons.

Build the hero area with two call-to-action buttons on a primary red background, align and group elements, and refine spacing for a future text slider and responsive HTML.

Create the about section of a responsive portfolio by placing an image beside text in a five-column grid, including about me, web developer, graphics designer, social icons, and contact button.

Organize the about section by managing social icons, duplicating groups, and adjusting colors and spacing for a clean layout. Add education, experience, and skills in the next steps.

Design a responsive education, experience, and skills section for a PSD to HTML portfolio, using a four-column layout with headings, university details, and clean overlays.

Create the education experience skills section by renaming layers, aligning to a full-width grid, and building rounded progress bars that fill on scroll, labeling items such as web development.

Learn to craft a responsive services section for a PSD to HTML portfolio site by organizing sections, creating shapes, and applying padding, typography, and grid alignment.

Customize the services section of a responsive portfolio by updating icons and labels, centering text, and using the type tool to set web design, online marketing, graphics design, and WordPress.

Create the portfolio section for the PSD to HTML template by setting up a grid and clipping an image. Add category filters (web design, graphics design, brand) with precise alignment.

Refine the portfolio section by arranging images in a three-column grid with a six-column feature, giving the large item double height, and applying clipping masks and grouping to manage assets.

Explore building a portfolio section from a PSD template by duplicating shapes, applying colors, aligning text and icons, and using rotation and overlay effects for a polished layout.

Design a testimonial section with a background, clipping mask for the avatar, a centered slider with 60-pixel gaps, and typography for headings and captions.

Center the testimonial text, adjust font size and line height, set a 30-point gap in a grid, and create a three-dot slider for the testimonials.

design and align the recent blog post section, manage margins, grid spacing, and typography to create a clean, responsive blog layout for a psd to html portfolio site.

Create and arrange the blog grid by grouping and duplicating posts, centering the layout, and updating images. Enable a hover zoom to preview blog posts in a responsive portfolio design.

Design the contact section for a responsive portfolio site, detailing grid setup, layer management, typography, icons, and a two-row layout for contact info and a form.

Create a psd to html contact form layout by setting 60-pixel gaps, arranging fields in a grid, adding name and message placeholders, and finishing with a primary color submit button.

Explore how to design a minimal footer in a premium portfolio template, group and rename footer elements into a contact form, align items in a responsive grid, and export images.

Create the portfolio project by adding index.html and style.css, then establish folders for assets, images, and scripts with main.js. Prepare for plugins like bootstrap and fonts.

Populate a basic html markup with doctype html, html, head, and body tags. Add meta tags for language, charset utf-8, and a responsive viewport with width=device-width and initial-scale=1.

Learn how to download jQuery, choose the compressed production file for smaller size, and link the library to your PSD to HTML project, placing scripts before the body ends.

Download bootstrap 4.1.3, extract the files, and link the compiled bootstrap css and js to your project to build a responsive portfolio with bootstrap.

Install the Roboto font from Google fonts, select the 300 and regular weights, copy the embed link, and paste it into the project bootstrap to enable typography.

Apply a reset css with star selector and box-sizing border-box, zero margins and padding, set base font 15px, color #777, line-height 1.5, and style h3/h5, plus transitions and full-width utility.

Discover how to add the FontAwesome icon font to a PSD to HTML project by downloading 4.7, copying fonts into the project, and verifying icons like Facebook in browser.

discover how respond.js enables responsive design for browsers that don't support CSS3 media queries, such as Internet Explorer 8, by including the script in your page header.

Export and optimize images for a responsive portfolio by selecting lower resolutions, adjusting canvas sizes, trimming transparent pixels, and saving for web to reduce file sizes while preserving image quality.

Exporting and optimizing images for a responsive portfolio website, reducing file sizes with save-for-web workflows, and choosing appropriate image dimensions to improve load times.

Learn to build a header with bootstrap navigation, including a logo anchor, a toggle button, and a collapsible menu with an active home item, while aligning nav to the right.

Style a custom bootstrap navigation for a psd to html portfolio site by adding a header background on scroll, refining colors, spacing, hover and active underlines, and bold logo.

Style a custom bootstrap navigation by turning nav links into inline-blocks, applying responsive margins at 991px, and removing the header button focus outline.

Create a responsive hero area with glass main, overlay, centered content, background image, and animated text, including social icons and call-to-action buttons using PSD to HTML.

Style the hero area by applying margins, borders, and colors to cta and portfolio elements, convert anchors to inline blocks, and implement hover effects and a fixed header with particles.

Discover how to create non-rectangular section endings using SVG polygons and viewBox coordinates, forming ship-shaped backgrounds that scale responsively with screen size.

Add a particle animation to the hero area using a particles script, configure particle count, size, shape, and interactivity (hover, repulse, bubbles), and integrate the script for responsive portfolio site.

Download or link a text animation plugin via CDN or local files and apply it to your main heading, configuring type speed and back delay.

Explore building a call-to-action button hover effect in a PSD to HTML portfolio design by using relative/absolute positioning, before/after elements, and transitions to animate background, text, and border color.

Create a fixed header for a PSD to HTML responsive portfolio site by setting the header to fixed and adding an overlay background when scrolling past 200 pixels. Below 992 pixels, apply a background to the nav bar to maintain visibility during scrolling.

Explore a unique scroll-driven fix for a transparent fixed header in a responsive portfolio site. Learn how a breakpoint under 992px and a class toggle control the header background.

Learn how to build an about section in a PSD to HTML project by placing an image in a Bootstrap grid alongside text, social icons, and a contact CTA.

Explore how to build an education and experience section for a responsive portfolio, featuring education items, experience entries, and skill progress bars.

Build an interactive skills section with animated progress bars for web development using HTML, CSS, and JavaScript, and learn to structure a responsive 8:6 layout with data-progress and waypoint-triggered animations.

Discover a css trick to create an arrow with borders. Set an element to zero size and use selective transparent borders and a colored top to form a triangle.

Implement an animated loader and scrolling progress with the Waypoints library, configuring 70% offset, and correctly targeting elements for a PSD to HTML portfolio site.

Learn a Photoshop-based trick to craft a symmetrical non-rectangular shape by defining coordinates, then implement with classes like 'Viji bottom' and 'Viji top' using absolute positioning and pixel tweaks.

Master underline effects for h-3 headings in a PSD to HTML portfolio design, using two approaches with before and after pseudo elements and width tricks to fit text or container.

Markup and style a responsive services section using a Bootstrap grid with two rows of three services, centering icons and text in bordered, shadowed cards.

Apply a service hover effect that darkens the background, switches text to white, lightens the paragraph to #ddd, and flips and scales the icon with a smooth transform.

Demonstrates how to build a responsive portfolio section via HTML markup, detailing a portfolio container with portfolio items, item content, images, and an overlay that appears on hover.

Demonstrates building a unique portfolio hover effect with an image overlay using before/after elements, absolute positioning, transitions, and reveal of description and icon on hover, plus borders and hover rotation.

Initialize the isotope plugin to filter and sort portfolio items in a responsive PSD to HTML portfolio site, using section headers and a Bootstrap full weight class.

Add a filterable feature to the portfolio by implementing data-filter attributes and click handlers to show items by category. Style buttons and active state to update the grid with matching items.

Finish the portfolio section by updating images, applying the image-fluid class, and adding a semi-transparent overlay on the background to create a responsive, branded portfolio in PSD to HTML.

Create a responsive testimonials section for a PSD to HTML portfolio site, detailing header and testimonial items with images, names, and centered text styling.

Implement a testimonial slider using owl carousel, including installation, HTML markup, and customization of autoplay, loop, dots, and navigation for a responsive portfolio design.

Build a blog section in psd to html style, delivering a four-column blog posts grid with post images, category badges, and author and date details, plus hover image zoom.

Markup a responsive contact section for a portfolio site using bootstrap grid. Build a four-row layout with header and three subsections, plus a contact form featuring name, email, and message.

Learn to style a responsive portfolio contact section by applying a background image with an overlay, styling the contact form inputs and textarea, and centering a CTA-styled submit button.

Design a responsive footer in a PSD to HTML workflow, styling a bold portfolio title in white, fixed 40-pixel height, and enabling one-page navigation with animated effects.

Modify the portfolio markup by placing the container inside a rule class, set 3 and 6 column layouts for items, and initialize the isotope plugin for a responsive, clean portfolio.

Adjust styles to make the PSD to HTML portfolio template look good across all screen widths, using bootstrap responsiveness and breakpoints like 992px for blog, services, and about sections.

Learn to implement smooth scrolling and auto updating the active nav item in a single-page portfolio site by linking sections, adding ids, and toggling the current class.

Upload your portfolio site to a live server with FileZilla FTP, connect using hosting credentials, and transfer all files to the public_html directory named port for Leo.

Design a custom animated page loader in Photoshop using a ship shape, gradient overlay, and glow effects, then animate it with a timeline and keyframes for the upcoming project implementation.

Learn how to implement a custom page loader by creating a full-screen loader div, styling it with flex centering, and fading it out when the page finishes loading.

Learn to add professional scrolling animations to a responsive PSD-to-HTML portfolio site using animate.css, data-animation attributes, and the animated class for subtle effects.