Should I learn Wappler instead of learning to code manually??

Only real nitpick I'd have now is the DIV for nothing around the menu UL, as UL's a perfectly good block level container unto itself.

Though some ID's instead of classes might help for major subsections, but that hinges on future planning. I often describe my outermost wrapper or first element on the page as #top, so that if later on I want a <a href="#top">Back to Top</a> it's as easy as that. Also ID's have higher precedent than classes, which can make it easier to override styles for certain sections. Really though you've not built complex enough to warrant that, it's more just something I do out of habit.

Oh, and initial-scale is 1, you don't have to say ".0", of course it's .0 if it's a whole number. I also like to include height=device-height in there because both my old cheap icoo phone and cheaper bluboo tablet go wonky in landscape view -- using "lie" height as width -- without it. A LOT of people say it isn't needed or doesn't do anything, they're just lucky enough to own a device that doesn't do it.

They're told it before they ever get this far with HTML/CSS. It's as simple as that, nube predation. Then they become experts in that instead of HTML/CSS and that confirmation bias -- that they have "a" result, regardless of quality -- kicks in.

It also doesn't help that systems like bootstrap use card-stacked examples. You take something like their pricing example and to 100% replicate its functionality whilst fixing its issues you end up with around 3k of HTML and 5k of CSS that you had to write of your own, whilst if we don't count the size of bootstrap itself against that total they are writing 5.52k of HTML and 211 bytes of CSS. That sounds like they had to do less work -- but it's not a fair comparison.

