Build a Personal Portfolio Webpage- Feedback Required

Code Feedback
1

Hello,
I have finished my PersonalPortfolio Project. I am quiet satisfied with the outcome. Please let me know if any improvements can be done on the website.
Thanks
Your code so far

@charset "UTF-8";

*{
      box-sizing:border-box;
    }
    p,body,html,a,ul,li,h1,h2,h3,h4,h5,h6{
    	margin:0;
    	padding:0;
    }
    .fa-brands{
    	font-size:60px;
    	
    }
    .fa-brands:hover{
     	box-shadow:0 0 5px 2px rgba(249,150,67,0.8); 
    }
   
    #navbar{
    	display:flex;
    	justify-content:space-between;
    	height:50px;
    	position:fixed;
    	background-color:rgba(249,150,67,255);
    	left:0;
    	right:0;
    	top:0;
    	align-items:center;
    	margin-top:0;
    	margin-bottom:0;
    }
    #navbar div{
    	width:200px;
    }
    #navbar ul{
    	list-style:none;	
    }
    #navbar ul li{
    	display:inline-block;
    	margin-left:20px;
    	margin-right:20px;
    	
    }
    #navbar ul li a{
    	text-decoration:none;
    	font-size:20px;
    	color:black;
    }
     #navbar ul li a:hover{
    	border-bottom:solid 1px rgba(85,26,139);
    }
    #welcome-section{
    	height:100vh;
    	display:flex;
    	align-items:center;
    	margin:10px 40px;
    }
    .welcome_container{
    	margin:0 auto;
    	width:45%;
    	padding-left:120px;
    	padding-top:70px;
    }
    .welcome_container p{
     	font-size:25px;
    }
    .welcome_container h1{
    	font-size:40px;	
    }
    .profile{
    	font-size:18px;
    	font-style:italic;
    } 
    .view_my_work_button{
    	 margin-top:20px;
       padding:15px 15px;
       border-radius:5%;
       cursor:pointer;
       background-color:rgba(249,150,67,0.8);
       border:solid 1px gray;
       transition: box-shadow 0.15s;
       font-size:15px;
       border:none;
    }
    .view_my_work_font:hover{
    	font-weight:bold;	
    }
    .view_my_work_button:hover{
    	background-color:rgba(249,150,67,1);
    	box-shadow:0px 0px 2px 2px rgba(249,150,67,0.8);	
    	 
    }
    #projects{
    	padding:60px 110px;
    	width:100%;
    	background-color:rgba(123,134,215,0.3);
    }
    .project_main_header{
    	text-align:center;
    	margin-bottom:30px;
    	letter-spacing: 2px;
    	font-size:45px;
    	padding-top:20px;
    	padding-bottom:40px;
    	font-family:'Bebas Neue', cursive;
    	
    }
    .project_container{
    	display:flex;
    	column-gap:60px;
    	row-gap:55px;
    	flex-wrap:wrap;
    }
    .project_details{
        width:390px;
        height:450px;
        border:none;
        border-radius:2px;
        text-decoration:none;
         box-shadow:0 0 8px rgba(95,105,194,0.8);
        transition:border 0.15s;
    }
    .project_details:hover{
        border:solid 3px rgba(88,67,77,255);
        overflow:hidden;
    	
    }
    #projects img{
    	width:100%;
    	height:83%;
    	margin:auto;
    }
    
    .project_sub_details{
        background-color:rgba(95,105,194,255);
        color:white;
        font-weight:bold;
        height:17%;
    }
    .project_sub_details h3{
        text-align:center;
        font-size:1.4em;
        letter-spacing:1px;
        padding-top:15px;
    }
    .project_sub_details p{
        text-align:center;
        padding-top:8px;
        color:rgba(249,249,249,0.6);
        font-family: 'Montserrat', sans-serif;
        font-size:0.9em;
    }
    #contact{
        padding-top:8px;
        margin-top:50px;
        margin-bottom:80px;
    }
    .social_media_container{
        display:flex;
        justify-content:center;
        align-items:center;
        margin:10px 110px;
    }
    .social_media_container a{
        padding-left:10px;
        padding-right:10px;
        color:rgba(42,69,138,255);
    }
    .contact_header{
        display:block;
        text-align:center;
        font-size:40px;
        letter-spacing:1px;
        padding-bottom:20px;
        font-family: 'Bebas Neue', cursive;
    }
    .footer_css{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin:8px 35px;
    }
    @media (max-width:1400px){
    	#welcome-section{
    		margin:0;
    	}
    	.welcome_container{
    		padding:30px;
    	}
    }
    @media (max-width:1050px){
    	#navbar div{
    		display:none;
    	}
    	 #navbar{
    	 	justify-content:center;
    	 }
       #navbar ul li{
          margin-left:40px;
          margin-right:40px;
      }
    	 #welcome-section{
          display:flex;
          flex-direction:column-reverse;
          margin:0 0;
    	 
    	 }
    	 .welcome_container{
          margin:10px 30px;
          width:100%;
          padding-left:0;
          text-align:center;
          padding-top:0;
    	}
    	.welcome_image{
          height:60%;
          width:80%;	
          margin:0;
          padding:0;
       }
       .welcome_container p{
          font-size:18px;
          margin-top:3px;
        }
        .welcome_container h1{
            font-size:20px;	
            margin-top:3px;
         }
         .profile{
            font-size:14px;
            font-style:italic;
            margin-top:3px;
         } 
         .view_my_work_button{
           margin-top:18px;
           padding:12px 12px;
           border-radius:5%;
           cursor:pointer;
           background-color:rgba(249,150,67,0.8);
           transition: box-shadow 0.15s;
           font-size:15px;
    	}
    	 #projects img{
    	 	    height:78%;
    	 }
    	 .project_sub_details{
    	 	  height:22%;
    	 }
    	.project_container{
    		
    	}	
    }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<script src="https://kit.fontawesome.com/aa0058d4fc.js" crossorigin="anonymous"></script>
