Portfolio page first draft. Some feedback please

Hi all! I still haven’t figured out how to make the introduction image to fit the viewport, so I haven’t submitted the project yet.
Please tell me what you think and if I needed to add more. All the tiles are links.
Thank you!
@michaelnicol if you have the time and you’re around…

1 Like

Hello @Eugenia! Nice job so far. Here’s my input.

You welcome section is off because you gave to a padding of 250px. So the left and right side both have a huge 250px space. Get rid of that. Also you can assign multiple attributes to your background image if you just use background vice background-image:

background: url("https://i.imgur.com/qlHigOb.jpg") center no-repeat ;

Now it should be centered and won’t repeat like it was. if you needed that padding on the top and bottom for some reason then you can add it to just the top and bottom by using padding-top or bottom.

For mobile:
To center you flex items you need to add align-items: center; to your #projects in the @media section. Right now they are in a column towards the left of the screen vice centered. You’ll also want to center you links.

Also what is the purpose of adding the background image to #heart-of-a-cat in your css? You already have the image in the html.

Good luck and great job!

1 Like

Hey @Eugenia,

good work so far!

Some ideas:

  • in general, it’s good advice to use a lot of spacing, so that people see contrasts between elements e.g. the text under each project could benefit from some spacing to the top, also the “projects” link at the top of your page
  • I think the font sizes are very small

Keep up the good work!

1 Like

Hey @jfirestorm4 and @miku86 thank you so much for all your suggestions. They all worked really fine and improved the page especially in cell phones.
But still I can’t get that viewport to pass the test! I tried a height of 100%, it only reduced the image of the welcome section still more. I tried everything and it still doesn’t work. So I’m going to search for help in the corresponding section of the forum.
Thank you so much guys! I’m glad that you took the time to write and suggest.

If the challenge is to have a specific section the be the height of the viewport then your best bet is to use the vh unit.

#welcome-section {
height: 100vh;
}

Check out css units https://www.w3schools.com/cssref/css_units.asp

1 Like

@jfirestorm4 I already tried that. It really messed up everything-still no viewport. Thank you anyway!
@jfirestorm4 It worked! I had used it with a combination of other factors and maybe some of the others was what messed up the page.
I passed the test and it’s thanks to you!
I’m gonna check that link later.
I also want to thank @michaelnicol without whose help and teachings in previous projects this wouldn’t be and his example brought me this far. Thanks guy! I left proof of your invaluable collabs in the footer of the page.

1 Like

Hey welcome back again!

So I want to get a general design down for your page. It has a lot of potential, but it needed to be done correctly. Your page is decent so far but it could have more.

In full scale webpages like these, we don’t use colors as much to add detail. Instead, we use a select few colors and add different sections to break up the page to add structure. Images, fonts, and other small styles are key aspects to getting correct.

For example, here is my Portfolio page.

As you can see in my page, its fairly simple. Its broken up into multiple sections, each simple in their own but different from each other.

Now, each of these sections has a purpose. I have a gallery for my certifications and projects, a section to compare my skills, and a simple contact information card. These sections also might be their own containers and own CSS classes/ IDs.

Think of each section like a floor to a building. Each floor has its own purpose and they all combine to make a complete building. You should focus on one floor at a time and make each somewhat unique to fulfill its purpose, but follow the same general style (colors, etc) for all of them to make sure they look good combined together.

Their is 100’s of ways to do these sections and each way can heilght a different aspect of what you are trying to display. However, each section follows a style depending on its purpose. Your contact information wouldn’t be displayed like a art gallery in a webpage and vise versa. It needs to make sense.

Simple and modern pages use a select few colors (white, gray, and black) along with images to build the page. However, the way you combine them can make or break a section.

To get started with my project, I started looking at webpage templates online to see what I like. Lets start with the main introduction image, the first big image that you see when you get on the page. This combines with the navigation bar so the styles must match between the two. I put a red box around the section I am talking about and only focus on that. Don’t worry about your footer or project gallery, just focus on this part for now.

Click here for web templates

As you can see, these are very basic and simple designs. This is also the same design I went for in my page, I just used a different navigation bar. The images are full scale, high quality, and the colors are mostly the same throughout the entire image which removes eye strain when reading the text over top of it.

Commonly these images are background images to a container which has text in the center. The image is key here and will make the page look good or bad. Their is little in between with this part of the page.

Notice how each of these have completely different purposes but follow the same general design rule.

Lets start off with this. Do some research on some basic websites and templates and find whatever is interesting for the main introduction image. Don’t worry about the rest of the page and try to keep it simple for now. Their is a lot of webpages that are too complex to take inspiration from, so start reasonable.

Don’t think “How can I build this webpage”, think “How can I build this small section and style from this webpage and combine with other sections/ styles I like”. You can mismatch different sections and styles from different webpages that you come across in order make what you want. And keep in mind you will have different sections pass this one, so don’t think it needed to display everything right now.

1 Like

Hey again Mike!
This is the theme I chose:


