Problems I faced while creating my portfolio website and how I solved them

Samiul Muztaba — Thu, 09 Nov 2023 13:16:28 +0000

When you have already learned a programming language and are trying to do something with the programming language for the first time, you may encounter some problems. And, to solve the problems, you can take help from YouTube or other resources. I learned html and css a few months ago. Then, I learned Python. A few days ago I decided to build my portfolio. This is my first project with HTML and CSS. And yes, I faced many problems while creating this portfolio website. I asked for help with this problems and below I explain how I solved this problems.

Making message box without backend

I told you that I only learned HTML and CSS, not JS. So, to receive messages from others, I don't use any JS or backend language, so how? The answer is I used formspree for this. You just need to visit the site by clicking here. Then, you need to click 'Start' and do the following. They may do some surveys with you. And after registration on formspree you need to click + icon to create a form. When you click the + icon to create a form, they will send you a verification mail. From Mail, you need to verify your email and then click the + icon again to create a form. This time, you don't have to do anything boring. Just give your form name and your email where all messages will be sent and your form will be created and look like the image below.

Here you will see the text "The endpoint of your form is:" and below this text you can see a link to copy: https://formspree.io/f/yourformid. Copy your ID from there and go back to your html file where you want to enter these codes

<form action="https://formspree.io/f/{form_id}" method="post">
  <label for="email">Your Email</label>
  <input name="Email" id="email" type="email">
  <button type="submit">Submit</button>
</form>

Paste your form id into form action="https://formspree.io/f/{form_id}"s {form_id}. All that actually works is to make the real message box. Now, you can add more input and CSS for a nice look.

Choosing wrong css unit

When I started building this website I didn't know that choosing pixel units was wrong. Because, pixel is a specific unit. When you use pixels, you have to resize a few times to make it responsive. And it's obviously boring and a waste of time. The right unit is rem. Because, rem units refer to the size of the root element. This means, it automatically resizes according to the device size. But, I didn't know this when I created the portfolio and was going to make it responsive. Here comes the simple two-step solution

1. Replacing all the px to rem

You can do this simply with vscode. I only know the vscode trick to replace a text. If your code editor is not vscode, you can search how to replace all specified text with other text. In this case, I show how you can do it with vscode. First, go to Search from the activity bar. You can use shortcut Ctrl + Shift + F. Then, search for "px" and below you'll see a replacement bar. Type "rem" in the replace bar and click the replace icon or just press Ctrl + Alt + Enter on the keyboard and rem will appear where you type px.

2. Setting 1rem = 10px

After replacing all the px to rem you will see all your sizes, margins etc will be bad because we didn't change the rem value. 1 rem = 16px and it's too big and cumbersome to calculate, for that, you can write the following in the CSS file:

:root{
    font-size: 62.5%;
}

body{
    font-size: 1.6rem;
}

Now go ahead and find all the rem values and divide them by 10, which is very easy. If the last digit of the value is 0, remove the 0, eg 20 to 2. If the last digit of the value is not 0 then add a . before the digit, eg 24 to 2.4 and everything should be perfect.

Extra white space

When making my website responsive, I noticed another problem that when the screen is small, an extra white space appears on the left side. To solve this write the following things inside a media query:

html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

overflow-x: hidden; is the main code to hide extra white space.

Conclusion

I hope this post was helpful or good for you. I tried to explain all my problems but really, I can't explain all the problems and I am really sorry for that and if I have done any mistake, please forgive me. Here is the link to the portfolio I was talking about.

My portfolio website github project link here
My github link here
I also write blogs at here and here

Comment my mistakes, where you got help, which part was best etc below.

Thanks! Have a good day!