How much HTML and CSS do web developers use and have to know?

I was under the impression it was all DreamWeaver and Wordpress by now.

>Would anyone want to make a dynamic webpage line by line in HTML and CSS?
>How much do you, personally, use web design software vs how much hard coding as a percentage of work hours?

Attached: 1_lJ32Bl-lHWmNMUSiSq17gQ.png (792x612, 23K)

Other urls found in this thread:

artsandculture.google.com/asset/thoughts-of-the-past/ewGwe116tQZ_0w?ms={"x":0.5212789771425429,"y":0.3559474972292552,"z":11,"size":{"width":0.7035905271199389,"height":0.30156599552572705}}
twitter.com/SFWRedditVideos

Our sites either use Blade Templates (PHP) or Vue Templates (JS).
Our company fully write the templates ourselves, including styling, but we reuse a lot.
We have front-end developers for wrinting these templates+styling, so we can focus on the actual programming.

Generally I don't do any styling, I just write the logic and create a template file showing the bare minimum, so the front-end developers can continue work.
For example for a login page I would create a template with a simple form, the front-end developer can do the rest.

I don't know why we even write everything ourselves, it's not like our sites look amazing and unique; we could achieve similar results with free templates.

>free templates

Templates sound like a third option. First and second being, write from scratch with HTML/ CSS, or use DW software.

I'm kind of confused by, you say templates are in PHP and JS. I thought that was on the backend. There's no HTML or CSS involved with those templates?

I'm trying to wade into this correctly.

The templates are HTML but contain syntax to show variables and perform basic control statement. By "Blade (PHP)" I meant that Blade is for PHP.
Using a templating engine allows you to separate the view from your application logic.

Example of a blade file:
{{ $title }}

@foreach($lines as $line)
{{ $line }}
@endforeach


This you can then compile to HTML using PHP. It's basically HTML/CSS but with some extra features.

My point was more that I as a programmer barely write HTML, our company has other people for that. Of course this will differ per company, some companies prefer full stack developers.

nowadays you would never write pure HTML or CSS.
HTML is generally written in a templating language like blade/twig/mustache/handlebars,
CSS is generally written in a CSS preprocessor like Sass or Stylus, this allows you to do cool stuff like split your css in multiple files and use variables.

At the end this will all compile to HTML&CSS, it's just that core HTML/CSS lacks certain functionalities that allow for more extendable, reusable and dynamic code.

>Would anyone want to make a dynamic webpage line by line in HTML and CSS

Html5 and es6 actually work pretty well together for making dynamic web pages. Custom attributes and mutation observers let you throw up shitty mimics of most modern front end libraries without much trouble, which is nice if you don't want to fuck around with 100 dependencies and just want something that fits your basic use case.

I generally prefer that approach to templating languages, because it's one less layer that can break in weird and unexpected ways when either the templating language or compiler changes. Granted, I work at place that hates black boxes and external dependencies, so my view might be bias on that.

All the idiotic banks and the financial industry are now reducing their technical debt by moving to RESTful architecture. Their tech stack mainly consists of Angular on the front end, and .NET or Spring on the backend.

Angular is pretty neat. The components and services are highly highly reusable, and allows for ton of simplicity.

It depends on the use case. For instance, I’m building an image board site (yeah so original I know) and don’t need a crazy amount of front end work, just a basic design. Why would I use a whole library for that? HTML or a basic template engine like Pug work fine, the former probably being a better choice since another user pointed out that template engines are another layer of potential fuck up.

>blade/twig/mustache/handlebars
> es6
>RESTful architecture
> Angular on the front end, and .NET or Spring

Thanks for the replies.
It's still a bit paralyzing to know how to learn the newest, best practices web development.

I'll say things I'm thinking of doing and maybe a fren can throw me a bone about what I should use.
>If I want to locally host a site on a linux box to replace work orders, receipts, forms, etc to go paperless (with tablets out in the field)

>Or what if I wanted to host a site where people upload a black and white photo to my site for a CNN model to colorize ? (I already know Python and have the model).

2019, best practices to make these with?
I mostly just want to build them for the resume, the challenge, the glory.

>linux box to replace work orders, receipts, forms, etc to go paperless (with tablets out in the field)

Here I mean like, a small plumbing company that wanted to go paperless, if that's not obvious.

Back in the days I used Dream Weaver because it provided me with quick access to code blocks. Now I use Notepad ++ and MOSTLY editing in the F12 tab of the browser itself and directly saving the changes from there.

You have to know a fair bit of CSS, HTML is laughable, just CSS to position everything and build the media queries. Bootstrap helps, but I don't usually use that shit.

and I don't need step by step,
just, what 4 or 5 languages/ programs do I need after the the domain is up.

It doesn't sound like you really need a dynamic front end, in which case a static template generator is what you're looking for. Pretty much any backend library will come with a way to interpolate variables into html before you send it.

>Now I use Notepad ++ and MOSTLY editing in the F12 tab of the browser itself

