I am a student from germany (12th class), and i have to make a website for computer science class (german Abitur). And because the last test wasn´t that great tbh, i really need a good grade on this one. I am working on it for 2 months now, it´s my first website, and deadline is next week.
I am pretty much done, and now i just like to know if you guys see some obvious mistakes that would lower my grade so i can fix them.
The task description was something like this: Make a website with a css menu, at least 5 subpages, subpages should displayed with divs, page should run on latest browsers and screens with 1024 pixel or more (no responsive website expected), content whatever you like.
I like the design overall. The menu sticking to the top as you scroll is a nice touch.
The one thing I would mention is if you visit a fairly long page, and scroll to the bottom of it, then use the menu to visit another page. You are still scrolled to the bottom of the page. It would be nice that switching to another page would scroll you to the top.
The visual design of the page is very appealing… arranged by someone with an artistic eye. The validator flags no errors or warnings. Indeed, the HTML and CSS look good with useful comments in the CSS.
It’s a good looking single page web site that depends on JavaScript to function anywhere beyond the opening page. If JS is enabled, the browser’s back button is useless. There seems to be no “back” function available. All movement is by menu selection.
I would recommend allowing the entire page to show, therefore the menus would not be needed, if the user has JavaScript disabled.
Unfortunately, significant portions of the layout is performed with absolute positioning. There could be insufficient room for the user to use a larger than expected font size. The content cannot expand vertically without overflowing the next absolutely positioned area.
Break tags as spacers between sections of a page are not considered good HTML. Such spacing should be set in the CSS stylesheet.
As long as the page meets the standards which are expected of you, it is by all accounts a fine page and merits an excellent grade. In my opinion, though, since it contains sales information, I would seriously recommend making it browsable without JS. No marketing or sales person ever wants to frustrate or lose a potential sale.
Thanks for you feedback. I don´t think javascript is totally forbidden, but yes, css is probably better. And i started with a “css only” menu, which only had the first level. Then i decided it would be cool to have a dropdown, and i would structure the content that way. I googled and looked at a lot of different examples, i finally decided to use this one from w3school, the code looked pretty easy to work with compared to what i found on other websites:
Now there is only one line of javascript in there - is there an easy way to get rid of it?
Thanks for your feedback. Now this animated gif is amazing - is there a (free) software for my Mac to make gifs like that?
I am aware of the problem you are pointing out. Right now i have no idea how to solve it. I asked someone who has some experience in webdesign (but is not an expert), and he couldn´t tell me a solution, instead he told me something like “in real life you would not make divs that long, instead you would be better off with different html-pages”.
Do you agree with that? In that case i hope that it has no negative impact on the grade, because nobody told me that i should not make long content pages.
And of course i tried to google the problem - this was 2 weeks ago so i don´t remember the exact queries i used, but i think i tried a lot (css reset view, scroll back to top on click, …). Turns out thats a tough one to look up, because people have a hard time explaining this - there is a reason you used that great gif So i found a lot of sites where people probably talked past each other. What i ended up was a bunch of stackoverflow sites. Now stackoverflow doesn´t seem to be the place for beginner webdesigners like me - pretty technical there, and most of the time people use frameworks like jquery (not exactly sure what that is, but i am sure i am not allowed to use it).
So if you can post the right link which describes the solution for this problem, i am more than happy to try to make it work.
Thanks for your feedback. The truth is i have a hard time understanding how the css position logic actually works. I mean i think i understand it, but the browser surprises me a lot of times - elements lie on top of each other instead of doing what i want. I think this is called a “i don´t know what i don´t know” problem
So i spend a lot of time with try and error, like hours, and i finally positioned everything in a way that at least it looks good on my screen. But i am totally aware that there must be a more elegant solution.
Now i hoped nobody will point this out. But you did… That´s bad news for me, because that means my teacher will probably also see this.
So how can i solve this - do you have a link to a page or a video that is the ultimate guide explaining the magic of relative css positioning in a way really everyone can understand it?
I spent some more time with your code this afternoon and can see more “trouble spots” that would catch the eye of a good teacher.
Positioning, relative and absolute, should not be used as the primary tool for arranging elements on a web page. You should first create your page without any major positioning so the contents “go with the flow”. Had that been done on this page, you would have one very long page with all of the content scrollable and none of the jumble jungle at the top of the page. The page could then be controlled with JS to show each segment (pseudo page) and if JS is disabled the entire page could be visible at once.
I am curious to know what technique @Erik_J had in mind.
I will continue to look over your code tonight and try to offer more help tomorrow, but I can’t promise much. I haven’t slept enough today and probably will not last the night.
Do try to understand as much as you can out of the link that @TechnoBear offered you. Post questions any time. Someone will be around to help.
The class is wednesday. Then we have to upload our websites to the school server (so no time for clarifying things with the teacher before that).
And i totally understand what you say about the the positioning thing - i was a bit behind in class, and thought it would be enough to dive into this during the holidays. And i did - i probably doubled my understanding about webdesign every day in the last 2 weeks And now i realize there is much more to learn. On the other hand i am happy that i made it that far with a lot of try and error, even without understanding all the reasons why something works or does not work.
I already checked the link, will try to read a lot tomorrow.
Just add ; window.document.body.scrollTop = 0; to each of the onclick events for each menu, much like you are setting ‘block’ or ‘none’ on the various elements, adding the scrollTop call to the end, will move the scrollbar up to the top.
If not, here is my understanding (please keep in mind that i am a beginner): What this does is to jump to the top inside a div, if i have a scrollbar for that div. But i have none, here is my div definition:
(next post)
So i want the user to scroll with the browser scrollbar, a second scrollbar doesn´t make sense i think. So i need to tell the browser that the whole viewport should reset to the top of the page. This is where it gets ugly, possible solutions Google shows me are way over my head.
I haven’t followed the whole discussion here, so I may be overlooking something. I’m not seeing any scroll-bars on divs, nor any reason why one would appear.
Unless you set fixed dimensions on the div (generally a bad idea), it will be as large as it needs to be to contain the content. (Over-simplified, but that’s the general case.) There may be instances where you want to create a fixed-size div with scroll bars, and for that you can use the overflow: scoll property. See https://tympanus.net/codrops/css_reference/overflow/
scroll-behavior is not (yet) supported by any browser apart from Firefox, so is not really an option, even if it were needed. http://caniuse.com/#search=scroll-behavior
You don´t need the whole discussion, @TechnoBear, just look at the animated gif from post 3, that describes the problem: i have divs with fixed widths (because i want the text to have around 80 characters per line, learned that from a usability article), but not fixed height. The length of the content is very different. If i scroll down on a long content and change divs on click, the view does not reset to the top of the shorter content div.
Sorry - I thought you were describing two separate issues.
JavaScript is not my area of expertise, so you’ll need to wait for @cpradio or somebbody else to help there.
Fixed width divs with text should not be problematic, as the text should wrap automatically. (I do recommend you look at the two links I posted above.)
design is sound but your main page really needs some more words… that’s your most important page, do not neglect that… perhaps consider creating more content and linking your pages together internally… although your task is not to make this website mobile friendly, consider learning about media queries in CSS to make it mobile friendly, I’m sure the teacher will be impressed, I would be If I was your teacher…
