Please see my portofolio

Guys please see my portofolio and tell me how I can make it better.

Hi Bilash,

First, welcome to the community and good job on trying to make a website.

I would like to know how far are you in the curriculum?

Regarding your code:

  • Be careful of opening and closing tags properly
  • It is best practice to keep styles in CSS and not do it in the tags
  • There are empty css without any property. Presenting a clean and commented code will help you get reviews in the future and also help you maintain it.
  • Documentation about the br tag:
1 Like

I have just started the basic javascript course

Do you have an instagram account?

It is difficult to read the main header because the background also has text which is fairly prominent. Also, your yellow colored font is extremely small in comparison to the rest of the text on the page. It is hard to read. Also, that red/orange text near the bottom by Instagram icon could be difficult to read if someone was colorblind.

I noticed you added both Bootstrap 3 and 4 to your CSS module. You should pick only one and use the applicable syntax for that version. Otherwise, you can end up with some strange side-effects.

One question I have is what is the purpose of the white lines running down the right side of the screen? These can only be seen on large displays, because they get cutoff when the screen size is smaller.

Those white lines are of the background image

Now check my portofolio

That is better, but the freeCodeCamp text in the background is too distracting and makes it difficult to read the main h1 element text. If you can change the opacity of the image itself to make it more transparent, that would help. You can accomplish it with CSS, but it is a more advanced solution, because you must create an extra div with wraps around the main content. Below, I have refactored your code to have three main divs (green-background, background-image, and content) which I layered using the z-index property. Basically, the green background is the bottom layer (z-index: 0;). The FCC logo is the background-image layer (z-index: 1;) and finally your original content was placed into a div of its own (z-index: 2;). I chose an opacity of 40%, so you can still see the logo, but it is faint enough to not conflict with the main content text. I also chose a darker color of green, because the opacity of 40% on the layer above it does lightened the original “green” value a bit.

See below for the additional CSS needed:

#green-background, #background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007300;
  z-index: 0;

#content {
  position: relative;
  z-index: 2;

#background-image {
  background-image: url("");
  background-repeat: repeat;
  background-attachment: fixed;
  opacity: 0.4;
  filter: alpha(opacity=40);
  z-index: 1;

and below for how you would need to structure your html code:

<div id="green-background"></div>
<div id="background-image"></div>
<div id="content">
  <!-- Put all of your existing html code here -->

When I look view your project, I see the following. I see text after “I am fourteen years old”

Sorry it is only unable to see in codepen’s editor’s view

How is it now sir

I am viewing it through the Editor view. Can you post a screen shot of what you are seeing?

Sir I am able to see it now

please follow me on instagram :slightly_smiling_face:

I don’t use social media.

No problem but please stay in contact with me so I can ask you If I have a problem in coding

I am almost always on the forum during the hours 7 AM to 10 PM PST on Monday through Friday. On the weekends, I sometimes get away from technology and go backpacking.

PST means Pakistan Standard Time

Pacific Standard Time. I live in California.

It means that your country’s time is 11 to 13 hours slower than my country’s.
I am from Bangladesh