My personal portfolio is done! Please let me know what you think

Hello Kaija,

Just checked your work.

It looks good on desktop, but for mobile and even tables, and even laptop, looks broken!

I see your page has some html tag close-open issue, for example considering following sample
<a href="">Tribute Page<a>
Please note the <a> should be </a>
Another sample issue:
<h1 id="Contact"> Contact </h1 (close tag is faulty, missed >)
please note it should be <h1 id="Contact"> Contact </h1>

Same about the CSS part, some typos, for example grid-template-column is wrong, it’s grid-template-columns(mind the sat the end)
TIP: codepen highlight typo issues with a red/pink background color, also use ctrl+space when coding to get code completion suggestion.

About the layout, I tried to figure out why it’s broken for mobile, but couldn’t find the source of issue, and I recommend you start a new page with a new layout.

One good practice is doing the layout first, not adding any page content, image, text, etc…
Give each section and container(like div tag) a unique background-color and check if the page is responsive. Checkout if each container moves nad locate at correct position in every view ports. then add contents one by one.

Would like to see a new great work dear, keep going on grat work. Happy coding.

Thank you for your advice! This is helpful! How can I ensure that my layout works on other devices? Do I have to do anything in specific, like add a particular type of code, or would doing the layout first work?

Also, how can I check if the page is responsive?

Hi. Nothing beats testing on various real devices (phones, tablets etc.) but most of us do not have a whole testing lab full of equipment available. The next best thing is to use the developer tools in your browser. For instance with Chrome, go to the menu -> “More Tools” -> “Developer Tools” -> “Toggle Device Toolbar”. The device toolbar will show up over your page and from there you can adjust the virtual screen size, change from landscape to portrait mode etc. There are also presets for certain popular screen sizes and devices such as Ipads or Samsung Galaxy phones. You can see how your page looks and adjust any problems you find.

Firefox, MS Edge, and Safari have similar tools. It is a good idea to install as many browsers as you can and test with them to uncover any subtle differences in the way they render HTML which could break your design.

One very simple way is resize the current page to see if page is working with all screen sizes, very easy, I usually do this way.

And as you code with codepen, you may resize the preview panel to make it smaller or larger and see the responsive behaviour.

Thank you! Is there a specific code I use to make my work responsive?

Also when you say do the layout first, do you mean do CSS first? Add CSS to each step of the HTML I do before continuing on the the next HTML code?

This goes like this, you do the HTML and CSS together, but the html part is not about page content such as text, elements, … just assume you are trying to build an empty layout.
Later once the layout is okay, add contents one by one.

there are many out there, you may search and come up with a good one, it depends on the way you like to code your page. I believe you can, easy.

I tried to redo the layout without adding images or anything. What do you think about the layout?

Good progress for layout.

I don’t know if I’m the only one has this issue, but there is a horizontal scroll all the time in your page I don’t know what caused this!
but got this! this is becasue you scaled one section of your work 3times, please don’t you may enlarge the image/icons in much easier manner. please check #social rule transform: scale(3);, please remove it.

Ok now it has less content, you may debug the layout to see if it’s working as expected.

You may give each section a unique background color, so you can see each section is moved and sized probably. It helps very much to see and fix any component goes off the page bound to debug.

For mobile you better give the title/header text section a little smaller size so they won’t go off screen and break your layout.

It’s good work, you may add images back to it now.

Happy coding.

Ah! Thank you! Is there a way I can change the size of my header specifically for mobile screens?

Go for the background-color for each section I suggested, to see how each section is located and advanced in your page and in different views.

You will find out some sections have too much padding/margin in mobile could break your layout, so you could fix them.

You may also change the size of the text a little bit too.

Thank you for all your help!

Ok, the layout seems to be working when I check it. Hopefully this is the last time I need to run it by you. What do you think?

Thank you for being so helpful and patient!

I could not check the link you provided. But as checked the previous page you provided, yes very good progress.

Please remove the width:300px from your input text fields, and use a relative unit like %, like width:90%;

Very good progress, the scroll is gone also.

Happy coding.


One thing I would like to add is to have each section take up the full length of the screen. Do you have any suggestions for this?

Came across this minor issue in your portfolio section.
(Occurs when these items are behind the navbar, and we hover on the items)
Can be fixed using the z-index property in your navbar :slight_smile:

Thank you! I’ll fix that.