Visualization

[Historical Forums User]

I have been coding in table tags for the past 10 years. I am trying to get into CSS and leave behind all table tags from now on. I am having trouble visualizing the code though. I am trying to recreate a basic version of this page http://www.squareup.com just till the “1 2 3” part. It is just for practice, I should be able to see a page and know what is going on without even looking at the code. I read through tutorials but none really help with the visualizing part. If someone could just quickly show what they see when they look at that page, not necessarily how it actually is. I don’t need the style parts, just an overview of the divs and whatnot.
for example.

EDIT Well there was supposed to be div tags here but apparently I don’t know how to make them show up on my post. EDIT

Or just take a screen shot of the page and draw boxes around where the structure is.

At least if one of you could point to a good online guide that helps with this. The ones I have gone through so far don’t really help to make me understand this.

Thanks.

[__]

I am having trouble visualizing the code

Remember that you can [right click]->View Source, or hit [F12] (most browsers) and look at the actual DOM.

When I am writing HTML, I try to remember to think about it as an outline (i.e., for an essay).

<main>
    <header>
        <nav>
            <a href=...>sign in</a>
            <a href=...>home</a>
            <a href=...>menu</a>
        </nav>
        <h1>Start Selling Today</h1>
        <p>Accept credit cards …</p>
        <button>get started</button>
    </header>
    <h2>set up in minutes …</h2>
    <p>signing up is …</p>
    <ol>
        <li>
            <h3>Request your free card reader</h3>
            <p>sign up and …</p>
        </li>
        <li>
            <h3>Download Square Register—free.</h3>
            <p>Square Register is a free app …</p>
        </li>
        <li>
            <h3>Go places. Sell things.</h3>
            <p>Plug in Square Reader, …</p>
        </li>
    </ol>
    <hr>

    You get the idea …

</main>

Well there was supposed to be div tags here but apparently I don’t know how to make them show up on my post

Use the [Block Code] button when posting blocks of code. If it’s a lot of code (say, if I have to scroll to see it all on a mid-size screen), you should use an online service like pastebin or make a gist on github.

[nixnerd]

KEEP WORKING AT IT! Once you get good at CSS and specifically all the new additions of CSS3, you can literally recreate whatever you want. You will get to a point where you “think” in CSS.

[Author]

Posts