Feel free to use this presentation as a reference.
A simple responsive portfolio in HTML, CSS and Bootstrap
You can see the intended finished result here
The final code is also available on codepen and repl
Codepen - Code and the Final Output
Repl - Code and the Final Output
We'll be using Repl for our webinar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>My Portfolio</title>
<!-- Put bootstrap css link below -->
<!-- Put your own css file link below -->
</head>
<body>
<!-- Put external js file links below -->
</body>
</html>
Visit Bootstrap's website here
The final version should look something like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>My Portfolio</title>
<!-- Put bootstrap css link below -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
`
<!-- Put your own css file link below -->
</head>
<body>
<!-- Put external js file links below -->
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
The bootstrap documentation for Navbar is here
The final code of our nav section will look like this
The final code of our landing section will look like this
The Flex classes we used for align things can we found here
The Spacing classes use used can be found here
The final code of our about me section will look like this
You can create some random paragraph if you'd like to from here
The bootstrap documentation for Cards used for this section is here
The final code of our projects section will look like this
The bootstrap documentation for Buttons used for this section is here
The final code of our projects section will look like this
This is your dummy profile image we'll use for our page. You can create your own from GetAvataaars.com and get the img tag link. It's FREE
Or copy this url and place it in the src attribute for the img tag.
https://avataaars.io/?avatarStyle=Circle&topType=Hat&accessoriesType=Wayfarers&facialHairType=Blank&clotheType=BlazerShirt&eyeType=EyeRoll&eyebrowType=FlatNatural&mouthType=Default&skinColor=Light
or use this img tag as it is
<img src='https://avataaars.io/?avatarStyle=Circle&topType=Hat&accessoriesType=Wayfarers&facialHairType=Blank&clotheType=BlazerShirt&eyeType=EyeRoll&eyebrowType=FlatNatural&mouthType=Default&skinColor=Light'
/>
These are project section images we'll use for our portfolio. All these images are from Undraw . You can choose your own ones from there. It's FREE
Copy this url and place it in the src attribute for the img tag
https://imgur.com/BI6Y4p3.png
Copy this url and place it in the src attribute for the img tag
https://imgur.com/HycMqLT.png
Copy this url and place it in the src attribute for the img tag
https://imgur.com/ZaRAvUQ.png
Copy this url and place it in the src attribute for the img tag
https://imgur.com/jQZthWf.png
https://drive.google.com/file/d/16F8To75_-URmeFmPlcGVsRoIWrRK6Ce7/view
Here are some additional resources to make you an awesome developer
Get free illustrations for your website from Undraw and Illustrations
Free face avatars from Get Avatars
Color Palletes for your website from Happy Hues
You can find some really cool background gradients from this site uigradients.com.
Go ahead and try them out :)
Choose your favourite gradient by toggling the arrows. Once you're on that site you need to click on the icon on the top right corner as shown in the image below.
This will show us a pop up with the css code for that background
Copy the css code and paste it inside the {} brackets of your body in your css
body {
background: #f46b45; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f46b45, #eea849); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f46b45, #eea849); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}