So, you can just write a dynamic webpage line by line?
Pic related. You can read, write, and edit something like this? (It's a Google Image search result page)
Is Notepad++ just a text editor?

I'm new to Front End. I thought programs were mostly writing the code now.

Attached: Screen Shot 2019-03-30 at 10.09.45 AM.png (596x480, 128K)

Use VScode. Netbeans when you're more confident.

this is a static page view though, dynamic pages include back end language like PHP you can't see that in the source code from F12.

Make the basic structure in the editor, and tweak it in the browser.

static website - HTML + CSS
dynamic website - HTML + CSS + JS
web app - frontend(HTML + CSS + JS) + backend

>Now I use Notepad ++ and MOSTLY editing in the F12 tab of the browser itself and directly saving

what the fuck

F12 on this page.

Look at the code for this image as you zoom.
I don't know shit about Front End. But this looks really complex.
How was this done?
The URL changes as you zoom.

artsandculture.google.com/asset/thoughts-of-the-past/ewGwe116tQZ_0w?ms={"x":0.5212789771425429,"y":0.3559474972292552,"z":11,"size":{"width":0.7035905271199389,"height":0.30156599552572705}}

Jow Forums is badly designed, it splits every line into a seperate one by using
tags, instead of using simple CSS properties
It's just unnecessary

>still paralyzing to know how to learn the newest best practises in web development

As someone who was in the same boat a year ago, I can give you a few tips which I have realized.

The most important thing to learn as a web dev is, HTML. Take your time to properly learn HTML, not just the tags, but DOM, and Events etc.

Javascript is quite vast, but you need NOT know all of it to learn to make a website. JS has a lot of aspects which I have barely used as a web dev, especially stuff like inheritance or closures ( This is strictly from a front end perspective.).
Knowing functions, event handling, Arrays, and Strings is good enough.

CSS is quite straightforward.

Also, the best thing you can do for improvement is more practise, not viewing additional courses or reading more books on the matter.
Challenge yourself to do cool stuff. If you hit a roadblock, google the stuff and learn.

While learning front end stuff, its easy to get lost in what seems like a sea of knowledge. Its very important to focus on the basics first inorder to not get confused and overwhelmed with the available information.

>CSS is quite straightforward
no it isn't
HTML and JS at least let you know what you're doing, CSS is just constant guessing and rewriting

I'd say all frontend devs should be experts at HTML and CSS for two reasons.
Firstly, so that you wouldn't use JS for things you can do with HTML and CSS.
Secondly, so that page styling wankery won't slow down your feature implementation.

>I cant use developer tools to save my life

lmaoing@urlyf

>implying
the only standardized way to align elements on a page using CSS in 2019 is the grid system and you can't prove me wrong

don't focus on shit like this for now, start with HTML and CSS, that's Javascript, you'll get to that when you have a solid understanding of HTML CSS

>Secondly, so that page styling wankery won't slow down your feature implementation.

and by page styling wankery you mean something you get from a template or software that generates the code, I assume?

What's wankery? Common wankeries you patch?

>Would anyone want to make a dynamic webpage line by line in HTML and CSS?
no
>How much do you, personally, use web design software vs how much hard coding as a percentage of work hours?
we use angular + spring boot for our web applications at my company.

>no
I mean you have templates, but those templates have been coded line by line by someone at some point, the fuck you think they just appear or something?

There's a lot of 'I use x, y, and z' program or language I haven't heard of.

Is there a diagram of what these things are?

I understand the very front end: websites are in HTML and CSS.
I understand the very back end: some kind of database and Python or C# or something

Not really sure what to use in between.

> templates. the fuck you think they just appear or something?
I would think a GUI program, a Dreamweaver or something would generate the code.

>I would think a GUI program, a Dreamweaver or something would generate the code.
doing a website in dreamweaver is what totald retards do, you loose all control on what you're creating, somebody with a lot of templates out of fucking creating them in the first place start adding bits here and there, but desu mostly is done just writing them, it's easier, a website is nothing but a few elements thrown together, I do it all the time, some times it is more complicate to configure shit like dreamweaver how to do it than to just code it yourself

>you loose all control on what you're creating

Control of what?
I'm not arguing, I'm new to front end.
You want to control what?

of what you create, I mean you obtain the same result, except you are creating tons of ineficient code and a literal mess, stick to writing your own code, build your templates, but write your own code

those preprocessors use some sort of fucking hacks that basically write shit code that isn't for humans, writing it yourself is the cleanest, easy to update, mantain and modify, just look at job offers in the web industry, literally NOBODY asks for dream weaver knowledge but CSS and HTML knowledge instead

>CSS and HTML

I like the cut of your jib.
I like to go deep. Get my hands on the nitty gritty.

And if you want to make a dynamic site, that's JS?

2/2
>JS?

I just don't know so I don't want to invest my time learning something obsolete or hacky.

I want to make a static, responsive homepage for my research group with minimal (preferably no) JS. What tools should I use if not just pure HTML/CSS?

>dynamic site

I meant 'responsive design'. Different for different devices.
Jow Forums would write that with Javascript?

yes, that comes right after those two, then comes back end and database language like PHP, .NET Core and Node, and PostgresSQL and mongoDB, after that you get into all the frameworks for JS and then for Backend, like Symfony for PHP Express for Node (I think), etc

no that's CSS

If the page is static then you don't really need anything other than HTML/CSS. Use flexbox and media queries for responsive design.

and JS, assuming you don' have a back end

>web developers
>web
>developers

What? I know CSS and agree it's complicated. There's a lot of guesswork involved and a lot of conventioned rules instead of explicit ones. Why is color a text property, but background-color a background color? Why not call it text-color?