Portfolio page feedback plz

Code Feedback
1

https://codepen.io/btedds/pen/jOVBVQL

Happy with this project, managed to keep it simple. Applied (and understood) media queries, flexbox and padding vs margins finally :exploding_head: - I had to read up on flexbox plus play the Flexbox Froggy game which also helped a lot.

Anyway let me know what you think.

2

Hi there,

Your page looks really good, well done!

Some things to improve/revisit:

  • add images, instead of placeholders
  • run your page through w3c validator to catch some errors in your code
  • codepen automatically provides a boilerplate for you, your code automatically goes into the body element (no need to use <body>). If you want to add something to the head, click on the settings , then HTML.
  • on small screens there is a horizontal scrollbar visible and the icons are getting deformed:
    Capture
    Capture320×539 11.7 KB
2 Likes
3

Thank for all the feedback - extremely helpful :+1:

The paceholder is an image - I just created an image with a placeholder logo on it. I added it so I could check responsiveness with more images. I can remove it if it is an issue.

I have changed the width tag to min-width and the same with the height tag for the icons. This seems to have fixed the deforming issue under 200px.

The scroll bar still appears - I wasn´t aware that having a scroll bar on really small screens was an issue? Should I be making everything shrink down for the smaller screen size and at what point is too small - do I need to google this?

4

I mean use actual images, I’ve seen that you have other projects, why don’t you make screenshots and use them for you projects section?

What I normally do is check if the page looks good on default mobile devices in chrome devtools:

3ab97ae49083b99a4343bc0fa41f0b25

1 Like
5

Ooooh what is this? Looks :cool:

EDIT: I googled is it this:
Using Device Simulation in Chrome DevTools for Mobile View

  1. Open DevTools by pressing F12.
  2. Click on the “Device Toggle Toolbar” available. ( …
  3. Choose a device you want to simulate from the list of iOS and Android devices.
  4. Once the desired device is chosen, it displays the mobile view of the website.
6

Exactly, it’s extremely useful, not only for responsiveness :slight_smile:

1 Like
7

Just been taking a quick look - its brilliant. Thanks for the tip - I will be using it a LOT!

8

Quick pointer, firefox has the same DevTools function (just hit f12) but firefox has the added functionality of a grid inspector which labels the rows and Columns of a selected element.

I actually use chrome as my default browser but pretty much solely use firefox for web dev as it’s dev tools are better than chrome.

I’d recommend trying it out and seeing the difference.

1 Like
9

Excellent, thank you for the tip, I will take a look - the grid inspector sounds like it will be really helpful.

10

Your portfolio looks good @BTedds. Some things to revisit;

  • For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Change the ampersand to the HTML entity to be compliant with the reserved characters standard.
  • Don’t have access to your google acc’t so not seeing your project screenshots
    • Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
      https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
      or
      https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
11

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