# General question about developing a web frontend and constructing CSS.



## Alain De Vos (Oct 10, 2021)

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 (Oct 10, 2021)

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 (Oct 10, 2021)

Alain De Vos said:


> - 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


Alain De Vos said:


> Do you create a .CSS from scratch from nothing ?


Yes, of course.


Alain De Vos said:


> 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.


Alain De Vos said:


> 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?


Alain De Vos said:


> 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.


Alain De Vos said:


> How do you solve syntax errors in .CSS like forgetting a }


Use a CSS validator.


----------



## zirias@ (Oct 10, 2021)

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.


----------



## jammied (Oct 10, 2021)

W3Schools Free Online Web Tutorials
					

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.




					www.w3schools.com
				




Start here...


----------



## drhowarddrfine (Oct 10, 2021)

jammied said:


> W3Schools Free Online Web Tutorials
> 
> 
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
> ...



No. Start here.








						MDN Web Docs
					

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.




					developer.mozilla.org
				




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 (Oct 10, 2021)

drhowarddrfine said:


> No. Start here.
> 
> 
> 
> ...


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.


----------



## drhowarddrfine (Oct 10, 2021)

jammied Click on "Learn Web Development" and then scroll down and click on "Complete Beginner".


----------



## eternal_noob (Oct 10, 2021)

drhowarddrfine said:


> Click on "Learn Web Development" and then scroll down and click on "Complete Beginner".


Why not just link it?









						Getting started with the web - Learn web development | MDN
					

Getting started with the web is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.




					developer.mozilla.org


----------



## jammied (Oct 10, 2021)

I still think w3schools is a better starting point for absolute beginners regardless.


----------



## DonK (Oct 10, 2021)

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





__





						"Spin Tale Revealed" by Don Kuenz
					

Spin Tale Revealed



					crcomp.net
				




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 (Oct 10, 2021)

DonK said:


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


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 (Oct 10, 2021)

Alain De Vos said:


> 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 ?
> ...


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 (Oct 10, 2021)

jammied said:


> With MDN, even the beginner stuff is more geared towards people with a certain level of technical competence.


Yeah, I think I'll agree with  you.


----------



## drhowarddrfine (Oct 10, 2021)

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 (Oct 10, 2021)

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 (Oct 11, 2021)

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 (Oct 11, 2021)

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/


----------



## a6h (Oct 11, 2021)

*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 (Oct 11, 2021)

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.


----------



## a6h (Oct 11, 2021)

mark_j said:


> "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@ (Oct 11, 2021)

richardtoohey2 said:


> 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.


----------



## a6h (Oct 11, 2021)

Zirias said:


> That's often an issue,


CTRL+F5


----------



## zirias@ (Oct 11, 2021)

vigole said:


> CTRL+F5


You want to tell that to the site's visitors?


----------



## zirias@ (Oct 11, 2021)

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 

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…


----------



## eternal_noob (Oct 11, 2021)

mark_j said:


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


See my previous post. I linked the one from the W3C.


----------



## Alain De Vos (Oct 11, 2021)

For the application i will use Kemal.





						Kemal - Guide
					

Lightning Fast, Super Simple web framework for Crystal




					kemalcr.com
				



It is a framework written in the lesser known language "Crystal" and compares to "Flask(Python)".
It compiles to an executable which is the webserver. The code is much more readable then php...


----------



## astyle (Oct 11, 2021)

Zirias said:


> 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
> 
> 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…


I often get lost between a web-app's 'back' button (A) and the browser's 'back' button (B). With A, you can go what the app considers to be the previous page. Unfortunately, as far as B is concerned, if you click A, you go forward, not back. Browser and app inside it going in opposite directions, basically. This sometimes messes up the CSS, and I have to be VERY careful which button I use when. Try explaining that to the average user, whose priority is *not navigational mechanics*, but the *destination*!


----------



## Deleted member 30996 (Oct 13, 2021)

jammied said:


> I still think w3schools is a better starting point for absolute beginners regardless.


That's where I learned to write XHTML and CSS and have never used anything but NotePad or Leafpad to write markup. XML, AIML and 3DML included.

 I used CSS buttons for the menu on the previous version of my site and posted the markup I wrote for them here.


----------



## Deleted member 30996 (Oct 13, 2021)

mark_j said:


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


Of course there is. I have a W3C XHTML and CSS validator button at the bottom of each page of my sites.


			W3C CSS Validator results for https://trihexagonal.org/ (CSS level 3 + SVG)


----------



## irishgeoff (May 31, 2022)

I would recommend you use Hugo to create a static website and fabform.io to add  a hugo form . They both work a charm. There is a little learning curve with Hugo.


----------