Why not? Because if you want anything other than bootstrap's default colouration, you can't alter bootstrap itself (well you could, but you're not supposed to ) and instead you are expected to layer your custom colours atop theirs with more declarations in your own CSS. You want to do something that simple with your own code, you just do it. Edit the existing template, done. No worrying about specificity, dicking around with !important, adding more classes or ID's since there are no suitable targets as classes end up re-used all over the page, etc, etc. By the time you do something as simple as changing their shades of grey to shades of blue, you could be looking at as much as a 20% increase in HTML size and adding 2k of CSS... for something that using semantics and separation of concerns would require ZERO increase in code size.

That's the lie of their approach.

Of course, that's before we talk about the inaccessible broken mess that tells non-screen users to sod off that is their idea of HTML. It may in fact end up more code just for trying to fix all the things wrong. Something that gets even worse if you look at outright garbage examples like the Blog Template that doesn't even have a responsive menu (which I had thought was one of the points of using bootcrap), or the product template where their idea of responsive is to get rid of the menu entirely, or the Jumbotron example which is the only one to actually do a responsive menu -- but goes full Pakled on it by using JavaScript to do CSS' job! Not just any simple old JavaScript either, but requiring the bloated train wreck of developer incompetence and ineptitude that is jQuery in the process!

That last one is probably the one most chock-full of the worst practices, hence their deploying 281k in 5 files to do what you or I would do in around 10k or less in two files. You want an epic /FAIL/ at web development, that one gets the trophy.

But they don't think in those terms because it's all they know. They sure as shine-ola have no clue what HTML is much less what it is for! YES, I know they work for twitter and it drives twitter under the hood, that doesn't fix the problem. If anything, it's probably costing a company as large and with such high traffic money and time; but no, their guys "know what they're doing" -- of course they do.

 

This goes back to the history of HTML and what was happening fifteen to twenty years ago. All these redundancies were many, MANY times worse. I believe I gave you an example of what we were writing for HTML in the late '90's?

"HTML 4 Strict" -- also referred to by many as "the REAL HTML" -- did away with a LOT of pointless redundancies. It was the entire reason it existed and was created for the sole purpose of dragging us back to good practices. From 1998 until the introduction of HTML 5, ALL NEW WEBSITES SHOULD have been written in 4 Strict... but that didn't happen.

Part of it can just be blamed on the word "strict" which intimidated people. More of it can be blamed on the fact that the vast majority of people writing websites could never wrap their heads around not saying what things look like in the HTML. The very idea of the "separation of presentation from content" was just "too hard"... or they simply didn't want to update their skillsets past the 1997 norms that were well established. There was a whole campaign of badmouthing those who adopted it, calling us elitist, or wanting to "make things harder" when as you've seen, the results are simpler, cleaner, smaller, and easier to develop! It's been 20+ years of slander and lies.

"HTML 4 Transitional" -- the 'transitional' part literally meaning "in transition from 1997 to 1998 practices" -- became the norm everyone used, as it allowed all the old HTML 3 and browser specific garbage to be "valid". It was meant to be the compromise for old websites that wanted to add the new features, but ended up being what the vast majority of people used and kept using. As such using endless pointless DIV to wrap sections with classes or style="" just became the new versions of <font>, <center>, align="", etc, etc... with ZERO improvement in actual methodology. This led to the creation of these frameworks like bootcrap or w3.css which again just replicate the same broken mindset and techniques.

So where does HTML 5 fit into this? It was not created by the W3C, nor was it even really created to make HTML 5 "better" in terms of the separation of concerns. It was created by those who didn't like the direction or simplicity of 4 strict and wanted to continue down the path of saying what things would look like, and flipping the bird at semantics. The group that made it, the "What Working Group" -- aka WhatWG -- clearly didn't understand enough about HTML 4 strict to make its successor, and went about creating all sorts of extra "structural" tags to represent what people were doing with DIV, regardless of if those DIV were even needed, had an actual semantic meaning, or were presentational.

... and that's the problem with HTML 5. Whilst there are many improvements -- the simpler charset META, the removal of pointless attributes like type="text/css" and type="text/javascript", the new input type="", etc, etc -- a hefty chunk of the spec simply introduced new redundancies, pointless containers for those who think every damned tag needs two or three DIV around it, and allowing in old redundancies that 4 Strict specifically and intentionally said NO to -- like <embed>.

They even created new redundancies. The original W3C plan for the next HTML -- the one shitcanned for WhatWG's nonsense -- actually planned on dropping the IMG tag. why? It's redundant to OBJECT. Those new AUDIO and VIDEO tags? Redundant to OBJECT. That EMBED tag that 4 Strict specifically told to sod off on purpose? REDUNDANT TO OBJECT!

The OBJECT tag's entire purpose was supposed to be to imply media that was not plain text content. IT was to be a one stop shop where ANY media format could be added, be it in-built to the browser/OS or added by an extension. This would allow for sandboxing of plugins, a single interface/api to learn, and not being at the whim of browser maker's vendor lock-in as to what file formats are supported.

Which is why the claims that AUDIO and VIDEO were created to fight the "vendor lock-in" of flash was another bald faced lie on the part of those who lost the media format wars to Flash -- like the VIDEO tag's creator Apple. If it was to fight vendor lock-in why did we spend the first five years of the VIDEO tag having to deploy four different file formats because each browser maker had their own favorite pet format they were pushing, re-igniting the format wars? Each browser maker was trying to create their own vendor lock-in to... uhm... fight vendor lock-in? If that doesn't scream bullshit, I don't know what does.

I can prove the WhatWG didn't understand HTML, and instead were documenting what people WERE doing, instead of what SHOULD be done. <HGROUP>

The HGROUP tag was created to let you 'pair' headings together for things like a title and tagline. The problem with this is that's all one headING and should never have been two separate tags in the fist place. You STILL see idiots slopping out code like:

<hgroup>
    <h1>Digital Point</h1>
    <h2>Webmaaster and Internet Marketing News</h2>
</hgroup>

Code (markup):

(Just an example, DP does not actually do this!)

The problem being does that H2 actually indcate/mark the start of a new subsection of the page? No. So it's not a H2, nor should it ever be so. Pairing headings that way is gibberish. A tagline is a grammatically related part of the H1, so it should be in the H1! For something like a tagline we make the text smaller in professional writing to indicate de-emphasis... hence we have a tag for that:

<h1>
    Digital Point<br>
    <small>Webmaaster and Internet Marketing News</small>
</h1>

Code (markup):

Now, that might look like presentational markup, but again we WOULD make that text smaller for grammatical/structural reasons, so it's not. We don't even have to display the text smaller. It just means WOULD BE, not should be.

B, I, STRONG, EM, and CITE all have the same type of relationship. People think of <b> and <i> as being presentational, they're not supposed to be. They are supposed to mean "Would be bold or italic for grammatical reasons where it is not receiving emphasis (em), more emphasis (strong), or being cited." It's a subtle philisophical difference many never wrap their heads around, even though it was 4th and 5th grade English back in the '70's. The classic example a friend of mine created a long time ago: (skipping code tags, they don't help the clarity in this case)

<i>GURPS,</i> <b>Steve Jackson Games'</b> flagship role-playing game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>

EMphasis and STRONG for expression, Italic for product and book titles we are not citing, Bold for the legal entities. This is why B inside STRONG or even headings, or Italic inside EM can in fact be valid and make perfect grammatical and structural sense! They are NOT redundant as they have different meanings!

But most people are not taught nor even think in those terms. Hence the mess that is HTML 5, and why even though the W3C has accepted PARTS of it as official, there is still a lot of differences between the WhatWG and W3C versions; only adding to the confusion.

The first H2 should mark your main content. That H2 being a blessing in that you can put all sorts of useful stuff like navigation and search before the content. Still content should come before other 'additional' stuff on the page where practical, which is why "content first" column techniques are a thing. What could/might be in a sidebar would/should come after the content, but your primary navigation? That's more useful to users up top.

In THEORY that's also the function of both NAV and MAIN in HTML 5, but if H2 can do the job, why do we need those? NAV is just stupid anyways... of course anchors with href on them are navigation, THAT'S WHAT ANCHORS ARE FOR! NAV going all sorts of full-on dumbass too the way people are blindly dumping anchors into it as menus without a UL/LI, completely pissing on semantics and even the rules of HTML 5 itself. The bloody spec says that a menu is still a UL/LI even if you put NAV around it, but again, people make blind assumptions then blindly copy what everyone else is doing. Just watch those lemmings run straight off the cliff.

It depends on the site and its needs. I do feel people slop way too much stuff into menus, but there are aspects of mobile usability where a hamburger menu approach is the only "real" solution.

One of which is the needs of a touch interface. It helps to "enlarge" the buttons so that they are better "finger sized targets'. Google even tests for this on your mobile quality. That larger padding consumes a lot of screen space, so it's better to collapse the menu out of the way for normal navigation.

What I really dislike are full "dropdowns", aka they dropdown all the time for dozens of different subcategories. A single depth isn't too bad, but when they start having multiple flyouts two or three levels deep they not only get hard to navigate, they can also compromise usability by creating a condition in the user called "link overload". It is possible to present the user with too many options at once, or so many options they don't comfortably fit on the screen. It might seem convenient to an expert who knows the whole page inside-and-out, but it can confuse the hell out of the casual user.

In general there are valid arguments for/against the different menu techniques, and I take it on a case-by-case basis, instead of trying to hammer everything into one round hole.

 

I recommend doing both! Learn the basics of coding like the back of your hand and get started with learning wappler for making projects quickly. Wappler or web flow can be useful to develop the site ASAP when you have a deadline to meet. However, you will not achieve full freedom and flexibility in your website layout and design which can only be achieved via coding. So learn both!

 

In regards to Wappler, that depends on who you are and your long term outlook, in my opinion. For anyne who is past their sell-by-date (old developers, who can't hack it any longer and are a few years from retirement, working as freelancers) it may be a suitable alternative. For those with a short-term goal in mind, an entrepreneur maybe, who has a get rich quick app they want to deliver, it may be suitable. The majority fail and disappear without trace. For a company, with limited finances, who employs an average developer to service its own website, it may be suitable. Not sure what the developer is going to do if the company suddenly goes out of business, that's him or her almost certainly up a creek without a paddle. Don't put all your eggs in one basket and become depended on any particular niche workflow or editor would be my advice.

On the flipside anyone that has any long-term ambition as a web-developer and is concerned about long term job prospects it is not a good option, in my opinion. Why spend a year or probably more learning a niche workflow, 'App Connect', javascript front-end framework, which isn't even regarded in the industry as being main stream. I can't see that as being a very transportable and required skill that any discerning web-agency will be requiring any time soon.

Also in my opinion its immoral as clients of such developers who use these minority workflows don't know what they are walking into. If the developer disappears or the client decides they want to employ the services of an alternative developer they are likely to find it almost impossible to find anyone that is familar with such an unrecognised workflow. Poor advice and poor practice, but when ever have those qualities stopped the scam artist from practicing their black-art, at the expense of those you are unsuspecting.

I fully agree, learning to code will provide total freedom, flexibility, choices and options.

 

Hi

Interesting thread.
Here are just some messy thoughts of mine to help other by their decisions.

I'm at the same point as Gary-SC was.
I'm a beginner in web developing, I still have to learn alot.
I feel between design an coding, but a little closer to design

When I discovered Webflow I was amazed how easy it is to build dynamic websites.
The UI of webflow is very well designed and easy to use and the tutorials on their website are great organized and perfect made (easy, fast and understandable). And there were alot of good designed example-websites which convinced me.
BUT as soon as it comes to custom features, I encountered the limites of webflow - frustration came up.

Then I found Wappler, it is hosting-independable and it promotes its tool by saying "visual coding and modern productivity tools for Designers, Developers and Agencies". Is it really? No! You have to be a professional web developer to be able using it.
Until today I didn't found any example-wappler-website which was in a good contemporary design, every example did look like one of an amateur.

Wappler has less limits than Webflow but it has a terrible UI. They write in their documentation "Wappler’s UI is minimal, intuitive and easy to use".
This is ridiculous! Its UI looks very unprofessional, almost nothing did work as I expected.
In Webflow it was really easy to create dynamic websites but with Wappler you need a deep understand of what is going on under the hood. And if you know what's going on there, why you still need Wappler?
Takes writing a few lines of code really longer than finding out how to do the same by clicking around on Wapplers UI?
For people like me, who know a little about HTML, CSS, JS, MySQL and PHP it's very hard to create very basic dynamic pages there. And I always felt binded to that ugly Bootstrap-prison. And I was never sure did Wappler really do everything right under the hood? And everytime you edit something in the dynamic Table Generator then it overwrotes your custom code and you had to modify it again. In pure coding I feel having more control, and I know better if things are setup right.
Correct me if I'm wrong but I guess the founder of Wappler was (or still is?) the main coder of Dreamweavers Plugins. Dreamweaver has that Plugin called DMXZone, which is kind of a Framework like react or angularJS. And Wappler I guess is nothing more than Dreamweaver with DMXZone in it.

In the Wappler community you get very fast answers, that's true. But as soon as you post critism to Wappler your thread gets "unlisted" which means that it will not appear in search results or anywhere in the community, it's only accessible via directlink.
Here are a few of my dumb questions and manifestations (I have to admit that when I loose patience then I like to formulate my sentences somewhat provocatively ):
https://community.wappler.io/t/cannot-upload-link-files-within-wappler/9023
https://community.wappler.io/t/missing-dmxconnectlib-on-target/13658
https://community.wappler.io/t/how-to-change-responsive-layout-of-a-table/9164

At the moment I go back to more basics, getting my hands dirty with Codegniter, but is this another prison I will get in?
I did learn the basic of HTML, CSS and JS but I wanna create dynamic websites.
What would you suggest me to learn next?
Pure MySQL and PHP?
Don't forget I'm a Designer, I'm visual oriented, to mutch code will probably overstrain my brain that's why Webflow and Co. did catch me at first

Kind regards
Alain

 

Something a co-worker said to me 25 years ago. Don't let the tool make you a tool.

Until you can do it without these aids you are unqualified to even know if said products are any good. You're at the mercy of their advertising and propaganda... and worse, confirmation bias.

I can see it in the tone of your post. Because these systems can give you A result, ANY result, it ingrains the notion that they work. The longer you deal with this stuff the sooner the cracks become evident. Many people just because they got A result, assume that the problem is them and not the system they are working with. That's confirmation bias. Worse, they often double down defending it because of that, rather than admitting that the problem is the choice of tool. That's CB's big brother, cognitive dissonance.

Which is why the fans of halfwitted ignorant and incompetent trash like bootcrap or jQuery sound more like Jonestown cultists than developers.

you might think you've learned the basics, but what you've listed for tools you probably haven't. It's a sad fact, but most of the garbage things like Wix, Weebly, Wrappler, bootcrap, etc, vomit up is the farthest thing from using HTML properly. ANYTHING that puts appearance ahead of semantics falls into that trap.

How are you on semantics? Do you REALLY know what H1..H6 are even for? Do you know that P is for a grammatical paragraph and not just for slopping around things "because"?

Can you recognize and explain what's wrong with this code:

<body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
  <h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
  <nav class="my-2 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href="#">Features</a>
    <a class="p-2 text-dark" href="#">Enterprise</a>
    <a class="p-2 text-dark" href="#">Support</a>
    <a class="p-2 text-dark" href="#">Pricing</a>
  </nav>
  <a class="btn btn-outline-primary" href="#">Sign up</a>
</div>

Code (markup):

Until you can answer yes to that properly, I'd hold off on going up the food chain to CSS and worrying about appearance, much less higher level coding tech like PHP and mySQL.

Honestly with a statement like that, you're NOT a designer. You've only been misled as to what design IS. You're an artist. There's no shame in that, but like many who call themselves "web designers", well... Inigo Montoya: "you keep on using that word"

Design is engineering that incorporates art, not artwork unto and of itself. This means obeying specifications and guidelines. Actual engineering concepts like accessibility, usability, sustainability, and maintainability. All playing to ones abilities.. The folks who screw around with appearance before they even have semantic markup, dicking about with tools like Photoshop or WYSIWYG editors and calling themselves "designers" are nothing of the sort!

Getting out of the "presentation first" mindset is likely going to be your greatest hurdle. It's putting the cart before the horse and an utterly back-assward approach to ACTUAL web design.

This is because "what it looks like" is only PART of the audience. HTML is for EVERYBODY, not just the perfectly sighted on high resolution screens with 45mbps or faster broadband. It's for the visually impaired, those unable to afford cable internet, people with metered connections who turn off things like style and images, and of course search engines don't have eyeballs! NONE of those potential users could give a flying purple fish what your page looks like, and that is why semantics -- saying what things ARE and not what they look like should be your starting point!

Hence the concept of progressive enhancement, where you start at the bottom and work your way up. It's a really good way of doing things in that it basically tells you how to build it -- in the raw underlying languages -- from the foundation up.

See my article on the topic: (that's starting to show its age, something else for my to-do list)

https://cutcodedown.com/article/progressive_enhancement

A brief summary of the process:

1) write your content -- or a reasonable facsimile of future content -- in a flat text editor as if HTML and CSS don't even exist. Just plain, ordinary flat plain text in an order that would make sense if it was a normal .txt all by its lonesome.

2) Apply semantic markup to it, saying what things ARE and not what you want them to look like.

This means your H1 (singular) is the (singular) heading (singular) that everything on every page of your website is a subsection. If your document structure is to make any sense at all, the H1 should be the first content-bearing tag inside BODY. It means that H2 is the start of a major subsection of the page, with the first H2 (or HR) being the start of the primary page content. H3 marks the start of a subsection the H2 before it started. H4 is the start of a subsection of what the H3 before it started, and so forth down to H6. Even HR means a change in topic/section where heading text is unwanted or unwarranted. THEY DO NOT MEAN FONTS IN DIFFERENT WEIGHTS AND SIZES OR DRAWING A LINE ACROSS THE SCREEN! That's just their default appearance.

It means UL/OL for short grammatical bullet points or selections, and not "hurr durz, eye wunts uh bullet befloor eet". It means tables for tabular data of relations between headings, rows, and columns, and not "hurr durrz, eye wunts teh columsies". It means P is for grammatical paragraph of flow text, not some stray fragment of text, an image, or the labels inside a form!

... and because we're taking semantics, sematically neutral tags like DIV and SPAN have ZERO business being added. Same for HTML 5's pointless dumbass "structural" tags that are a waste of time, effort, and code. Aka ARTICLE, ASIDE, HEADER, FOOTER, NAV, MAIN, SECTION. These are pointless redundancies that offer nothing of value, forget them!

Until you have that foundation, you have no business moving on to:

3) Create a semi-fluid elastic desktop layout using CSS. Bend the markup to your will -- adding DIV, SPAN, classes and ID's where and only as needed. Semi-fluid means give your main content area a max-width so long paragraphs aren't hard to follow, and elastic means declare everything in EM and NOT PIXELS!!! "px" are inaccessible trash that sends users like myself diving for the zoom, and more often than not results in broken layouts. There is NO fixed relationship between EM and PX since some users -- like myself -- use a different default value for 1EM on our machines.

I say start with a desktop layout because we can't target legacy desktops with media queries. There is no way to override a mobile behavior for those old desktops... but any device we care about re-arranging the layout for -- aka mobile -- we can use media queries to override the base style. Another mantra -- "mobile first" -- that's an utterly back-assward way of doing things.

Hence:

4) Narrow the window until the layout breaks, figure out how many EM that is, and apply media queries to adjust the layout.

