Jump to content

Newbie asking newb questions and advice.


Recommended Posts

'Sup guys. I've gotten into a technical computer science program at college and I have a web & multimedia class. I know most of the basic but I want to understand some "tricks" experienced people use, like:


- I've seen websites with a background picture that matches the screen to perfection, whether it's a small phone or even huge ones like Macs. It doesn't distorts or strectches. How do you do that? (CSS)


- Websites with menus/interfaces that occupy all the screen width (ex: this website). Black, light blue and dark blue bars on top/header all occupy the full width no matter the screen size, and their elements (status area, search bar, etc) all adapt to the bar width. How?


- Is "Photoshop to HTML + CSS" still used? as in designing a mockup first and then transform that design into code.


- How and where do you get your CSS and color scheme inspirations if you don't have a Photoshop mockup done first?


- Is "Metro style" AKA Windows 8-10 style the way to go nowadays?


- vector pictures vs icon fonts for design?


- How to make elements "show and hide" like in the Wikipedia app? is there a way to apply this behavior to html tables?


- Any other tips & tricks I should know about?

Link to comment
Share on other sites

1. Setting background-size to cover http://www.w3schools.com/cssref/css3_pr_background-size.asp

2. Elements extend to the full width of their container by default. If you have an element with a blue background, there will be a blue bar all across the screen unless it's contained by another element that has a smaller width. Media queries can be used to arrange the buttons. For more details see the CSS responsive tutorial: http://www.w3schools.com/css/css_rwd_intro.asp

3. Photoshop can be used to draw mock-ups, but don't use it to generate HTML files. Just look at the design created in photoshop and write CSS that makes the page look like that.

4. I design in photoshop first, but sometimes just pencil and paper with some notes about color works OK.

5. I would not restrict myself to one style. The style of your page should reflect the theme of the page. If you're making a page about a cartoon the metro style is going to be really bland.

6. My preference is to use fonts for the icons on the page.

7. Showing and hiding elements is done with Javascript. I would recommend reading the Javascript tutorial.

8. There are hundreds of little details you need to know to make websites optimally, but these are gained with research and experience. I cannot give any real tips here in a single forum post, try reading blog articles from experienced web developers.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...