I loved the image in the site you guided me to, very contundent and whole to put it somehow.
So you are telling me my image doesn’t work? It’s a pity, I loved that image and thought it worked fine. Plus, it’s showing my Photoshop skills (do I have those? Haha).
Problem is, big images cost money. Maybe I’m wrong? I guess you had to pay for the images you included in your portfolio, especially the travel to space landing page. But maybe you didn’t! I’m telling you this because I don’t even have a credit card. You see how badly off I am haha. So perhaps if you give credit to the person who did them that’s OK. It’s like deviantart? Some people asks you only to give them credit, at least it was like that some years ago.
And there’s the thing that the image I put there is part of my skills. I have a ton of them and maybe there’s another one you think is less distractive?
A lot of questions for you to answer. Sorry kid.
And speaking of you, you really should devote to teaching. You’re really good at that. You have clarity and you’re very very didactic. I suppose you already know that.
So thanks once again and sorry about the whole lot of questions!
Edit: This is the image and lettering I was talking about.

Edit two: I know what you’re getting at. Like the image in your portfolio, this image is mostly gray. It sets the attention on the words without distracting. Got it kid.
And that little man in the middle guides the attention to what seems to be a button to go down. I think I’m getting it.
Edit three: maybe I could turn some image of mine to black and white (and gray of course)?

@michaelnicol Hey Mike! You probably been busy and I’m not sure what to do with my portfolio yet. So I decided to take some time from coding to learn JavaScript and a seven hour course on Algebra I need very badly. If you happen to pass through here and want to drop a word, it’ll be alright. Meanwhile I’ll brush my programming skills and relearn some math I hadn’t practiced since high school (a very long while ago haha).
So good luck and happy coding whatever your project is right now. And thanks. As always.

Hello @Eugenia

I love your intro background it looks amazing. You have got a good looking portfolio.