5) Lather, rinse, repeat step 4 until you hit 16em. (256px for normal/16px users, 320px for large font/20px users such as myself)

6) Then and ONLY then enhance the already working page with scripting if desired. GOOD JavaScript on an accessible website should enhance the already working user experience, not be the only means of providing it!

THAT is DESIGN!

Anything less, anything allegedly "simpler" is just going to keep biting you the way you said webflow and wappler did.

Particularly since if you know the first blasted thing about HTML or CSS, what webflow and wappler vomit up for HTML and CSS -- much like bootcrap itself -- clearly says the folks who made these systems are not qualified to write a single blasted line of code for websites, much less have the unmitigated gall to tell others how to do so!

 

You are correct in every repect. I've long been a critic of such workflows and I'm not sure who they are aimed at. I've come to the conclusion they are for very naive beginners, searching for codeless utopia, a quick fix, of which there isn't one, especially if your goal is to aspire to having a long-term career in this business. Those that have reached their sell-by-date and can't keep up with the ever changing landscape and I can't say I blame them, but be honest and don't hide behind that fact. A good percentage of those on the Wappler forum, come from some kind of 'business' rather than web-development background, who generate ideas for apps, rather than websites. At one point Wappler was advertised as the workflow for those who couldn't/knew nothing about code but they can't have moved further away from simplicity, if they tried. What amatuer (those who know nothing about code) needs Docker or Git to produce a website. Quite frequently you will encounter posts on the forum that say the program is too complex to understand, the majority seem to know nothing concerning hosting a website and what's worse they only offer a 7 day trial. Recently I think they have changed course and are going after users of other workflow such as Bubble, which lock their users into self-hosting.

