Experimenting

[Aaron Johnson]

You can experiment with shampoos , conditioners, and other hair products for hair care to learn how to take care of your hair . What do you experiment with for web design to learn how to build and design beautiful blogs ?

[not2easy]

Hello Aaron and Welcome to WebmasterWorld [webmasterworld.com]

Since you've asked in the css forum I am guessing your question relates to how you can experiment with css? The best way I've found is to use inline css until you have the look you want and then sort it into a separate stylesheet to handle the nuts and bolts of the layout. I use a text editor and view it locally via either the text editor or a browser.

A lot depends on the type of site you're working on and its goals whether you need a development site, either hosted or locally.

[tangor]

Imitation is the sincerest flattery ... if you see something, emulate it ... as much as possible YOUR way, but do not be reluctant to look at the code ... we learn by seeing what others have already done.

[Aaron Johnson]

Can you tell me everything you can use in the <div> tag with css ?

[tangor]

@Aaron_Johnson ... your best bet is to look over the W3C stuff ... see: [w3schools.com...]

Good luck! (btw, div is your best friend!)

[tangor]

@Aaron_Johnson ... pardon my manners ...

Welcome to Webmasterworld!

[lucy24]

Can you tell me everything you can use in the <div> tag with css?

What properties can a div have? Class and id, basically, plus anything script-related like "onclick". (There are enormously long lists at w3schools [w3schools.com] and at mozilla [developer.mozilla.org], among other places. But 98% of those items you will never use--most have to do with various categories of forms or input--so it's hardly even worth looking.)

Or did you mean what attributes is it allowed to have? A <div> is intended to be a block-level element--though there exist circumstances, theoretically, where you could set it to {display: inline;}--meaning, well, “almost all of them”. Any competent validator will tell you if you’ve tried to give an element an attribute it isn’t allowed to have.

Any element anywhere at any time can have inline css, so long as the specific attribute is permitted for that element--but genuine inline css (like <div style = "margin: 1em; background-color: #FDE;"> and so on) should be used only as an absolute last resort, since it creates more work for the browser and is much harder to keep track of when editing.

It would be shorter to list things a div can not have. Maybe "name", but you can ignore even that prohibition if you need a name for scripting purposes.

[ipco]

Firstly, have an idea of what you want to achieve, no matter how basic. You can't create anything without an idea of what you want. As Tangor said, look at what others do.This will give a thought or two. But don't go too deep here, you're only looking at layout.

Learn how the layout flows first. How does one div interact with another particularly at different viewport sizes. Why does it do what it does? Giving your divs different colored borders or backgrounds will help you see what is happening here.

Use semantic class names to keep track of the divs/sections/elements in your css.

Content is the main ingredient so now start looking at fonts; their size, color and style. How do they fit in? Now you can start looking at other sites again to see what fonts they are using.

Start adding other elements such as image, video etc. always watching how it flows. Does it look right?
Should you be styling this element or its parent?

Now you begin to play with colors. Do they compliment each other and more importantly do they compliment the site focus.

Slowly it will come together.

Every change you make, test it.

If something breaks the flow, don't add something to fix it, that's hacking. Remove the root cause and plant a new root.

Keep researching. The odds are that someone, somewhere has done what you're trying to do.

Whatever you do, always keep the audience in mind. After all, you're creating for them, not you.

[tangor]

All great points! ^^^

Meanwhile, don't go div crazy. Use divs when there's a clear need to break <div>THIS</div> away from the <body>MAIN CONTENT</body>

It might be for display purposes. Call to action. Image or video holder. Associated Content. Menus. Headers. Footers. Multi-columns. There are many good reasons to use a div, and that many and more reasons for NOT using one!

[lucy24]

Come to think of it ...

Can you tell me everything you can use in the <div> tag with css ?

This question may really be backward. The <div> element--and its counterpart the <span> for inline stuff--exists purely as something to hang CSS onto. It has no independent meaning. If, for example, you want a whole series of paragraphs all to have certain styling features in common, you don't assign the same class to each one separately. Instead you assign a class to the div, and then you have the two options
div.thisclass {styles here}
and
div.thisclass p {styles here}
But if there's just going to be one paragraph by itself, you may as well attach the classname to the <p> itself. Otherwise your html risks coming out like those CMS-generated pages that have divs nested eight deep, with a new div for each added bit of style.

[tangor]

Yes. p.thisclass {styles} is infinitely more useful for font/color/size than using <div>! I use these styled p's for anything this is NOT <hx>, as I want those headers to remain as semantic as possible.

[Aaron Johnson]

How are you suppose to experiment with inline css for designing and building sidebars for websites and blogs ? And how do I gain skills by it ?

[tangor]

What do you know?

Have you advanced beyond

<html>
<body>
<p>Hello World!</p>
</body>
</html>

Do you use Notepad ++ or some other text editor that color codes tags? (Not required, just very helpful)

Can you make a css file?
Do you know how to link it?
Will you need server side includes or php inserts?
A zillion other questions (here)

Getting started is just that, get started with what you know, put down some code. Make your best effort. When you hit a roadblock, you then ask for specific help, which will be happily given, based on your sample code and css

Meanwhile, exemplify any site specifics by using "example.com" for your site name.

Seriously, just dive in!

As for sidebars, I build mine in the css file, including width, location, font sizes, margins, padding, color, background, borders, etc) and then just