Here are some suggestions and some ideas which i noticed :

  • Your website is responsive, but it can be improved more. I was inspecting responsiveness on different devices if someone is browsing on low resolution phone your intro image is cut out along with some intro text
  • Imgur

  • In most of laptops and tablets (with width 768 px to 1024px) your HTML color element is overlapping with your footer
  • Imgur

  • In 4k resolution I am seeing empty spaces in project section
  • Imgur

  • You can also style your links to make them animate , give some background, remove text decoration
  • In project section you can add two links , one to show your live project and one to show your code so that in future you are applying for jobs and someone want to see your code with live demo they can do it easily
  • Good work so far, keep it up. :slight_smile:

    Hope you had lots of fun making your portfolio! :smiley_cat:

    1 Like

    Hey @Lucifellow valid points! I’m going to add some media queries to address those responsiveness problems.
    Funny thing with the text decoration, I already have it to none but it keeps appearing. Gonna check that out.
    Thank you for your feedback! Much appreciated.
    Edit @Lucifellow: Hi, I mostly did all you suggested. I have no way to prove the 4k screen though cause I don’t have one. So there I just guessed. I think the smaller screens got right.
    I can’t do the live project because I don’t have codepen pro :sob:
    Oh and the text decoration keeps appearing. I tried to put the “none” attribute everywhere. It didn’t work. It really puzzles me!
    So thanks!

    Hey, sorry for the delay. I went on a trip and couldn’t log into my account for a while. My password reset wasn’t working for a while either.

    That image is very nice, but it seems to drag too much attention away. Maybe your idea with making it gray would be nice. You could also find some nice pictures of your home town or area and use those. For my page I used background-attachment: fixed; in order to make the image stick as you scroll down the page.

    Your image should be big and grand. It should be 100% width and properly scale with the page.

    The text over top of the image also isn’t the best. Its a good start as centering that container and such is a bit of work, but altering it for whatever style you are using would be best. Try looking around at other templates to see if any specific fonts that you like.

    We are going to add a gallery so don’t worry about displaying everything. You make nice designs and we need to display that somehow.

    Your navigation bar needs some reworking. Try finding one that fits your page and that you can copy style wise. Their is nothing wrong with starting out your web design page by pulling from pages you like.

    1 Like

    Thank you kid. I’ll do that and thanks for taking the trouble to write.
    I’ll try to apply those changes you suggested and see how it works. Thank you again!
    Edit: Here come the changes! https://codepen.io/33P/pen/zYrmxad
    I turned the image into gray and changed the font of the welcome page. I also made a hover state for the navbar link, but as the bar is fixed as per the tests I only was able to change color and background, cause there was no way I could make the link move or change size.
    So here it is. Something that puzzles me is I can’t take the underlining of the project tiles text even if I wrote text-decoration: none. I can’t get it.

    Hey,

    Try using flexbox for your navigation bar since their will be multiple items on it eventually. This will allow you to better change things around.

    Make your image 100% width to remove the black bars on the side. The image is pixelated when it upscales, so maybe try another image.

    1 Like

    Well kid, here we go again.
    I had some trouble with my background image. I got a really huge image so it doesn’t pixelate, but thing is the page doesn’t show all of it. Maybe something with the code I still don’t know? It was set as center no-repeat. Then I erased that and it’s the same. I tried to put the image at the html as <img> so I could style it in css but the page became a mess. I’m sorry I couldn’t solve this. Just for you to get an idea about how the image looks:


    I turned the navbar to flex and it works fine. Waiting for new things to fill it up. I added an animation.
    So thanks once more.

    Hello @Eugenia!

    If you want an oversized background image to cover the container you can use the background-size:cover; property. This will stretch it to fit within the container. If you don’t want it stretched to fit the container you can used contain.

    Since it seems that you want a fixed background I would do something like this

    #welcome-section {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      background: url(https://i.imgur.com/UEhUNoG.jpg);
      background-attachment: fixed;
      background-position:center;
      background-repeat:no-repeat;
      background-size:cover;
      height: 100vh;
    }
    
    @media (max-width: 750px) {
      #welcome-section {
        background-attachment: scroll;
      }
    

    Obviously you can use the shorthand method for all of those properties. I’m sure there is a way to get a parallax effect on mobile but it may just be easier to set the back ground to scroll.

    See if that does what you’re looking for.

    1 Like

    Hi @jfirestorm4! R2-D2, you did it! (Sorry). Thank you so much, it worked alright. Now look at the page as it is now.


    When I put the attributes all together it didn’t work, but I did as your code says and it was the right thing. So thanks.
    1 Like

    With the help of @jfirestorm4 your front page is starting to come along with the image.

    The thing you need to adjust now is the style. I am not sure how well the text over image is working. I want you to have text and the image can work, but I feel like something is missing. You laid the foundation and now we want to detail it to get it right before moving on. Just worry this one section for now. Even the navbar can come later.

    I think I have a idea on what it could be, but the first thing I want you to do is to put all of your welcome text on the image into one div, independent of the image background, and then center it horziontally and vertically on the page. It should look the same as it is now.

    This is because your #introduction text is in different container then your h1 name text. This makes it hard to style anything without worrying about formatting and margins and such.

    Also, try to make spefic classes for your text rather then targeting every h1 element.

    For example.

    .container > h1
    
    

    h1 elements are used by Google to automatically for keywords to figure out what your webpage is about. It is not as important now as it was 10 - 20 years ago when Google first started, but it still does help slightly in helping your webpage popping up in searches if this pen was its own website.

    You can use as meaning h1’s as you want and it doesn’t matter nowadays, but I still do keep them special in order to make sure some of my important titles are h1.

    Try adding the following CSS code

    * {
        font-family: 'Raleway', sans-serif;
    }
    

    This will make every element on your page using the * CSS selector the Raleway font. Its a more modern feel. Remove any other font references besides this.

    1 Like

    Hi Mike! Thank you for taking the time and effort to answer.
    So I finally found some time to apply the changes you suggested. I googled the font Raley since it was not in my PC so I uploaded it in the html section and then added the css code you told me to.
    I did this:

    <div id="welcome-section">
    <div id="welcome-section-text"><h1>Hi, I'm Eugenia</h1><br> Translator, artist, web design student
    </div>
    </div>
    

    I kept the h1 as you suggested but I nested the div with the text inside the div of the welcome-section as a whole so I was able to tweak the text in the css section.
    One question though, is this the font how you visualized it in your PC? I mean the font I had chosen before.


    I hope you like the results! Thank you once again kid.


    A lot of great changes as I see the thumbnail of the pen when I first forked it and I can’t believe it’s the same. Lots more of style and coolness. Thank you kid!
    1 Like

    I am happy you are making progress. Good progress.

    For the font, it was actually one I found on Google Fonts and was combined with other parts in order to give it a futuristic and modern feel. I use this font for most of my pages now and I have mostly likely spent well over a hour of my time researching dozens of different fonts to see which ones are best.

    The good thing about this font is the consistency. The font is exactly the same width on every letter which makes it easier to read when on a background.

    For your page make sure you keep things consistent. Your welcome section is a div while the projects is a section element.

    Now your image is nice, but the black text is not popping. This has always been a issue for me to. I did some research and came across a solution for this from CSS Tricks.

    They were able to darken the image by adding black color over the image and then giving it transparency (known formally as opacity), in order to create the effect. I then added a text shadow in order to make the text feel more separated from the background with depth.

    The code isn’t much different from yours but instead of using background-image it uses background to combine with the color. The flexbox is still their and so is the background-attachment.

    #welcome-section {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
     background: 
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        url(https://i.imgur.com/UEhUNoG.jpg);
      background-size: cover;
      background-attachment: fixed;
      height: 100vh;
    }
    #welcome-section-text {
    /* Increase font size increase, color changed and text shadow */
      color: white;
      text-shadow: 2px 2px 5px black;
      text-align: center;
      font-size: 40px;
    }
    
    #welcome-section-text > h1 {
    /* Reduced h1 margin due to em */
      margin-bottom: 3px;
    }
    

    h1 has a natural margin of 0.67 em, or 67% of the font size. In this case, it was 26.8 pixels with a font size of 40 pixels. This is why your margins were getting bigger as you increase font size. h2 is 0.83 em, etc. The em unit is not a abbreviation for anything.

    This is my changes and after this we will move onto the your about section.

    1 Like