The font-end inline javascript coding the programe produces is beyond hideous but hey you're not really meant to be looking at the code according to the Wappler mantra. Of course there is a place for Wappler, much like Wix, Webflow and all the other cheap solutions but its not for those who are trying to carve out a serious web-development career in my opinion and to be fair I'm not sure that's what the program founders say or believe either. They don't care who uses it as long as they sell the units. How many Wappler centric jobs do you see advertised? If you only have specific and limited uses/goals, to create a starter app or to produce and manage an inhouse website it might be an option for those on a budget or no budget, a kind of low cost DIY approach.

There is an update nearly every week which intially seemed progressive but they seem to break something almost every release, not hugely stable or welcoming. To producing anything complex it seems you have to insitigate 100+ clicks through the complex UI rather than use pre-defined snippets of code that any decent developer would have accumulated over time.

Its certainly not my cup of tea but I guess desperation requires desperate measures, so who am I to make judgement. I can only comment based on being able to code and having experimented coding via one of these automated processes.

 

Thanks you for that detailed feedback.

Ok let's give it a try
Basically from a semantical point of view there are missing many HTML-Tags.
Google does not know what the DIV is for, hence I use the HEADER-Element instead.
Sign Up is part of the navigation hence I put it in the NAV-Tag.
Giving each HTML-Element a class to format it in a separate CSS-File without Bootstrap.
Using an unsorted list in the navigation is common practice which I never understood what it is useful for, I just do it

