How do people make sections in HTML pages? [closed]


Tags: javascript,html,css,html5,responsive-design

Problem :

For example, the Android KitKat site, Transit.js and Apple's iPad site has these sections, headers and dividers that I'm looking for.

Screenshot of Android KitKat site Screenshot of Transit.js

How are these beautiful sections made? I see the all the time on various web pages. Some of them even have image backgrounds and some sort of parallax effect going on in the background. Others have the sections fitted exactly to the height of your screen and limit your scrolling.

Are they all designed individually, or do they use some sort of theme or css stylesheet to get started?

The CSS stylesheets suggest they're not using any plugins or templates, but many of these sites are built by huge companies. Is there something like Bootstrap or another CSS framework that can be used to get a similar effect?

EDIT: The answers by Frankenscarf & Dominik are helpful, but I'm really looking for a framework of sorts to help with this, so I haven't accepted an answer yet

NEWER EDIT: the One Page Scroll plugin was exactly what I was looking for



Solution :

Many of them really used their own plugins because they have their own front-end developer, but for amateurs and other professionals that don't have that much experience with javascript there are some plugins out there called Parallax.js, jQuery Scrollsnap plugin.

Also, if you are a developer just right-click and Inspect the elements and have a look at how they achieved this. It's no crime to copy for learning. After doing so try to create something like this in your own way.

A good read, too, is another question on StackOverflow: read here. If you have any questions left. Ask in the comments.


    CSS Howto..

    How to show blocks for progressbar using CSS

    how to let CMS make use of my css files instead of its own css?

    How to display size and icon for pdf and word docs?

    how to access anti aliasing method of a font with CSS

    How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

    How do I detect box-sizing border-box support with Modernizr

    How do I insert tag using :after css property?

    How to route requests in codeigniter so we can serve static css, js and img files?

    How to achive certain overlapping layout when there is not enough space in parent container?

    How to confine an animated div to its parent div

    How to center align social media tags using HTML and CSS

    CSS `will-change` - how to use it, how it works

    how to move canvas along with a centered canvas

    How to push image (behind canvas) to front in order for its onclick function to work

    python how to parse css file as key value [closed]

    How to implement a navbar with HTML / CSS

    How to make my two sections vertically align, even when scaled, with different amounts of content?

    How to make a better transition of

    how to change text color hover

    How to separate Text and HTML with CSS

    How to apply my class from css to checkbox? [duplicate]

    how to move image vertically with css [closed]

    How to set image as a button in HTML & CSS?

    How do you find the dimensions of a “display: none” element?

    jQuery dialog: how to control the button-pane height

    CSS show horizontal scroll bars?

    How to create border between two divs with dynamically changing heights?

    How to apply styles to neighboring elements in a list

    How to debug CSS with Firebug for an element that only appears when clicked?

    How to set the background-image of this text to an svg?