Akatsuki Website - Part 1

So, I haven’t really finished the CodePen but I’d like you to tell me how could I make it better, how to refactor my code, etc.

All ideas are welcome. :beers:

A few suggestions for improvement:

  • It needs to be responsive. When I narrow my browser I should not get a horizontal scroll bar. At the least you will need to rearrange the member names so there are fewer columns.
  • The blue links on black background is too hard to read. You’ll need to change the link color to something that has more contrast with black. You can check for color accessibility at https://webaim.org/resources/contrastchecker/.
  • Your headings should go in numerical order and should not skip levels. Currently you are going from h1 to h3 to h2.
  • The text content feels a little cramped. I would add some vertical spacing. And I would also put a max-width on the content. If the lines get too long it is harder to read.
1 Like

Where and why should I put a max-width?

Text lines that are too wide (i.e. have too many characters per line) are harder to read. Currently your text will widen as far as my browser can go (and my browser can go a long ways). There are a ton of opinions out there as to what the ideal line length is and there is no magic bullet answer. But in general I find myself trying to stay within the 45-55em range.

As to where you should put a max-width, this depends on your content and design. For your page it appears that the only content at risk of getting too wide are the two paragraphs near the top.


Moreover, you want, per the definitions of the HTML/CSS5 Cert, to be responsive with the NavBar element for each particular div tag (with a specific modifier/ class/ attribute, etc…).

For all cases (of paragraphs), are you using the justify-content: centered…?
If so, could you modify it s.t. the font-weight works with lesser elements that aren’t emboldened title tags… If not, could you italicize/ embolden the title tags (that redirect using the navbar elements) in order to correspond with the color-based schema that auto-resize to fit to form for you Naruto: Shippuden page here… This can be typically done using pseudo-selectors/ mixin procedures defined by CSS query elements (@nameOfElementORPropertyBeingObserved) (name of PseudoselectorToModify) {…[insert properties to auto-adjust based on the selected properties thereof…]}…

Nonetheless, good job on what you have thus far…

If you so chose, you could create internal js documentation/ methods/inner guts that would allow for a more dynamical appending process… This could be done so via object form *.json({“objectProperty”: objectKeyHere}), where you would dynamically append to a list of users that have fed in the proper inputs as your Submit button is clicked/pressed… By a dynamical button press, one could check if the inputted values work before being appended to an internal array, either save to a read in file of json dictionary objects (userList), or let it manually create the array after each use through metadata or residual cache data…The handling would be up to you, of course…

Else, dynamical, preconditional checks for each form element (as input), that could be of great help prior to feeding in the input fields…

Tips, changes, etc. are welcome! :beers:


Nice, this is a pretty solid effort. You’ve made a lot of progress.

Overall this responds nicely to both changes in view port width and text size. I think the only issue I still see is the nav links. When I narrow my browser all the way in they sort of get a little too scrunched up, and “Become a member” turns into three rows. I think it might look nicer if you gave them more room at the top by allowing the <nav> to stretch out across the entire width of the page.

At the bottom of the page you have centered the “Become a member” heading but the form is off to the left side. I think it would look better if they were both positioned the same.

I would also recommend you put a max-width on your content (in ems). Currently the text will stretch as far as I can widen my browser (and I can make my browser very wide). Text lines that are too long are harder to read, so putting a max-width on them helps with accessibility.

I would also recommend you put a max-width on the members section. Right now I can stretch them out so that nine of them are on the top row and just one of them is on the bottom row. Putting a max-width on them would keep them a little more compact and uniform, which I think looks a little better. This is of course my personal opinion and you are free to disagree.

I don’t know who told you to name a class like that, but in my opinion I think you should implement camel case like. But like I said, it’s just my opinion and my habit.