<body>
<header class="header">
  <h1>Company name</h1>
  <nav class="nav">
    <ul>
    <li><a href="#">Features</a></li>
    <li><a href="#">Enterprise</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Sign up</a></li>
    <ul>
  </nav>

</header>
<main class="main">
<section class="section-name">
<article class="article-1">
</article>
</section>
</main>
<footer class="footer">
</footer>
</body>

Code (markup):

 

Even though I am not a decent coder, even I can see some problems here.

First, where in hell are H1, H2, H3, and H4, all of which are REQUIRED before the H5?

Second, WHY the specific class names instead of general names? 'bg-white' means that instead of changing just the CSS file, one would need to change EVERY instance in the HTML if one decided to change the background to yellow. That is STUPID.

Third, WHY repeat the class names for every anchor? Do it once in the nav and let them inherit.

I know I missed more, but those are what stand out for me.

 

@I_Alain_I

Having gone through a similar situation like yours, I very strongly suggest you stop wasting time fiddling with those tools and start learning HTML/CSS. It's not rocket science. I can't tell you enough how important it is to learn to code HTML/CSS the right way. There is no way around it, and it's the right thing to do. Not only that, it's FASTER to build a website by writing code. I know many "industry standard" people will call me dumb and ignorant for saying this, but it's true.

I am horrified to revisit my old threads and see how naive I was back when I posted them. But, I'm glad I did, because they all ended up teaching me and saving me from all kinds of misinformation. Check out this thread as well:

https://forums.digitalpoint.com/thr...css-by-hand-in-a-text-editor-in-2019.2857372/

Webflow, Wappler, etc. they are all highway robbers scamming well-meaning novices with their overpriced, scammy tools. They are the snake oil of the web development industry. I would not even touch them with a 1,000-foot pole.

 

You didn't have to form the full document, but given that those HTML 5 "structural" tags would be pointless redundancies and/or a waste that shouldn't be in the code in the first place, not an auspicious start.

You did correctly get the H1 and UL/LI in place. However the use of HEADER and NAV is pointless when you have headING's in there. Anything between the H1 and the first H2/HR is clearly / obviously the header, so the derpy "HEADER" tag serves no legitimate purpose, especially if you're going to slop a class on in. <header class="header"> being almost as silly as <form role="form">. At that point you might as well have used a DIV -- which I would -- since HEADER is actually adding NOTHING to the semantics. The same can be said of NAV since marking a section as "navigation" is utter BS, since every <a>nchor on a page is navigation! The only thing the tag might do is allow skipping the section to the start of the content / next section, but that's H2 or HR's job!

Likewise you yanked all the presentational classes, this is a good sign too.

That you don't know the REASON for the UL is troubling, it is there so that said menu is marked as a list of short bullet points or choices, and not a run-on sentence.

<a>nchors are semantically neutral, which means that the menu might as well have been written as:

<span>Features Enterprise Support Pricing Sign up</span>

Code (markup):

For all the semantics and accessibility that stupid NAV provides. See what real screen readers like JAWS or braille readers (like mine) would do with that section. A menu is a list of choices in no particular order. That's UL's job to say, with LI separating them by the semantic meaning. <a> provides no such semantics. That's why <a href="#test">putting an anchor in the middle of a sentence</a> does nothing to change the semantic meaning of anything!

Hence how I would write that same section is:

<body>
<div id="top>>
	<h1>Company name</h1>
	<ul>
		<li><a href="#">Features</a></li>
		<li><a href="#">Enterprise</a></li>
		<li><a href="#">Support</a></li>
		<li><a href="#">Pricing</a></li>
		<li><a href="#">Sign up</a></li>
	<ul>

Code (markup):

