Responsive Portfolio Website HTML5, CSS3, JavaScript (2024)

Implement a base HTML5 structure with a fixed sidebar navigation and a main area housing sections for home, about, resume, work, testimonial, and contact.

Install and configure sass to compile sass files to css, organize assets into a dedicated css folder, and use the live sass compiler to watch and output updated css.

Discover modular SCSS practices by splitting styles into partial files, importing into a main SCSS file, and using underscore prefixes to avoid extra CSS files while debugging sections.

Implement a CSS reset to remove browser default margins and padding and apply it globally with a star selector. Use border-box sizing to keep widths stable when borders are added.

Import google fonts playfair display for headings and open sans for body text in your project. Create a typography file and apply rules for h1–h6 and p tags with fallbacks.

Install and configure Bootstrap 5 by adding the CDN in the head and JavaScript before the closing body tag, override with custom CSS, and explore components like badges and dropdowns.

learn to add a font icon set to a responsive portfolio site by integrating line awesome icons, copying embed code, and adjusting size in the navigation.

Implement the sidebar HTML5 structure in HTML5, including a logo, navigation with hover labels, and a light/dark mode toggle, using assets and Font Awesome icons.

Create a left fixed sidebar at 100vh with a temporary 90px width and main padding, featuring a vertical nav where labels appear on hover and a crescent moon toggle.

Learn to display the correct section by clicking a sidebar item, using matching IDs and refs, toggling the active class and showing only the selected section.

Make the sidebar responsive with a toggle that reveals or hides the menu at 768 pixels or less, adjusting main padding and using a JavaScript toggle and sass partials.

Explore the home section with a meteor shower media animation, name reveal, skills shown by a type gs typing animation, a pdf cv download, social links, and responsive, sidebar navigation.

Build the home section HTML with a two-column bootstrap layout, left content and right image, responsive at lg; include h1, h2, p, download CV, and social links.

Style the home section with left information area, a right image, and h1/h2 typography; implement blue and dark buttons with hover effects, social icons, and vw-based background shapes for responsiveness.

Add typed.js to animate multiple titles on the portfolio via CDN, configure the target element, loop texts, and fine-tune CSS and typing speeds.

Learn to create a meteor shower background for a responsive portfolio site by dynamically generating 15 meteor spans with JavaScript, randomizing position, and animating them with CSS keyframes.

Learn to make the home section responsive across devices by applying bootstrap breakpoints, padding adjustments, and flexible image and text layouts, with mobile-specific tweaks for typography, spacing, and backgrounds.

Explore a responsive portfolio site with a cv download button, a contact button, public button styles, language and skill sections, and css-driven responsive layout across devices.

Build the about me hero section of a responsive portfolio site with a two-column layout (image and info), featuring h1, h2, a header background, and download or message buttons.

Learn to style a hero section on a portfolio site with image and info panels, responsive spacing, border radius, hover effects, typography, and bootstrap helpers for the about page.

Learn to build a responsive hero section that adapts across mobile, tablet, and laptop by adjusting container max-widths, image sizing, and flexible button layouts with Bootstrap and custom CSS.

Build a responsive languages and skills section for a portfolio site with a two-column layout. Showcase web skills in a three-column grid with HTML5, CSS3, and JavaScript assets.

Style the languages and skills section with decorative header lines, precise margins, and flex alignment; implement hover effects, bootstrap resets, and responsive spacing for clean alignment.

Learn to make the languages and skills section responsive across devices by using bootstrap breakpoints to switch from three columns to two and then one, with responsive padding and margins.

Implement the HTML structure for the certifications section in a responsive portfolio website, creating a custom header, a row of items, and three certification images in a four-column grid.

Style the certifications section to achieve consistent gaps, margins, and header spacing, ensuring images fill columns with width 100% and hover with a 0.3s scale to 1.1.

Learn to build a fully responsive certifications section by adjusting display rules across breakpoints (three at ≥992, two at 768–991, one at <768) using grid columns, margins, and centered alignment.

Enable the message me button to open the contact me section by using inner link and interlink classes, href attributes, and dynamic active state in the nav.