<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=Anton&family=Bebas+Neue&display=swap" rel="stylesheet">
<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=Montserrat&display=swap" rel="stylesheet">
<title>Portfolio Page</title>
<style>
    
</style>
</head>
<body>
	  <nav id="navbar"> 
	   <div></div>
	    <ul>
	       <li><a href="">Home</a></li>
	       <li><a href="#projects">Projects</a></li>
	       <li><a href="#contact">Contact</a></li>
	    </ul>
	  </nav>  
    
    <main>
    	<section id="welcome-section">
    		<div class="welcome_container">
	    		<p>Hello,I am</p>
	    		<h1>Nischitha Thimmegowda</h1>
	    		<p class="profile">Front-end Web Developer</p>
	    		<a href="#projects" class="view_my_work_font"><button class="view_my_work_button">View my Work</button></a>
    		</div>
    		<img src="https://rulesofgames.github.io/Images/Portfolio_main_page.jpg" alt="computer image" class="welcome_image">    	
    	</section>
    	
    	<section id="projects">
    		<h3 class="project_main_header"> These are some of my projects</h3>	
    		<div class="project_container">
		    	  <a href="https://codepen.io/RulesofGames/full/bGMwrvB" id="profile-link" target="-blank" class="project_details">
		    	  	<img src="https://rulesofgames.github.io/Images/SurveyForm_thumbnail.JPG" style="object-fit:cover;" alt="PlaceholderImage">
		    	  	<div class="project_sub_details">
			    	  	<h3 class="project-tile">Survey Form</h3>
				    	<p>HTML,CSS</p>
			    	</div>
		    	  </a>
		    	   <a href="https://codepen.io/RulesofGames/full/QWrEbPe"  target="_blank" class="project_details">
		    	  	<img src="https://rulesofgames.github.io/Images/Sundar_Pichai_thumbnail.JPG" alt="PlaceholderImage">
		    	  	<div class="project_sub_details">
			    	  	<h3 class="project-tile">Tribute Page</h3>
				    	<p>HTML,CSS</p>
			    	</div>
		    	  </a>
		    	   <a href="https://codepen.io/RulesofGames/full/qBYNdvj"  target="_blank" class="project_details">
		    	  	<img src="https://rulesofgames.github.io/Images/TechnicalDocumentationPage_thumbnail.JPG" style="object-position:0% 100%;" alt="PlaceholderImage">
		    	  	<div class="project_sub_details">
			    	  	<h3 class="project-tile">Technical Documentation Page</h3>
				    	<p>HTML,CSS</p>
			    	</div>
		    	  </a>
		    	   <a href="https://codepen.io/RulesofGames/full/jOxNLgL" target="_blank" class="project_details">
		    	  	<img src="https://rulesofgames.github.io/Images/ProductLandingPage_thumbnail.JPG" style="object-position:50% 50%" alt="PlaceholderImage" >
		    	  	<div class="project_sub_details">
			    	  	<h3 class="project-tile">Product Landing Page</h3>
				    	<p>HTML,CSS</p>
			    	</div>
		    	  </a>
		    	   <a href="" target="_blank" class="project_details">
		    	  	<img src="https://rulesofgames.github.io/Images/SurveyForm_thumbnail.JPG" alt="PlaceholderImage">
		    	  	<div class="project_sub_details">
			    	  	<h3 class="project-tile">Placeholder Project</h3>
				    	<p>HTML,CSS</p>
			    	</div>
		    	  </a>
		    	   <a href="" target="_blank" class="project_details">
		    	  	<img src="https://rulesofgames.github.io/Images/TechnicalDocumentationPage_thumbnail.JPG" alt="PlaceholderImage">
		    	  	<div class="project_sub_details">
			    	  	<h3 class="project-tile">Placeholder Project</h3>
				    	<p>HTML,CSS</p>
			    	</div>
		    	  </a>
		    </div>	  
    	
    	</section>
    	
    	<section id="contact">
	    	<h3 class="contact_header">You can find me here</h3>
	    	<div class="social_media_container">
	    		 <a href="https://www.linkedin.com/login" target="a_blank"><i class="fa-brands fa-linkedin"></i></a>
	    		 <a href="https://www.github.com" target="a_blank"><i class="fa-brands fa-github"></i></a>
	    		 <a href="https://www.freecodecamp.org/RulesofGames" target="a_blank"><i class="fa-brands fa-free-code-camp"></i></a>
	    	</div>			 
    	</section>
    
    </main>
    <hr>
      <footer class="footer_css">
	    <div class="footer_1">
	      	Coded and &copy;Copyright by: <strong>Nischitha Thimmegowda</strong>
	    </div>  	
	    <div class="footer_2">
	       Personal Portfolio project on <a href="https://www.freecodecamp.com" target="_blank">FreeCodeCamp.com</a>
	    </div>
  </footer> 
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