Again, wasn't asking for the rest of the document, but you used a slew of tags I would never use because HTML 5 is pissing on semantics from orbit and telling people to slop extra containers in like it's still 1997 and we're using tables for layout. As @Dan Schulz used to joke, the people who slopped out endless pointless tables for nothing now just sleaze out endless pointless DIV for nothing. I'm almost glad he didn't live to see endless pointless HTML 5 "structural" tags replacing DIV whilst failing to offer a single legitimate improvement over what 4 Strict gave us.

The laugh being do you know where that small snippet came from?

One of bootcraps examples -- as I've said many times proving that the folks who made bootcrap aren't qualified to write a single blasted line of HTML, much less tell others how to do so!

Which is how the know-nothing who made that steaming pile ended up throwing 5.5k of markup at doing 2.9k of HTML's job... and that's for a simple example. You get to a real website and their dumbass techniques end up wasting 60k+ for 16k's job by the time the average Joe gets done doing things "their way". And for what? To avoid writing less CSS in total than the difference in markup size, JUST to slop some massive dipshit CSS "framework" in that's five times larger than most websites CSS should even be, and using JavaScript for things that are none of JS' business? Hence the total page being 164k in 5 files doing the job of 8k in two files.

It really puts the herp into that derp.

 

Gary-SC
Your post was like reading a sales page for that website builder... LOL

Anyways, no wyswyg frameworks can take the place of manual coding.
Your webpages will be heavier to load, javascripts will throw errors on different browsers, no control over tags like DIV/P/headings and what not.
You will end up spending more time fixing errors, than coding in plain text in the first place.

One example, just recently PHP launched its version 7.
Mysql functions were dropped, and mysqli functions were made standard.
All my websites were using mysql.
But it took me minutes to update the "one" query function I used in all those website scripts.
All over the script, only my custom function was called.
If I was using a builder like this one, then it would have used a "direct" mysql function each time a query was sent to database.
This depricated function would have been spread all over my script.
GOD only knows how many weeks it would have taken for me to get "one" website up and running...
Not to mention, you wouldn't even know what to edit and where...

I don't know if that website builder is just for HTML and JS, or is it also for scriptting, but basic problems still apply.
Forget website builders and start learning coding.

 

In your post? Absolutely. "No code movement"? More like "f*** users with accessibility needs, f*** content, f*** search movement." The whole "no code" BS having more in common with a bowel movement than a social one.

I have NEVER seen a WYSIWYG or other visual design tool that incorporated proper semantics, separation of presentation from content, graceful degradation, or any other form of good practice that is the core of what the Internet is even for. They are a monument to stupidity and ignorance when it comes to web development, sleazing out broken sites and even more broken crapplets.

Webflow being a monument to the monument to stupidity and ignorance. A visual design tool that squeezes out bootcrap under the hood? That's really putting the herp into that there derp.

As I've said millions of times by now, "for people who know nothing about building websites, BY people who know nothing about building websites" is not a recipe for success... as evidenced by a simple "view source" of anything webflow vomits up if you know even the first damned thing about HTML or CSS. The CREATORS of that system are at best ignorant, and at worst outright incompetent.

Since if you don't know what's wrong with putting STYLE or LINK inside BODY, endless pointless scripttardery for things that don't even warrant the USE of JavaScript, using iframe's for handling logins, static style in the markup, presentational classes, starting a document with a H2, and sleazing in your content with an AJAX only methodology, just back the blazes away from the keyboard and take up something a bit less detail oriented like macramé.

Hence why they're crapping out 50k of markup without even having the actual page content IN the huffing markup, to deliver 3.4k of plaintext and zero content images. Ten times the code, telling users with accessibility needs to go F*** themselves, probably telling search to sod off as well, and the damned thing isn't even properly responsive being broken at everything but a handful of magic sizes... and that's webflow's HOME PAGE. We're supposed to trust these dipshits to make a system for us to build websites with? BULLCOOKIES!

But of course that's the problem with these dirtbag scam artist systems -- the creators talk a good game and the people they SUCKER into using them don't know enough to recognize just how badly they're being bent over the table by these predators. Predators who prey upon ignorance, fear, and wishful thinking.

Hence why webflow's main page and everything built with their software if used on an actual business would be grounds for a lawsuit.

Of course I've been hearing this "visual code" social movement bullshit for near-on three decades. The best we've seen have been rinky toys for people who have ZERO damned business doing much of anything for anyone on any topic... and that goes right back to the earliest days of Visual Basic / Visual C++ / Delphi.

you want proof that webflow is 100% derp? They have this:

<body><div data-w-id="4c486a9f-981f-8bbc-e9d0-dbe57b386739" class="nav-trigger"></div><div style="display:none" class="modal_wrap"><div id="modal-box" class="modal_box modal-medium modal-anchored"><div id="modal-close" data-w-id="7ff912bd-8295-4a3c-b853-f7403b8b488b" class="modal_x"></div><div class="html-embed-3 w-embed w-iframe"><iframe id="signup-modal" style="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameBorder="0"></iframe></div></div><div id="modal-overlay" style="opacity:0" class="modal_overlay"></div></div><div class="experiments-section"></div><div id="hero-test" class="hero_section cc-with-nav-final"><div class="nav-on-scroll"><div class="meganav"><div class="html-embed w-embed"><style>
body { -webkit-font-smoothing: antialiased; }
.nav_dropdown { -webkit-overflow-scrolling: touch; }
.nav_mobile-back-wrap {
  position: -webkit-sticky !important;
  position: sticky !important;
}
@media (min-width: 1200px) {
  .hero-heading {
    font-size: 72px;
  }
  .hero_copy {
  	max-width: 450px;
  }
}
@media (max-width: 767px) {
  .nav_position {
    transform: none !important;
  }
}
.three_visual.cc-2 svg {
	margin-bottom: -7px;
}
</style></div><div class="nav_position"><div data-w-id="d0282f8d-ebd1-bd2d-7da0-10f279afbbb1" class="nav_inner"><div class="nav_mobile"><a href="#" class="nav_logo-wrap cc-mobile w-inline-block"><img src="https://assets-global.website-files.com/5b16310a8abd739dc4fad4af/5b1732cfb35dca6d74e4b235_webflow.svg" alt="" class="nav_logo"/></a><div data-w-id="d0282f8d-ebd1-bd2d-7da0-10f279afbbb5" class="nav_lll"></div></div><div data-w-id="d0282f8d-ebd1-bd2d-7da0-10f279afbbb6" class="nav_main"><a href="https://webflow.com/" class="nav_logo-wrap w-inline-block"><img src="https://assets-global.website-files.com/5b16310a8abd739dc4fad4af/5b1732cfb35dca6d74e4b235_webflow.svg" alt="Webflow logo and link to homepage" class="nav_logo"/></a>

