Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Responsive Portfolio Website With HTML CSS NETLIFY Project
Rating: 4.2 out of 5(87 ratings)
7,092 students

Responsive Portfolio Website With HTML CSS NETLIFY Project

Portfolio Website Project | Responsive Portfolio Website with HTML, CSS & Netlify | Portfolio Website Scratch
Created byARUNNACHALAM SHANMUGARAAJAN
Last updated 5/2025
English
English [Auto],

What you'll learn

  • How to structure a website using HTML.
  • Styling and designing a website with CSS.
  • Hosting and deploying your website on Netlify.
  • Develop practical web development skills.

Course content

1 section • 8 lectures • 1h 17m total length

  • Introduction To Course0:46

    Design a portfolio website using HTML and CSS across home, about, and contact sections. Deploy your project with Netlify, gaining beginner-friendly skills for front-end hosting.

  • PORTFOLIO CLASS 1 : SETTING UP ENVIRONMENT4:45

    Set up a portfolio website project using HTML, CSS, and Netlify by creating a folder, and building index.html and style.css, with a profile image and box icons.

  • PORTFOLIO CLASS 2 : HEADER SECTION21:21

    Build a responsive header with a logo and navigation bar for a portfolio site using HTML and CSS, and preview with live server in VSCode, including active and hover states.

  • PORTFOLIO CLASS 3 : HOME SECTION16:30

    Design and implement the home section of a responsive portfolio website using HTML elements, CSS styling, a resume download button, and an included profile image.

  • PORTFOLIO CLASS 4 : ABOUT SECTION8:40

    Design the portfolio about section with an image, bio, headings, and a read more button, using a flex layout, white text on black, and image styling.

  • PORTFOLIO CLASS 5 : CONTACT SECTION8:38

    Design the contact section of a portfolio website using HTML form tags, with inputs for name, email, phone, and subject, plus a text area and send button styled in CSS.

  • PORTFOLIO CLASS 6 : FOOTER SECTION15:15

    Design and implement the portfolio website footer with social media links, navigation lists, and icons using HTML and CSS, including hover effects and Netlify deployment.

  • PORTFOLIO CLASS 7 : DEPLOY USING NETLIFY1:50

    Learn to deploy a portfolio website with Netlify by dragging and dropping the portfolio folder, creating a Netlify account, and viewing the deployed home, about, and contact pages.

  • PORTFOLIO ASSIGNMENT
  • HTML CSS QUIZ

Requirements

  • Must Install any IDE for html css

Description

Complete Portfolio Website Using HTML CSS NETLIFY Project


Welcome to the Portfolio Website Project – your step-by-step guide to building a professional and responsive Portfolio Website using HTML, CSS, and Netlify.

In this course, you’ll learn how to design, code, and deploy a modern Portfolio Website from scratch. Whether you're a student, freelancer, or job seeker, creating a strong Portfolio Website is essential to showcase your skills and projects effectively.

We’ll start with the structure and layout of the Portfolio Website using clean HTML. Then we’ll style your Portfolio Website with modern CSS techniques to ensure it looks great on all devices. Finally, you’ll deploy your Portfolio Website live on the internet using Netlify, so anyone can view it.

By the end of this course, you’ll have your own live Portfolio Website, a valuable project to share with potential employers or clients, and the skills to build even more.


Class Overview:

  1. Introduction to Web Development:

    • Understanding the basics of HTML and CSS.

    • Setting up your development environment.

  2. Building the Website Structure:

    • Creating the HTML structure for your portfolio website.

    • Organizing sections: Home, About Me, Projects and Contact.

  3. Styling the Website:

    • Applying CSS to style the website.

    • Enhancing design with CSS animations and transitions.

  4. Adding Content:

    • Filling in the sections with your personal information, biography, project details, skills, and contact information.

    • Incorporating images, icons, and other media.

  5. Deploying with Netlify:

    • Introduction to Netlify and its features.

    • Connecting your GitHub repository to Netlify.

    • Deploying and managing your website on Netlify.

  6. Final Project:

    • Building a complete portfolio website from start to finish.

    • Showcasing your final project and receiving feedback.


Enroll now and start your journey to becoming a proficient web developer with the Complete Portfolio Website Using HTML, CSS, and Netlify course!

Who this course is for:

  • Students and professionals looking to build and showcase a portfolio.
  • Freelancers and job seekers wanting to create an impressive online presence.
  • Web development enthusiasts eager to learn HTML, CSS, and Netlify.

Report abuse