<div class="sideright">ANY CONTENT</div>
(note: I also have a "sideleft")

If on the fly I need to change the width for any reason, then

<div class="sideright" style="width: 25%"></div>

[Aaron Johnson]

are there any guides

[Aaron Johnson]

like a road map

[tangor]

Start here for css:

[w3schools.com...]

[not2easy]

On March 26 tangor posted a link to w3schools above, a decent enough place to try things out and learn at your own pace. We really don't offer css tutorials here, sorry.

Cross posting - that's the place.

[edited by: not2easy at 4:19 am (utc) on Mar 30, 2019]

[tangor]

More importantly, how is your site powered now? (Assuming you have a site)

Static HTML
Site Builder stuff
CMS (of any kind?)

[tangor]

@Aaron ...

I salute attempting to learn how to do this yourself. We need coders who learn from the ground up. What makes a website work. And in the process become better webmasters for the future!

[tangor]

One other thought.

Know your html tags. They are the mark up for your content. These are semantic in nature and thrills the search engines when done properly. Know these and THEN you do css.

CSS is the STYLE and APPEARANCE and LAYOUT for those tags. All css is dependent on the html tags. css modifies the appearance, etc of the html tags, in other words, it is not REQUIRED for the web page to function, but does make it SO much better for the end user when done correctly!

[lucy24]

How are you suppose to experiment

I’m reminded of the children who sit down at the game table in my local library and then ask their parents to show them how to put a puzzle together. Sorry, kid, but the whole point of a puzzle is that you do it yourself. Otherwise it isn’t a puzzle. And if someone tells you step by step what to do, it isn’t experimenting.

Make a file. Give it the .html extension. Open it either in a browser or in a text editor’s html preview. Change stuff. See what happens. (HTML preview is faster, because you don’t have to keep refreshing the page.) An HTML file is really just a special kind of text file. Nothing will break. Nothing will explode. Nothing will melt down. Nothing will cause anything else to disappear from your computer..hbng++++++++++++++++++++++++++++++++++++++++++++++++++++

Nothing irreversible will happen if the cat walks across the keyboard.

[tangor]

Though having a 120 lb German Shepherd jump on the keyboard pretty much destroys it. :)

(Been there, done that, sadly the pooch lived his full years and passed, I miss him) (sigh)

[Aaron Johnson]

is it possible to make a guide by experimenting , if yes , how

[Aaron Johnson]

how would i do this ? would it be by writing things down to remember where i have been until there is nothing else to write down because i have it all

[tangor]

You have to have content first.

Write it.

Then do the markup (html)

Then the style (fonts, color, layout)

Without content the steps cannot happen.

[not2easy]

Having content helps. It should be the motivation for you to try to learn. If you have nothing to say and no real motivation to try to learn, it can be an exercise in futility. It isn't magic, it is there for you to learn, but there is no penalty if you don't.

Wikipedia is a good place if what you want is an explanation. Or you could try your hand at it until it makes sense. That's why the w3schools site was suggested. It lets you read and learn and try it out without obligation. A DIY education with free tools. That way, you move to something new when you understand each step. In the end it either becomes second nature or else you decide it isn't for you.

[Aaron Johnson]

How do you pick colors from inspiration images for your blog design and layout ?

[tangor]

Seriously .... take a look at W3Schools. Colors addressed here:

[w3schools.com...]

[lucy24]

How do you pick colors

Do you mean, how do you physically set colors in CSS? Or do you mean, on what basis do you make the choice?

[tangor]

There's the "art" side, a 'technical" side, and a "I just like it" side ... and all of those are GRAPHIC choices and have nothing to do with HTML/CSS ... yet the OP was asking about experimenting ... so I guess that qualifies.

Keep it simple... do the page first, pretty comes later.