Code (markup):

Doing the job of this:

<body>
  <div id="top">
    <h1><a href="/">Webflow</a></h1>

Code (markup):

They'za wents full Gungan.



Static style in the markup, static scripting in the markup, scripting only DIV in the markup where they have ZERO damned business being, <style> tags in the markup where they are COMPLETELY INVALID, endless pointless DIV for nothing, static image in the markup, no H1 to act as the parent for later headings in the page or to tie all pages on the site together, absolute URI's for nothing, pixel metric fonts, pixel metric media queries....

Again PROOF these assclowns have ZERO damned business building websites, much less telling others how to do so!

 

Looks like millennials are bent on doing everything their own way... the easy one. That explains the whole philosophy behind some current movements started in the last 20 years. I recently saw an article where it describes what stresses millennials out:

The Top 10 stressors for Millennials

1. Losing your wallet or credit card
2. Arguing with a partner
3. Commute or traffic delays
4. Losing your phone
5. Getting to work late
6. Slow Wifi
7. Phone battery dying
8. Forgetting passwords
9. Credit card fraud
10. Forgetting phone charger

(See: https://www.theladders.com/career-a...harger-to-be-more-stressful-than-paying-bills)

Granted, some of them are legit points to be stressed about, but note that it says nothing about getting a good education, finding a job, raising a family, contributing to or leaving a mark in society. No doubt, forgetting a phone charger is more stressful than raising a family.

 

You said it - these visual tools are just 'viruses' being used by, well I'll say it again for you, those who are ignorant.

 

As an X-er I shouldn't speak for them, but...

OK boomer.

 

Hey look, it's lame excuse #6.

https://www.456bereastreet.com/archive/200704/lame_excuses_for_not_being_a_web_professional/

"The real world" -- probably from someone who's never ACTUALLY had to deal with the real world where tools like the ones being advocated do NOT result in faster development, do NOT make for quality products, but most importantly of all, ends up costing companies millions of dollars all because some know-nothing "visualy oriented" derp said "Wah wah, I dunz wunna lurns!"

See Dominos.

https://www.cnbc.com/2019/10/07/dominos-supreme-court.html

Which is exactly the situation the garbage code and visually oriented design garbage creates. JUST like the equally derpy frameworks, JavaScript for nothing, lack of graceful degradation, and dozens of other things these ignorant, incompetent, ineptly built systems vomit up and have the unmitigated GALL to call a website.

But seriously, what's your defense for that? So far all you've done is said "wah wah, is not" without any proof... possibly because you don't know enough about websites to be running your mouth on the subject; hence your defense of broken buggy bloated practices any competent developer should recoil in horror at. By ignoring good code practices and diving for the wysiwygs and other "visual tools" it basically sounds like you're completely fine with telling large swaths of potential site users to f*** off!

Because honestly, if you think working with HTML and CSS is the "difficult and tedious way" compared to trying to fix the problems created by the derpy WYSIWYGS, you don't know the first blasted thing about what websites are, how they should be built, why they should be built the way they are, and are just BEGGING to land yourself in COURT if working for real businesses as the crackdown on accessibility violations increases.

But sure, tell me again about "the real world".

 

Correct, done properly, without risk of possibly violating laws, without risk of alienating large swaths of the population from access, ignoring every single reason the technologies in question were created, etc, etc. There's a reason it's called WORK, and not "happy happy fun time".

Yup, that blind person is really scummy for feeling left out. What a lovely compassionate attitude you have towards the disabled. I bet you're one of these jackasses that parks in handicap spaces because "why should they get special treatment" or bitches "it's not fair" every time someone has to pay extra to put in a handicap ramp.

Dominos website was (and still is) in violation of the law. Specifically the Americans with Disabilities Act. Many banks, public utilities, government organizations, and other public services have spent decades dealing with ADA violations, or the UK equivalents of the EQA/DDA, or other international violations. See that Portuguese bank that got fined hundreds of thousands per DAY for similar reasons.

HTML exists to say what things ARE from a grammatical and structural point of view, so that it's accessible to EVERYONE. THAT IS WHY IT WAS CREATED!. It is up to the user-agent (a browsers are a UA, not not all UA's are browsers) to best convey that MEANING to users regardless of limitations of the device OR the user. It's the whole idea. As such starting out dicking around with what a page looks like before you even have that structure is ignorant, shortsighted, and in many fields -- basically anything more complex than a personal blog now -- that can land you in legal doo-doo if you fail to pay attention to that fact.

Of course the real laugh is that the rest of your response reeks of blind copypasta from "The Idiot's guide to replying with fallacies" -- you know, the big yellow book with the forward by David Koresh and Jim Jones?

