DEV Community

Cover image for Create Simple Portfolio Website using HTML CSS | Portfolio Website Source code
Code with Random
Code with Random

Posted on

Create Simple Portfolio Website using HTML CSS | Portfolio Website Source code

First and foremost, we need to make the backbone of our website, an HTML file. I made the HTML file and named it ‘index.html’. Since we'll be using CSS as well, in the same folder I made a CSS file, named ‘styles.css’. In the index.html, we need to give the following lines of code.

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <link rel="stylesheet" href="./styles.css">  
   <link rel="preconnect" href="https://fonts.googleapis.com">  
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
   <link rel="preconnect" href="https://fonts.googleapis.com">  
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
   <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700&family=Poppins:wght@200&display=swap"  
     rel="stylesheet">  
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">  
   <title>Portfolio</title>   
 </head>  
 <body>  
 </body>  
 </html>  
Enter fullscreen mode Exit fullscreen mode

If you’re using VS Code and have an HTML extension installed, you just need to type ‘!’ and press enter. If you’re not, feel free to copy paste these lines. Discussing about them is not necessary, just know that they let the browser know you're trying to run a webpage. Also, they are importing all the CSS you'll be writing in 'styles.css'.

Now take a look at what we’re building.read more[][(https://www.codewithrandom.com/2021/12/simple-portfolio-website-using-html-css.html)]

Top comments (0)