4 Likes
2

Nice work RulesofGames. I noticed a few things that you might want to change.
Here they are in a list.

  • You’ve got a few empty elements
  • You’ve got at least 1 unused class
  • You spelt one of your anchor target attribute values as “-blank” instead of the correct “_blank”.

In addition to this list it looks like you could improve the web design a little.
I’d recommend centering all your elements.
In the future when beginning frontend projects I recommend that you build with a mobile-first approach. This involves using your browser’s dev tools’ responsive design window that allows you to emulate different screen sizes. It’s much easier to build your website with a mobile-first approach than to work backwards from a desktop design. You’ll have an easier time writing much simpler code this way and in much fewer lines.

1 Like
3

Thank You very much for your review.

  1. Could you please give me more detail on centering the elements? I have centered the welcome section and also the social media icon section. Is there any other section which does not look centered? Can you please point me towards it so that I can work more on it.
  2. Regarding the empty elements. Are u referring to the
    element in the navbar section? I put the empty element on purpose to push my navbar to right end.
    I came across the usage of empty div elements in order to push other elements in one of freecodecamp projects. Is it not recommended in real world projects?
1 Like
4

  1. Your projects grid isn’t centered on multiple popular screen widths.
    I encourage you to use this article for your projects grid as it helped me when I made my FCC portfolio project. A Complete Guide to Grid | CSS-Tricks - CSS-Tricks

  2. You could just delete your empty div that’s above your navlist ul and change your
    justify-content property in your #navbar to be flex-end. This way you can use CSS to position your element. Which would help you if you had multiple pages because then instead of having to add html to each page, you could simply use the same line of CSS to position your #navbar to the right end on as many pages as are linked to your CSS file.

  3. freeCodeCamp requires students to use a lot of ids in the projects for their responsive web design certification. However I consider use of Ids to be an unnecessary
    practice that makes working with CSS more complicated because of specificity issues introduced by the presence of ids. Classes unlike ids, allow us to select multiple elements with similar purposes and to narrow down specialized purposes by adding multiple classes to an element. An element with multiple classes would have its opening tag look like this <div class="class1 class2 class3 etc". The classes are separated by spaces and it doesn’t matter what order their in syntactically speaking.

1 Like
5

Hello!

Try out

html {
scroll-behavior: smooth;
}

a little animation that adds some value to short and medium sized one page sites.

1 Like
6

Hi @RulesofGames

Try adding custom fonts from fonts.google.com

It will spice up your website’s aesthetics with a touch of your personality

1 Like
7

Use Google Fonts sparingly. The more you add, the heavier your website, the slower your site will load.

In general shipping less JavaScript is the goal.

2 Likes
8

Thanks for taking the time out to give me detailed response.

2 Likes
9

Thank You very much for your review.

2 Likes
10

Thank You very much for your response

2 Likes
11

Thank you for your inputs.

3 Likes
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.