General question about developing a web frontend and constructing CSS.

Alain De Vos

Daemon

Reaction score: 643
Messages: 2,162

As far as I know most browsers only understand .CSS so I think I need CSS.
- Do browsers understand things other than .CSS but perform the same thing ?
- Do you create a .CSS from scratch from nothing ?
- Do you create a file which you translate with a tool to form a good .CSS ?
- Do you copy paste from existing .CSS files and concatenate to have what you want ?
- In fact i just want to do some good HTML input forms, with good paging and layout, but how is not clear to me how to tackle this.
- How do you solve syntax errors in .CSS like forgetting a }
 

covacat

Well-Known Member

Reaction score: 217
Messages: 461

better use twitter bootstrap or something similar
you can use .less stylesheets if you include some js which converts it to css on the fly
 

eternal_noob

Aspiring Daemon

Reaction score: 508
Messages: 739

- Do browsers understand things other than .CSS but perform the same thing ?
No. There are such abominations like Less or Sass but you need to convert it to CSS sooner or later
Do you create a .CSS from scratch from nothing ?
Yes, of course.
Do you create a file which you translate with a tool to form a good .CSS ?
No. Good CSS strongly depends on your DOM. Intelligent usage of selectors is something a software can't solve.
Do you copy paste from existing .CSS files and concatenate to have what you want ?
I write CSS from scratch. Why would i copy n paste it? From what files?
In fact i just want to do some good HTML input forms, with good paging and layout, but how is not clear to me how to tackle this.
Like covacat suggested, look into Bootstrap.
How do you solve syntax errors in .CSS like forgetting a }
Use a CSS validator.
 

Zirias

Son of Beastie

Reaction score: 1,517
Messages: 2,637

Well, first of all, yes, CSS is the only thing browsers understand natively for styling (if you don't count some legacy HTML attributes also used for that). You *can* write it manually (BTDT), but that quickly becomes a PITA when it grows larger.

Some few browsers might understand XSLT to transform a simple semantic XML document, but then, it also boils down to being processed to (X)HTML/CSS, plus this idea is mostly dead.

Creating CSS on the fly with Javascript is certainly possible, but I'd think twice before I'd make my website / web app dependent on Javascript. It's fine to use it, but IMHO it's much nicer if it still works without it.

I agree with covacat, use for example bootstrap. They make use of SCSS, which adds a lot of structuring/templating/etc to CSS and is normally compiled statically to plain CSS before deployment to the webserver.
 

drhowarddrfine

Son of Beastie

Reaction score: 2,341
Messages: 4,308


Start here....

No. Start here.

Created by Mozilla and edited by all the browser vendors.

In my 18 years of web development, we have never found a need for bootstrap. We also hand wrote all our CSS and never had an issue with that. But then we were an advanced custom house and knew what we were doing. If you aren't writing your own CSS, you're only painting by numbers.
 

jammied

Member

Reaction score: 13
Messages: 33

No. Start here.

Created by Mozilla and edited by all the browser vendors.

In my 18 years of web development, we have never found a need for bootstrap. We also hand wrote all our CSS and never had an issue with that. But then we were an advanced custom house and knew what we were doing. If you aren't writing your own CSS, you're only painting by numbers.
W3Schools is a lot better imo for beginners, I would recommend MDN more for people who learnt what they are doing to an extent. Like, I use MDN but I doubt it would have a good source when I first started to learn web development.
 

eternal_noob

Aspiring Daemon

Reaction score: 508
Messages: 739

DonK

Member

Reaction score: 7
Messages: 20

Although there's nary a form on my website (yet), there is an embedded movie:


If the navigation on my website looks familiar it's because it uses a style similar to freebsd.org It was a big thing for me to settle on navigation at the beginning.

Some of the topics discussed in this thread are too advanced for me. My mainstays are PHP with CSS, edited with a plain old text editor. A local version of apache's used to debug webpages before the finished page is uploaded to my public website.

My original css was copied from someone else's (long forgotten) website. The copied website mostly matched my stylistic vision. Over the years, my copied css template evolved from someone else's enigmatic syntax to something totally mine. In it's present form, every line was written by me.

w3schools are my "go to" reference to quickly answer questions such as "how do you center table headings and left justify cells in lower rows?"
 

jammied

Member

Reaction score: 13
Messages: 33

Although there's nary a form on my website (yet), there is an embedded movie:


If the navigation on my website looks familiar it's because it uses a style similar to freebsd.org It was a big thing for me to settle on navigation at the beginning.

Some of the topics discussed in this thread are too advanced for me. My mainstays are PHP with CSS, edited with a plain old text editor. A local version of apache's used to debug webpages before the finished page is uploaded to my public website.

My original css was copied from someone else's (long forgotten) website. The copied website mostly matched my stylistic vision. Over the years, my copied css template evolved from someone else's enigmatic syntax to something totally mine. In it's present form, every line was written by me.

w3schools are my "go to" reference to quickly answer questions such as "how do you center table headings and left justify cells in lower rows?"
Thing is,W3Schools is a particularly good place generally if you want things is very straightforward and simple terms. It had some nice learning features for complete newbies as well. With MDN, even the beginner stuff is more geared towards people with a certain level of technical competence.
 

mark_j

Daemon

Reaction score: 704
Messages: 1,229

As far as I know most browsers only understand .CSS so I think I need CSS.
- Do browsers understand things other than .CSS but perform the same thing ?
- Do you create a .CSS from scratch from nothing ?
- Do you create a file which you translate with a tool to form a good .CSS ?
- Do you copy paste from existing .CSS files and concatenate to have what you want ?
- In fact i just want to do some good HTML input forms, with good paging and layout, but how is not clear to me how to tackle this.
- How do you solve syntax errors in .CSS like forgetting a }
I would just add that it's better to fragment your css code into files, which are tested individually. Then when you add another set of styles, say grids, then put them in another file. This way you reduce debugging to your new stuff.

