Single page websites a website is one that fits on a single page. Single page sites are fully loaded in the initial page load or page zones are replaced with new page fragments loaded from server on demand, making the experience more continuous and fluid for the user.
They are incredibly popular due to their design simplicity and fluid user experience. Imagine your site as long long scroll, and we are clicking on a navigation system to drop us down to areas lower on the page. The user experience can mimic the feel of a web application, because we are not making http requests to have a new view to load onto our screen. Say the user wants to learn about you or view your resume. All they have to do is click that link, and they are brought to that section of your index.html page.
This code along will make it so that the user can jump to different places on your homepage. Be sure not to have a lot of image
When users visit our site, we want them to be able to click a link and have the page automatically scroll to a specific section.
In order to link to a target on the same page, we must give the target an id, like this:
<p id=”top”>This is the top of the page!</p>
<h1 id=”bottom”>This is the bottom! </h1>
In this example, the <p> element is assigned an id of “top” and the <h1> element is assigned “bottom.” An id can be added to most elements on a webpage.
An id should be descriptive to make it easier to remember the purpose of a link. The target link is a string containing the # character and the target element’s id.
<ol>
<li><a href=”#top”>Top</a></li>
<li><a href=”#bottom”>Bottom</a></li>
</ol>
In the example above, the links to <p id=”top”>and <h1 id=”bottom”> are embedded in an ordered list. These links appear in the browser as a numbered list of links. An id is especially helpful for organizing content belonging to a div!