The horde fallacy, also known as the mob fallacy, or the propaganda technique of bandwagon. Hundreds of thousands of people are wrong all the time, even when they agree with each-other. Hundreds of thousands think that Trump speaks intelligently. Hundreds of thousands think that there's a magical man in the sky cursing us all to eternal torment because he loves us all. Hundreds of thousands think that a fairy tale told by goat herders about some schizophrenic who thought he was talking to god built a boat, took two of every animal on it, whilst the genocidal maniac in the sky went for a do-over. Don't even get me started about the thousands who seem to think autistic children need bleach enema's or the nutters who shove jade eggs up the holiest of holies.

Doesn't mean they're right. No more right than the folks who sipped the tainted kool-aid in Jonestown, dressed in purple robes to consume laced yogurt so the aliens from behind Haley's Comet would take them away, or the mouth-breathers who think that the colour of the skin magically makes someone inferior to themselves.

"Hundreds of thousands do it" doesn't make it right, correct, or based in fact. Hundreds of thousands do and believe in delusional harmful nonsense every damned day. It is one of the biggest fallacies and most always an indication you're being LIED TO.

Unlikely, I'm generally immune to propaganda lacking in facts, or the mob mentality. The video you linked to presented no facts, and reeked of the type of... well, your next sentence says it all.

In other words, what Eric Bischoff called "cheap heat" in his TEDx, where they want you to feel instead of thinking. Hence the glittering generalities, the pat you on the back plain folks, the name calling (in the propaganda sense, not the crass method I use) of how "hard" the normal way is whilst not knowing enough to even have a valid opinion on the topic, the transfer of feeling and emotion of familiar topics, the card stacking of situations to artificially inflate how "great" their approach is, the bandwagon of creating echo-chambers at these conferences of people so desperate for lies to be true, and the slathered on testimonials.

When all seven of the classical techniques -- bandwagon, card stacking, glittering generalities, name calling, plain folks, transfer, and testimonial -- are on full display and plain as day, it should be setting off your scam alarm.

If by massive strides you mean back to being even worse than past attempts like Nyetscape Composer, Frontpage, or Dreamweaver. If you mean suckering businesses and nubes alike into making mistakes that have the potential to haunt them for decades in cost, neuter client retention, and possibly even cause legal issues.... then sure, they're running a great SCAM!

Even IF it were "fast" in terms of doing anything real -- which it isn't -- when the result isn't fit to wipe with for all the reasons I outlined, it's not bad advice to ignore these types of SCAMS propagated by outright snake oil peddling FRAUDS!

Can't, or won't? There are some things, from an efficiency... or even moral -- standpoint should not be done.

But given the lack of empathy found in the people making up endless lame excuses for why "certain groups of users don't matter" I guess such outright sociopathic attitudes rooted in apathy, ignorance, and wishful thinking should hardly be a surprise.

No more than the suckers who think that Amway or Mary Kay are legitimate businesses.

But no, you clearly have been brainwashed to not give a shit about anyone but yourself and your own comfort.

Part of why you offered no actual defense, and posted little more than "wah wah, is not".

 

@adamsmith028274

Have YOU watched the Tara Reed video yourself? I suspect YOU haven't. Well, I did. I mean, seriously, she is bragging about how she managed to "build an app" by using some Google Sheets scripts and some abstracted if-then logic in some goofy web services. I've got to say that it is NOT "building an app." It was painful watching her bragging about it.

You have a high level of enthusiasm, but it is not going to change my mind about Webflow and similar tools; They are the snake oil of the web development realm. The idea that a point-and-click interface to let you define the interface and functionalities of your website sounds nice as a sales pitch. But, that's what it is; A sales pitch. What I found is that there is no way around knowing the code if you want to build something that is even halfway decent. The irony is that you need to know HTML/CSS even if you use Webflow. I know this because I tried it myself at some point in my learning journey. Webflow gets in your way of doing the right thing with your code. So, if you know HTML/CSS well enough, you would NOT WANT TO use Webflow.

Visual tools like Webflow take users away from the most direct and straightforward method to codify the logic behind websites. In fact, the concept of the tool itself is deeply flawed because the contents should come first and foremost. It only gives you an ILLUSION of "ease of use," and you buy into that illusion only if you don't know how this stuff is supposed to work. Your blatant advocacy of "visual coding" tools shows me that you have no clue what you are talking about.

So, thanks for your "advice," but no thanks.

 

... if you think that's what I or anyone else here is saying, you clearly have a major comprehension issue. What I'm saying is that USERS matter. That means accessibility, it means non-visual users. Failing to address that means you're not even CLOSE to doing the job properly. I'm saying search matters where excessive size can get you pimp slapped clear out of the results. We have an entire INDUSTRY built up (for little reason) around SEO and on-page SEO is about that same semantic markup.

I'm talking about all the shortcomings that yes, ARE the direct result of the bad code... but the important part is WHY it's bad. The reason it's bad is that the garbage you're advocating tells search to sod off. It tells the visually impaired to sod off. It tells pretty much anyone who isn't on the perfect combination of screen size and resolution to sod off.

Those should not be considered "acceptable losses" when in many cases there are laws in place to penalize you for it!

But again, you clearly don't give a flying purple fish about end users, actual success, actual ease, actual maintenance, and sure as shine-ola don't know enough on this topic to even be flapping your yap about it. You have instead joined the lemmings in running off the cliff, the echo-chamber of like-minded head-bobbers with their fake smiles and disingenuous platitudes having duped you into a mindset that is doomed to failure. JUST like every other miserable failure of the past 25 years on this topic because *NEWS FLASH* the nube predator SCAM that is Webflow isn't doing anything we've not seen before.

As to the rest of your post, I find little to no relevance in it apart from the blind parroting of the typical marketspeak double-talk that invariably leads to bullshit bingo. To be brutally frank: