I am looking for some honest feedback on my web application. The web application was designed for the desktop and phone. https://fstackforum.com Did you get any error messages? What needs improvement? What features would you like to see added?
Positives: 1) Fast loading 2) Uncluttered pages Negatives: 1) Overlapping content (Created by Brandon Wallace overlaps the menu) 2) Menu too wide (40% of page width is too much) 3) Menu would look better and take less space if horizontal instead of vertical 4) Login and sign up boxes need labels 5) Github etc icons should be placed horizontally instead of vertically 6) Screens overflow past right edge of screen (Use relative widths, not absolute widths) 7) I don't see anything that requires javascript Using FF with Windoz on a desktop
Thank you brother. I will work on fixing the items you have suggested. The Javascript is there, it is used to change the theme light/dark, hide/show the password in the login page, to close notification messages, and to move the window down to the comment form to comment on a post. Is it better to have labels if the placeholders label the input fields? I did not see the any overlap here Created by Brandon Wallace. I have only seen the social media icon horizontal not vertical. I will have to test this website on a Windows machine. Thanks again for looking at my project.
The only JS I see on any page is <script src="/static/js/script.js"></script> at the bottom of every source page. I see no calls to it anywhere. Are you generating your pages on the fly? If so, why not use PHP, or whatever you are using to generate your pages, to do what you are using JS to do? Boxes without labels are impossible to fill in correctly as there is no way to know what to put in them.
It looks much better on mobile than on desktop. 3 threads to a page isn't enough. It'd be interesting to see a thread with replies and see how the layout works etc.
sarahk, Than you for looking at my project. mmerlinn, There are no Javascript calls in the HTML, I use event listeners in the script.js file. https://github.com/brandon-wallace/fstack-forum/blob/master/application/static/js/script.js The HTML pages are created using Jinja2. https://palletsprojects.com/p/jinja/
This is now way beyond my pay grade, and probably way below @deathshadow's pay grade. Good luck with your endeavor. BTW, I am now using FF on a Mac desktop and all of the original comments apply here, too.[/QUOTE]
First thing I notice is poor alternative navigation. I suspect this is from broken heading orders and a lack of proper semantics. It also seem to be throwing style at media targets it shouldn't so... well... time to look at the markup. Yeah, you've got no media="" on your stylesheet link, multiple separate stylesheets for nothing other than wasting handshakes, oh good gravy that markup. You've got X-UA-compatible for NOTHING, incorrect case on the charset META (blazer actually cares), content before the H1, ARTICLE around everything for christmas only knows what, paragraphs all over the place around things that are NOT grammatical/structural paragraphs, a lack of lists around menu items, endless pointless classes for nothing, DIV for nothing... and what looks like a bunch of JavaScript for nothing as well. Which is why you have around 4.5k of HTML doing around 2.5 to 3k's job. When you start REALLY doing things these broken methodologies are going to scale badly.
@deathshadow Thanks for the helpful feedback brother. I learn something new everyday. I am glad I joined this forum. The first css style sheet is for fontawesome. That is how I add the social media icons on the about page. Is there another way I can add those icons without using a seperate style sheet? What is blazer? I am not familiar with that. I use the paragraphs to surround the text even though the text are not grammatical/structural paragraphs. I thought all text needed to be inclosed in an header or paragraph tag. Everything is wrapped in an article tag I thought that was better than a div with the class article. Do you have any links that will help me to structure the HTML better? Thanks for looking at my project.
could have sworn when I looked at it you had four stylesheets, not two. Even so, that unminified version is a bandwidth waster... I didn't dig into them to see it, but "all.css" doesn't really describe what it is or what it's for. Describe things. I'd suggest using a free CDN copy to increase the odds of it being already in the user's cache, and to lighten your own load. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" media="screen,projection,tv" > Code (markup): It's a mobile browser used on a number of low-end non-android phones. Might seem unimportant, but it's still really big in developing nations... and to make it work is as simple as using lower-case instead of upper-case when you say "utf-8". enclosed. Ever heard George Carlin's skit "not every ejaculation deserves a name"? Not every blasted bit of text needs an extra container around it, ESPECIALLY if it already has a perfectly good tag on it. HTML tags have MEANINGS. Numbered headings mark the start of sections and subsections. That's why starting a page with anything but a H1 or having multiple H1 is semantic gibberish. Paragraphs are for SEMANTIC paragraphs, aka structural/grammatical complete thoughts of one or more sentences. It does NOT mean "oh this is some text". UL/OL are for short GRAMMATICAL bullet points or selections, not "oh eye wuns uh dot befurs itz". What makes your post navigation part of the SITE footer? Wouldn't that be part of the MAIN? What makes everything you wrapped -- including the site title -- a single article? NOT that the article tag serves much of a legitimate purpose semantically, but you wrapped EVERYTHING in it, not the article parts that are unique to the page. The site title, main menu, and site footer are NOT parts of an "article". They are the unifying containers of the SITE, not a separate article in and of itself. Articles are small subsections of the document; typically subsections of a section; not the whole document! If anything WERE to be <article> it would be <div class="tile tile--wide">, since you have three "articles" on the page, though SECTION would be the more appropriate tag for those. https://developer.mozilla.org/en-US/docs/Learn/HTML Though to give you a quick leg up (and to take a break from a client project that's monopolizing my time too much) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > <meta name="description" content="forum for fullstack developers" > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" media="screen,projection,tv" > <link rel="stylesheet" href="/static/css/screen.css" media="screen,projection,tv" > <link rel="shortcut icon" href="/favicon.ico" > <link rel="icon" type="image/png" href="/static/images/favicon.png" > <title>Fstack Forum</title> </head><body> <header id="top"> <h1><a href="/">Fstack Forum</a></h1> <a href="#mainMenu" class="mainMenuOpen" hidden aria-hidden="true"></a> <div id="mainMenu"> <div><nav> <ul> <li><em>Home</a></li> <li><a href="/about">about</a></li> <li><a href="/signup">sign up</a></li> <li><a href="/login">login</a></li> </ul> </nav></div> <!-- #mainMenu --></div> <!-- #top --></header> <main> <section> <header> <h2> <a href="/post/1">Learning Python</a> <time>1 Nov 2020</time> </h2> Category: <a href="#">python</a> </header> <p> What is the best way to learn Python? </p> <footer> Posted By: Myung </footer> </section> <section> <header> <h2> <a href="/post/2">Javascript Callback Functions</a> <time>1 Nov 2020</time> </h2> Category: <a href="#">javascript</a> </header> <p> Can you explain how Javascript callback functions work? </p> <footer> Posted By: Olushola </footer> </section> <section> <header> <h2> <a href="/post/3">Feedback on Project?</a> <time>1 Nov 2020</time> </h2> Category: <a href="#">nodejs</a> </header> <p> Can you please give me feedback on my Nodejs project? </p> <footer> Posted By: Magaly </footer> </section> <nav class="pagination"> <ul> <li><a href="/?page=1">1</a></li> <li><a href="/?page=2">2</a></li> <li><a href="/?page=3">3</a></li> </ul> <!-- .pagination --></nav> </main> <footer id="bottom"> Created by <a href="https://brandonwallace.cc">Brandon Wallace</a> <!-- #bottom --></footer> <script src="/static/js/script.js"></script> </body></html> Code (markup): Is roughly what a better HTML for that should look like. Fixing the semantic woes, removing unneeded presentational classes, providing a hook for hamburger menu if so desired. It might need an extra DIV with an id or class around the main > section, but that's arguable. Depends on how coding the other pages goes.
@deathshadow Wow! Thank you so much for the information and for taking the time out to assist me. I will make some changes on my project over the next few days. Blazer, that is good information. If a person makes a website they should make it accessible to as many people as possible. That is one reason I make websites responsive starting at the smallest screen size I can, which is about the size of the iPhone 5. Ok, I see the issue. I will work on changing this. You did a lot of work to show me how HTML should be done correctly I cannot thank you enough brother. I do not see a like button on in this forum for some reason. You are very knowledgeable. How long have you been working in Web development?