First website feedback

Code Feedback
1

Hi everyone,

I have created my first portfolio website and was hoping to get some feedback on it, specifically on the markup for the html; how I’ve created containers for each section. Also, if you guys see anything unnecessary in the css. Thanks a lot :slight_smile:

ps Its not fully responsive so that is why I have not launched live. I’m still learning about media queries.

https://sorushdadkah.github.io

3 Likes
2

Hi Haudz,

Make sure you are sharing your site via live url like codepen so no one has to download your repo :slight_smile:

3

Hi,
I am familiar with codepen but I am not quite sure how to make it read my media files. I just created another repository and it said media file exceeds limit.

4

You can try github pages https://pages.github.com/

1 Like
5

I would suggest checking out netlify

1 Like
6

Thanks everyone. I just updated the the my_website to, haudz.github.io

9

Thanks for pointing it out, Randell. I partically fixed it.
Another update, I refactored the code quite a bit and now I’m left here. I am trying to make the header a bit small height wise so It can look like the original and get the nav-bar to the center. I cant seem to get the targeting of the nav correct, I’m not sure what to target so I could center the

    … This is my code now…

    header.shrink {
    background-color: #212529;
    font-family: ‘Montserrat’, sans-serif;
    top: 0;
    padding: 0;
    margin: 0;
    z-index: 3000;
    position: fixed;
    width: 100%;
    transition: all 0.5s ease-in-out;
    text-align: center;
    }

    header nav.shrink{
    display: inline-block;
    margin-right: 300px;
    }

    .logo h2.shrink {
    font-size: 22px;
    font-family: ‘Kaushan Script’;
    color: #f3c736;
    top: 16px;
    position: fixed;
    }

    23%20PM
    23%20PM2558×1310 185 KB

10

Wow, this is you first web site??? Is incredible. I’m a newbie so I can’t provide help but for me this project is looking very good

11

Hi Everyone,

New UPDATE. I just finished fixing everything. Thanks again, Randell!

12

Thanks Vaderi! I had a crash course of html/css about a year ago but I focus mainly on Databases. As of 4 days ago, I wanted to challenge myself and start learning more. Good luck!

1 Like
13

Noticed that on the first scroll(not using scroll button) in Firefox it kinda breaks a bit:

image
image1336×348 90.8 KB

Also images for portfolio items at 1920x1080 are not big enough:

image

Other than that looks pretty good :+1:

14

Yes I noticed that as well as soon as I released lol. I’m working on the breaking header. Would I need to fix the photo issue in a photo editor?

Thank you

15

Hi Haudz,

That looks amazing for your first website.

As for suggestions to make it better, mainly design improvements.

  1. When I scroll down just a bit, the pages jumps back – it’s your sticky navbar, but you should fix the jump
  2. Color and contrast, I was just watching some video on YouTube about this subject.
    “WELCOME TO MY PAGE” – you can make that look better maybe by making the background image more dark, greyscale or something of that sort.
  3. Skills section: I’d put every category in a card, that’d look much better.
  4. Contact section: maybe move the github and linkedIn icons to the section.

General tips that I have recently read about:

  • Avoid using true/pure black and whites as much as possible, if you notice lots of websites use near-black colors for texts and such.
  • Use shadow for almost all your web: the main title, buttons, headings, cards.

Disclaimer (lol): I am a beginner myself and don’t even have a portfolio, so take my advice with extra care hehe

16

Hi everyone,

UPDATE: I fixed the break. Now I need to fix the photo scaling like @ezfuse mentioned.

17

Hello Everyone,

So I have gone ahead and made some changes with the media queries(iphoneX) and refactored the code. I’m still running into a few problems…

  1. I have a weird jumping motion with the .btn-scroll on my home-page for when the page is small.
  2. I also cant seem to get the #team section to fit on the phone size either.
  3. My About Me img is centered on Chrome but it shifts on Safari…?

Thanks

18

Haudz, what a beautiful first website!

If I have time I’d take a look at the scrolling but I wanted to offer some hopefully easy improvements.

  1. Show the clock directly on the main page.
    Try to incorporate your clock directly on the page with a button to the source. I really like the initialization as well as the ease in. It shows your intelligence and style.

  2. Make Travel with us a site
    Show Travel with us as a site not as a link to github. I have to work too hard to get to what it looks like and a recruiter likely won’t even bother.

  3. Change the banner image and the welcome font.
    Your site is all hand scripted but it doesn’t look it because of the generic photography and font. This is a shame. As I really like your current picture on git hub if you could expand on something like it, it will look far more personalized.
    Also rather than saying “welcome to my page”, try to incorporate a favorite or inspirational quote.
    http://www.keepinspiring.me/famous-quotes/
    If you want some ideas for fonts that are free, you can try looking here and typing in your chosen welcome text.
    https://www.1001freefonts.com/

Hope this helps and again awesome first site!

19

So far pretty good experience on mobile, quick and responsive. I did notice text doesn’t wrap correctly, although the div containing it does. Kind of a nitpicky thing. I’ve noticed many mainstream companies can’t figure out the word wrap within a div thing either.

Screenshot_20181007-095208
Screenshot_20181007-0952081080×1920 205 KB

20

Thanks for the feedback, everyone! @WhisperPntr. I have thought about implementing a modal to show the clock. As for the Travel Site, I’m not sure how to go about that? I thought you can only have one Github.Pages.

21

@sheideshu ahh yes… I kept messing with it but i didnt get it to work. Any suggestions on how to wrap the element?

22

Not off the top of my head, but for the mobile version you could try eliminating the side padding and letting the text wrap naturally at the page border, for mobile browsers using portrait display there’s really no reason to pad out 10-20% of the width anyway.