Also, there's no issue copying/pasting css code, licencing permitting, because that's how you're going to learn.

Bravo for avoiding that scourge; javascript.
 

drhowarddrfine

Son of Beastie

Reaction score: 2,341
Messages: 4,308

Much talk about CSS but the thing is to get your HTML down first. Don't get bogged down making your site look pretty when the basic purpose of it, as a document, isn't solid. Too many times I've seen new people can't get their CSS working properly when they were using invalid HTML. Often the bult-in CSS for the HTML element itself is all they need but they try fiddling with it because they think you're supposed to.

Always keep in mind that, fundamentally, a web page is just a document outline with content in square blocks.
 

richardtoohey2

Aspiring Daemon

Reaction score: 307
Messages: 628

Just be aware that your browser may "helpfully" cache .css files. So you might change them (the styles in .css files), refresh your browser view and be left scratching your head as to why nothing seems to have changed.

You can also see CSS issues (answering your question about debugging issues or syntax errors) in your browser's developer console view, and additionally most modern browsers let you tinker inline with styles so that's another great way to learn.
 

astyle

Daemon

Reaction score: 467
Messages: 1,078

I frankly liked DreamWeaver back in the day... It offered previews, automatic balancing of brackets, and CSS validation... But the finished web page did have syntactically correct code that was difficult to follow.
 

bakul

Active Member

Reaction score: 57
Messages: 119

If you want a mostly static site and a few input forms, consider using Hugo. You can create your website using markdown. You can then use https://docs.getform.io/guides/hugo/ for adding snippets for your input. See https://medium.com/getform-all-about/how-to-add-a-contact-form-to-your-hugo-website-84ea79683399 and https://thenewstack.io/tutorial-use-hugo-to-generate-a-static-website/ There are a lot of readymade templates & plugins that you can use. You can get a lot done without having to start from scratch! It is super fast, simple, flexible and open source. Here’s an article comparing Hugo with Jekyll. I used Hugo 4 years back for a friend’s nonprofit. Hugo has grown a lot in use and capabilities since then. You can see the current themes at https://themes.gohugo.io/
 

vigole

Daemon

Reaction score: 1,455
Messages: 1,268

My favourite:
HTML5 (esp. semantic elements) + RDFa (schema.org) + CSS3.

Semantic elements of HTML5 and standard Schema is the king.
CSS is like hearder files. It's done before. No start from scratch, and yes, ^C/^V! Find a JS-free website, which you like, and use its CSS.
All CSS preprocessors are useless and cringe, IMHO. they need npm or some other craps to run. I don't like them.

W3.CSS is good!
Unlike Bootstap, and the rest of the frameworks, W3.CSS is not overkill.
I've suggest it to one of the former FreeBSD developers, he trimmed it, and he liked it.
I can't dox his name here, but the record is on Twitter.

Solve syntax errors:
Do it right in the first place. I don't use validators.

Books:
Nearly all books on web-design are money-grabbers. I.e. Authors fill the pages with nonsense, to take your bucks and laugh at you.
There is an old one though, which I recommend:

O'Reilly's HTML5 the Missing Manual 2nd edition, by Matthew MacDonald (2013).

P.S./EDIT:
If it is your personal website and it is not too complicated, don't use PHP for templating either.
Make some HTML templates and copy/paste them as you need them (footer, header, article, etc).

==> no PHP server side hit, esp if you on a crippled shared hosting service ==> boosts site access time/speed ==> good for SEO.
 

mark_j

Daemon

Reaction score: 704
Messages: 1,229

Hey, vigole, I've got some C programming for you dude. :)

"Do it right in the first place. I don't use validators."
I say that all the time, until I compile and go... oh ^*&%, that's a stupid mistake. 🤪

On topic: I would be surprised if there's not a web-based validator for CSS.
 

vigole

Daemon

Reaction score: 1,455
Messages: 1,268

"Do it right in the first place. I don't use validators."

I said that because, in HTML/CSS all you have to do is looking to the highlighted-"Source View" and syntax highlighting in the editor.

Otherwise, yes you're correct. I got error in my "Hello World" copy/pasted from K&R.
 

Zirias

Son of Beastie

Reaction score: 1,517
Messages: 2,637

Just be aware that your browser may "helpfully" cache .css files. So you might change them (the styles in .css files), refresh your browser view and be left scratching your head as to why nothing seems to have changed.
That's often an issue, and there's a simple "hacky" solution: Append a timestamp as a query parameter, and just completely ignore it on the server side. That way, caching will still work, and if you need to force browsers to "reload" the resource, just change the query parameter in the HTML documents referencing that style.

Another way is to inline your CSS into the HTML documents. This can be done by server side processing or manually. It has one slight advantage: You will never get an unstyled page in your browser because the HTML loaded fine and there was an error trying to fetch the CSS (yes, that happens, although extremely rarely). But there's a huge drawback as well in causing a lot more network traffic.
 

Zirias

Son of Beastie

Reaction score: 1,517
Messages: 2,637

BTW, in my experience, many users on the web don't even know how the browser's "back" button works. And some who once did were trained to avoid it by the myriads of braindead SPAs, breaking its functionality. So, you often have to duplicate it in your own content area :rolleyes:

But no matter what, you never want correct styling to depend on user actions. So yes, caching is an issue to consider. The "hack" I mentioned above is pretty common and does what it should…
 
Top