Beginner website, I need some help

Hi there ! I'm new to this forum, I'm new to webdesign and I want some help from you. ​

I have to do a project for school, a website, and I've decided what kind of website will it be but I have some problems with the page layout .

My website looks kinda like this http://demo.vivathemes.com/themes/sol/# without those effects for the photo.

So my questions are :

• How can my website adjust to different screen sizes? It's something with position but I don't know exactly ..
• How can I make the menu so it stays the same width like the main picture, the big one ?
• Can you give some tips for the page layout ? I've made some web pages before but none of them like the one in the link I posted so if it's not to much, I need some help

Thank you !

 

Hello StefanM,

Your website adjusts to different screen sizes using the parameters defined in the CSS files, which tell the browser how to render the HTML elements.

You have two options to define the width of your menus, do it with CSS from scratch, or using a CSS front-end framework developed by someone else.

I suggest you to use bootstrap3: Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. The bootstrap framework aims to ease web development.
http://getbootstrap.com/

 

I believe you can now easily get a ready wordpress theme for very low cost. They would provide you all controls. So only you need to change the images, texts etc from your end. Doing changes it does not need any specific skills. Hope this would solve all your problem very easily. Those themes are already responsive.

 

as @free_mockups mentioned , i'm also recommending wordpress.
To fit your site to different screen sized , you may use media query in css to do responsive design.It will be easy for you if you can use a framework for designing.

 

to do responsive design you need to change media query in css file
@media (max-width: 1350px) {and then styles go in here}
@media (max-width: 1200px) {and then styles go in here}
@media (max-width: 1024px) {and then styles go in here}
@media (max-width: 860px) {and then styles go in here}
in meta you need to put this
<meta name="viewport" content="width=device-width, initial-scale=1">