Implement fill rate visuals by applying the class fill to color spans with the primary color when filled, leaving empty ones as secondary across English and French sections.

Discover how a responsive portfolio website presents education and work resumes with hover effects, showing titles, education levels, start year, end year, and present roles for mobile-friendly display.

Implement the resume section html structure by creating education and experience columns with icon sections and content boxes, using h2 headings and flex layouts for a responsive portfolio page.

Style the resume section with inline flex layout, header alignment, and icon-box items; implement decorative lines with before elements and hover transitions plus color changes for first and last items.

Make the resume section responsive across mobile, tablet, and laptop. Adjust flex grow, padding, and gaps, and apply breakpoints and absolute positioning for icons.

Create a responsive gallery section by building the HTML structure, adding filter buttons, and displaying nine images in a Bootstrap grid with dynamic generation and prep for Shuffle.js.

Learn to implement shuffle.js to filter gallery items by data groups, set up filter buttons, instantiate the shuffle container, and manage active states for an interactive, responsive portfolio gallery.

Learn to implement a Bootstrap modal that displays a work item's details when clicked, including HTML structure, vertically centered layout, fade transitions, and dynamic content with JavaScript.

Style a responsive portfolio gallery with filter buttons, hover effects, and a work modal; implement blur backgrounds, modal sizing, and show/hide behavior.

Learn to create a responsive work section for all devices by adjusting filters margins, grid columns at breakpoints, and modal layout with container fluid and adaptive image heights.

Learn to turn static modal content into dynamic, data-driven displays by using data attributes and pure JavaScript to update image, title, description, client, completed, skills, and project link on click.

Explore how a responsive portfolio site presents testimonials by clickable photos that display customer comments, names, and job titles using JavaScript.

Implement the HTML structure for the testimonial section, including a five-item image gallery, a comments area with name and field, and dynamic image assets.

Style the testimonial section with responsive images and comments, using flex layouts, active states, hover effects, and typography styles to create a polished, interactive display.

Make the testimonial section responsive across mobile, tablet, and laptop by enabling flex wrap, adjusting image margins, and applying bottom margins to prevent overlap and keep spacing.

Learn to build a dynamic testimonial gallery that shows the related feedback when a picture is clicked, using index-based active states, querySelectorAll, forEach, and CSS animations.

Introduce a responsive contact section with an animated floating label form, focus hover interactions, and clickable phone and email actions across devices.

Demonstrates building the contact section with a two-column layout, including a form (name, email, subject, message) and an info panel (phone, email, address) with tel and mailto links.

Style the contact section with responsive CSS, implement floating labels on focus via JavaScript, add before/after underline lines, and hover effects for a polished contact form layout.

Master responsive contact section design for all devices by adjusting container padding, enabling flexible layouts, centering icons, and hiding the VR tag at small widths.

Explore light mode and dark mode toggling in a responsive portfolio site, using a theme attribute on the HTML tag and a toggle button with color and background changes.

Implement a toggle mode button to switch between dark and light themes on a responsive portfolio site, using a theme attribute and audio feedback.

Create a light scss file, import it into main.css, and use the HTML attribute equals light to switch to a white background with light paragraph colors and a 0.3s transition.

Build a light/dark mode sidebar that toggles logo visibility using an invert filter, updates hover and icon colors to secondary gray, and adds a smooth moon toggle with transitions.

Build the about me section in slide mode with light and dark images, and apply gray light, secondary gray light, and hover styles across headers and buttons.

Customize light resume section by styling icons with secondary gray light backgrounds, tweaking the before and after hover effects, and syncing borders and text colors for light and dark modes.

implement light mode for the work section by configuring filters, h4 gray light typography, and active state colors, then refine hover and modal interactions.

Implement the light mode for the testimonial section by adjusting background and applying a secondary gray rgba color, updating the border bottom and writer line, and maintaining selector priority.

Implement the light mode for the contact section by styling form items, labels, lines, and icons with gray light, secondary gray, and hover effects that switch to the primary color.

Demonstrate building a responsive light sidebar for a portfolio site, apply a 25% lighter primary background at max width 767 pixels, and toggle between dark and light modes.