Welcome to WebmasterWorld Guest from 3.214.184.196

Forum Moderators: not2easy

Experimenting

     
7:10 pm on Mar 26, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


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 ?
8:39 pm on Mar 26, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4504
votes: 347


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.

8:59 pm on Mar 26, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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.
12:40 am on Mar 27, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


Can you tell me everything you can use in the <div> tag with css ?
1:20 am on Mar 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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

Good luck! (btw, div is your best friend!)
1:22 am on Mar 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


@Aaron_Johnson ... pardon my manners ...

Welcome to Webmasterworld!
2:00 am on Mar 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15867
votes: 869


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.
11:24 am on Mar 27, 2019 (gmt 0)

Junior Member

joined:Apr 21, 2016
posts: 69
votes: 14


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.
10:33 pm on Mar 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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!
10:51 pm on Mar 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15867
votes: 869


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.
11:30 pm on Mar 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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.
1:29 am on Mar 30, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


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 ?
2:00 am on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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>
3:48 am on Mar 30, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


are there any guides
3:49 am on Mar 30, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


like a road map
4:17 am on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


Start here for css:

[w3schools.com...]
4:18 am on Mar 30, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4504
votes: 347


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]

4:19 am on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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

Static HTML
Site Builder stuff
CMS (of any kind?)
4:33 am on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


@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!
4:38 am on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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!
5:24 am on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15867
votes: 869


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.
6:30 am on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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)
4:59 pm on Mar 30, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


is it possible to make a guide by experimenting , if yes , how
5:01 pm on Mar 30, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


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
5:56 pm on Mar 30, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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.
8:31 pm on Mar 30, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4504
votes: 347


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.
12:56 am on Mar 31, 2019 (gmt 0)

New User

Top Contributors Of The Month

joined:Mar 26, 2019
posts:28
votes: 0


How do you pick colors from inspiration images for your blog design and layout ?
1:24 am on Mar 31, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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

[w3schools.com...]
3:04 am on Mar 31, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15867
votes: 869


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?
4:21 am on Mar 31, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10450
votes: 1089


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.
This 33 message thread spans 2 pages: 33