Portfolio Website Part-1
Dear Sciaku Learner you are not logged in or not enrolled in this course.Please Click on login or enroll now button.
If you have any query feel free to chat us!
Happy Coding! Happy Learning!
Lecture 29 :- Portfolio Website Part-1
Apologies for the repeated response. Let's continue with Part-1 of creating a portfolio website. In this part, we'll cover the initial setup, HTML structure, and basic CSS styling for the header and hero section.
Folder Structure: Create a new folder for your portfolio website and organize it as follows:
HTML Structure (index.html): Begin with a basic HTML structure for your portfolio website. In the
<head>section, link your CSS file and set the title of your website. In the<body>section, create the main sections for the header and hero section.CSS Styling (styles.css): Now, let's add some basic CSS styling to the header and hero section to make them visually appealing.
In this example, we create a simple header with a dark background color (
#333) and white text. The navigation links are horizontally spaced using Flexbox. In the hero section, we use a background image and center the content using Flexbox. The text is styled with appropriate font sizes and colors.Hero Background Image: Place a high-resolution image (hero-bg.jpg) inside the "img" folder. This image will be used as the background image for the hero section. Make sure the image is visually appealing and represents your portfolio's theme.
Now, you have the basic structure and styling for the header and hero section of your portfolio website. In Part 2, we'll continue building the website by adding more sections such as About, Projects, and Contact, and further enhancing the design and functionality. Keep the creativity flowing, and feel free to customize the styles according to your preferences and branding!
cssCopy code
/* Reset styles and global styles */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.6; } /* Header Styles */ header { background-color: #333; color: #fff; padding: 10px; } nav { display: flex; justify-content: space-between; align-items: center; } nav a { color: #fff; text-decoration: none; padding: 5px 10px; } /* Hero Section Styles */ .hero { background-image: url("img/hero-bg.jpg"); background-size: cover; background-position: center; height: 500px; display: flex; justify-content: center; align-items: center; } .hero-content { text-align: center; } .hero h1 { font-size: 48px; margin: 10px 0; } .hero p { font-size: 20px; margin: 5px 0; color: #fff; }htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your Name - Portfolio</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <!-- Header Section --> <header> <nav> <!-- Add navigation links here (Home, About, Projects, Contact) --> </nav> </header> <!-- Hero Section --> <section class="hero"> <div class="hero-content"> <h1>Your Name</h1> <p>Web Developer | UI/UX Designer</p> <!-- Add a call-to-action button here (e.g., "View Portfolio") --> </div> </section> <!-- More sections (About, Projects, Contact) will be added in Part 2 --> </body> </html>cssCopy code
portfolio-website/ ├── index.html ├── css/ │ └── styles.css ├── img/ └── projects/
- 1. Launching Web Development Master Course MERN Stack Love Babbar
- 2. What is Version Control Git vs GitHub
- 3. How to install Git windows
- 4. How to install Git macOS
- 5. Creating a Git Repository
- 6. Lifecycle of a Change
- 7. Reviewing History in a Git Repo
- 8. Doing your First Commit
- 9. Let's create a Branch, Merge it & Tag a Commit
- 10. Undoing changes in Git
- 11. How to push a Commit GitHub Desktop
Comments: 24
Kindly check the lecture number 6. Lifecycle of a Change in 1. Git and Github The above lecture is not related to the course please update it ASAP Thank you
From where can I download the files which love babbar says he has uploaded on dashboard ??
I have attached the link https://github.com/lakshayk12/ANN_optimization_BTP
bro, i paid for the course, but still can't access the course. do something
Paid for the course but it still locked, can solve this problem please, when you take the payment the couse should be unlocked, evey time i have to message for any purchase
Now your Paypal payment is accepted and your course is activated successfully. Please leave your valuable feedback.
Why i am being asked for payment if i am already enrolled in the course
Dear anand, your payment is now updated check your course, apologize for several delays. Please leave your valuable feedback.
thanks its working now
hello ,I have a doubt
hello i have a doubt
hi
I'm paying through my Card, but it giving an error. why ? how we can purchase a course in Pakistan. Paypal is banned here
can we download the videos
i done my payment for mern stack development love babbar but cant acces to course kindly give me access
Dear Krishnapal your payment is already accepted go and check back.
Why i am being asked for payment if i am already enrolled in the course
Dear Shivansh, if you already done your payment then contact us on our official Email id [email protected] or reply here.
Why i am being asked for payment if i am already enrolled in the course
Dear p8354046, if you already done your payment then contact us on our official Email id [email protected] or reply here.
Why i am being asked for payment if i am already enrolled in the course
Dear, Don't worry now your problem is solved check your id.
Why i am being asked for payment if i am already enrolled in the course
Yes bro
I'm facing same issue
Dear, Don't worry now your problem is solved check your id.
i want debit card option
how can i assure that this is not scam?
i have same doubt is this website real or a fraud
No its not any fraud. its genuine if you need any proof please contact us via email.
No it's not any scam, its genuine if you need any proof please contact us via email.
how to do payment ?
Click on Watch now button then click next video then payment option is showing
i am unable to access the video even i have already completed my payment .
Your problem is solved
plz add codes lecture wise ! it wold be great and helpful also
now we have added starter package in lecture 2nd, go now and download it.
how to view this one
Why video not play
Now it's working.
Thank you for the access of the videos. It would be greatful if I could no the way to download the videos
Use idm to download
ok
Hello bro can you share course with me?
hello everyone