The coolest portfolio page ever <3

Hey guys, here is my portfolio project.
It took me 3 days to finish it. I haven’t used bootstrap, so it is not currently responsive…
I am going to learn how to make it responsive without bootstrap first, using plain css, then I will check how to use bootstrap.
I am wondering, what are the exact bootstrap tags that helps the page become responsive? container? or the columns stuff?
here is my page:
http://abdo-portfolio.bitballoon.com/

Thank you in advance for your feedback.

3 Likes

The basic structure to make page responsive with bootstrap looks something like this

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">
      Content here
    </div>
    <div class="col-md-6 col-sm-12">
      Content here
    </div>
  </div>
</div>

Have look at bootstrap documentation, it explains clearly how columns are used.

1 Like

@Kevinary Nice work here! :slight_smile: I like the way you organize the page and present your information. Your use of CSS @keyframes shows that you have a solid understanding of complex CSS. Here are some things to think about for improvement:

  • One thing I notice is that your alt attributes for your project images (p1, p2, etc…) are not descriptive of what the images are. Consider describing these images so people using screen readers and search engines will have a better understanding of the images (http://webaim.org/techniques/alttext/):

    The alt attribute should typically:

    • Be accurate and equivalent in presenting the same content and function of the image.

    • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

    • NOT be redundant or provide the same information as text within the context of the image.

    • NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

    You can see your image alt attributes and more information about your HTML markup here.

  • Are you aware of the HTML5 sectioning elements like header, footer, section, aside, address, etc… Those elements will help make your HTML markup more readable for other developers, search engines, and screen readers.

  • You have some missing heading levels. Specifically, you went from <h2> to <h5>:

    • Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

    • Do not use lower levels to decrease heading font size: use the CSS font-size property instead.

    • Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

    • You should consider avoiding using <h1> more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.

    (Source)

  • You have some CSS errors in your style.css file. You can see these errors by using this CSS Validator. You may want to copy/paste your CSS code into the validator because it looks at all CSS associated with your site, so it will find a bunch of errors with bootstrap, Font Awesome, etc… if you use the URI.

  • Some of your CSS selectors are verging on being overly specific. For example, .learning .curves .skill h3 only matches h3 headers with .skill class parents who have .curves parents who have .learning parents. This can lead to complications later on (https://internetingishard.com/html-and-css/css-selectors/):

    Don’t Overdo It

    You can nest descendant selectors as deep as you want, but don’t get carried away. Life gets confusing and terrible when you start writing rules that look like this:

    /* Try to avoid this */
    .article h2 .subheading em {
      /* Special styles */
    }
    

    This isn’t the least bit reusable because it matches only the following HTML structure:

    <div class='article'>
     <h2>
       <span class='.subheading'>This is <em>really</em> special text</span>
     </h2>
    </div>
    

    If you ever wanted to apply these styles to an <h2> heading that’s not wrapped in <div class='article'> tags, you’re kind of screwed. Same deal if you want to apply them to an <h3> heading anywhere on the page. This kind of CSS also leads to a specificity nightmare.

    I’ve been told to try not to nest more than three elements, as a general rule of thumb.

Those are some of the big things that jump out at me. Keep working hard on this stuff! :sunny:

Amaaaaazing…How did you add the smooth animation scroll. The only way I found on the web was using JavaScript. Did you use it too? All in all, your portfolio is just incredible. I loved it. Whatever you want to do, just don’t do it. Your page doesn’t need anything more.

P.S. as you are reading this, please bother to review my Product Landing Page (incomplete)

P.S. everything that I said above about your project, I do mean it.

Goodbye :grinning::grinning::grinning::grinning::grinning::slight_smile::slight_smile::slight_smile::slight_smile: