Looking to improve my projects

Looking to improve my projects
0

#1

So after spending many a day learning the basics of HTML and CSS i’ve cranked out all the necessary projects for my Responsive Web Design Certification. Yay! It feels great earning it, but I can’t help to feel that I’m not 100% confident in my mastery of HTML and CSS yet, and would love to know where I could improve. I’m linking my projects below for whoever would like to review them and tell me what they think design and code wise. I would also love to know of any additional resources I could use to practice and learn these languages deeper.

Thanks in advance!

Portfolio Page:

Tribute Page:

Technical Document:

Landing Page:

Survey Form:


#2

Shameless Bump :stuck_out_tongue:


#3

Being more specific on what you want to improve in your projects is better. One thing that I have noticed about the technical documentation is that the left panel is too big. Other than this, the look is good.


#4

For the portfolio page i would opt for something like:

@media screen and (max-width: 600px){
  #projects{
    flex-wrap: nowrap;
    overflow: auto;
/*     padding-top: 225px; */
    align-items: center;
    height: auto;
  }
}

because if you maintain the same height: 500px and overflow: auto you will have two vertical scrolling bars.


#5

One thing I am constantly going on about is the over-use of the div tag. That was an option, back in the bad old days of teh interwebs. In fact, here we go again…

Story Time (gather 'round, you millennial kiddies!)

So, back when the internet was a brand-new thing, the original intent was for colleges and universities to share serious documents: thesis papers, graduate projects, research notes. So the original HTML spec included a lot of simple document formatting stuff: paragraphs, headers, tables. Lists. Not much else.

So, to get creative, early “web designers” were table jockeys. Early WYSIWYG editors for web pages did INSANE things with table layouts, nesting and funky cell splits and stuff, to forcibly position elements around the screen. Basically, given a practical and spartan presentation media, designers tried to pretty it up. And in early browsers, it worked (but if you could see the HTML behind it, your brain would melt).

Then we got DIV elements! And CSS positioning rules. And things were good. -ish. Well, better. With more block-level elements, designers could begin to create more reasonable content, and position things in ways that seemed to make a little sense. Sadly, WYSIWYG editors were still insanely stupid and complex, but those of us who knew better were hand-tooling. (;

Then came the latest iteration, the semantic web It was decided that it would be a great thing to be able to create meaningful content again, rather than a rapidly sinking boatload of div tags all over the darn place. So we were given FAR more robust content-based tags: article, section, header, footer, nav, thead, tbody and like that. Tags that actually tell you more about their intent.

Not only did that make layouts themselves easier, but it made the HTML code backing the content far more useful. Now screenreaders, for example, can begin to get more intent-based tags (like figure and figcaption), and represent them in a meaningful way. Now, when looking at the code, I can see a MUCH smaller gap between designer and developer.

It has been an evolution, and it continues: Read all about it here https://en.wikipedia.org/wiki/HTML – but that DOESN’T include the shiny new HTML6 spec…

End of story time…

So here’s my point. You use div tags, like a LOT. Get out of that habit. For example, looking at your portfolio page, you use the nav tag, then everything else is a div. Use an article to contain the whole thing, then section tags for each section. For example, something like:

<header>
  <figure>
    <img src='...'>
    <figcaption>...</figcaption>
  </figure>
  <h1>Austin Krzciok</h1>
  <h2>Aspiring Web Developer</h2>
  <nav id='navbar'>
    <ul>
      <li class='nav-item'><a href="#welcome-section">Welcome</a></li>
      <li class='nav-item'>...</li>
      <li class='nav-item'>...</li>
     ...
    </ul>
  </nav>
</header>
<article class='portfolio'>
  <section id='welcome-section'>
    <h3>Welcome</h3>
    ...
  </section>
  <section id='project-section'>
    <h3>Projects</h3>
    ...
  </section>
  <section id='contact-section'>
    <h3>Contact me</h3>
    ...
  </section>
</article>
<footer>
  ...
</footer>

Now, within those, you might find reason to use div tags. And each of those will present as div tags. But they are far more semantic – they TELL you, in the tag name, their purpose.

That is the biggest comment I think I could give to you, or to anyone completing the web design curriculum. Look through your portfolio, and look at the actual HTML behind the page. Is it something that really distinguishes you from every other graduate of FCC, or any other training program? What can you do to make your sample projects stand out? How can you demonstrate that you are a forward-looking designer/developer?

Best way, IMHO, is by getting familiar with the direction the web is evolving. Get on the semantic web bandwagon. :wink: