Question

Design a web page for a university from the perspective of a student.draw the web page on a paper. Explain the navigation also.

Answer 1

We're going to design and code this very simple website. Spectacular design, it's not, but it'll be very effective for teaching basic coding techniques.
This tutorial was written assuming that you've never coded a website before, or have only done it a few times. Nevertheless, to complete this tutorial, you will need the following:

Photoshop or a similar image editorA code editor (more on that later)Basic understanding of how html works, basic syntax and tags. To get up to speed, check out the official resource at w3 Schools, where you can learn all the basics needed for this tutorial.Ditto for css, you should understand how selectors work and be familiar with basic properties. Again, the best resource here is w3 SchoolsA browser, obviously. I'm using Firefox, and if you want your site to look just like my screenshots in each step, you should too

Layout

We're making a very simple website here, with four basic elements: header, content, sidebar and footer, the layout is going to look something like this:
This tutorial was written assuming that you've never coded a website before, or have only done it a few times. Nevertheless, to complete this tutorial, you will need the following:

Photoshop or a similar image editorA code editor (more on that later)Basic understanding of how html works, basic syntax and tags. To get up to speed, check out the official resource at w3 Schools, where you can learn all the basics needed for this tutorial.Ditto for css, you should understand how selectors work and be familiar with basic properties. Again, the best resource here is w3 SchoolsA browser, obviously. I'm using Firefox, and if you want your site to look just like my screenshots in each step, you should too

Layout

We're making a very simple website here, with four basic elements: header, content, sidebar and footer, the layout is going to look something like this:
It's a good idea to block out the layout of your design before you start, either on paper or in Photoshop, to streamline your workflow and organize your ideas.
Open up a shiny, new Photoshop document, say, 1000px by 1200px. We can always crop it later. I'm making it pretty narrow because I'm working on a laptop here, but feel free to go wider if you like more space to work.

Now, I'm not going to go into the debate about screen resolutions and optimal website width here. All you need to know is that the content of our page is going to be 800px wide, and that that's okay. So, on our 1000px wide document, we're going to drag in guides at the 100 and 900px marks to set the width. Our design has a sidebar, and I've decided to make it one third the width of the page. Two thirds of 800 is about 530, so let's put in one more guide at 630px.

Grab the rectangle tool and draw a big, blue box at the top of the document, mine is about 170px high and the color is #23b6eb. Next draw a skinny, dark grey bar at the very top of the page

Now we're going to add a bit of a lighting effect on the blue header area. Create a clipping mask above the blue layer, then Grab a big, soft brush (400px wide) and pick a color a bit lighter than the blue background.

Now lightly click the tip of the brush right below the bar, around the centre of the document. Keep it subtle, and try not to let the lighter color reach the edges of the page (this will be clear later). And set the blending mode to screen.

NAVIGATION

Now we're going to add another bar to the bottom of the blue one, we can make it grey, but we're going to add a gradient overlay so it doesn't really matter.

In the layer styles panel, add a gradient from #e2e3e4 to #bebdbd at 90degrees


MARK AS BRAINLIST