1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Starting to create websites in HTML/CSS from scratch - basic instructions

Discussion in 'HTML & Website Design' started by Eurogetwork, May 26, 2019.

  1. #1
    Dear all,

    I have created some pages already in WordPress e.g. https://eurogetwork.com/tworzenie-stron-internetowych-po-niemiecku/

    Now I would like to resign from WordPress and start coding the pages from Scratch, because I want to have full control of what I am designing. If you have some basic and core instructions, which will help me to start with, please share.

    Many thanks in advance.

    best regards,
    Oskar
     
    Eurogetwork, May 26, 2019 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #2
    You will find some tutorials around the place but I suspect your best way will be to get a handful of free themes and deconstruct them. Look at how they structure the files and work with the loop, what they put into functions.php and how they use additional files to compartmentalise the additional functionality.
     
    sarahk, May 26, 2019 IP
  3. Eurogetwork

    Eurogetwork Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks, I will try this
     
    Eurogetwork, May 26, 2019 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    Not the best advice (I will probably get yelled at for giving you this link), but you can start by looking at the source codes of these templates: https://www.w3schools.com/w3css/w3css_templates.asp That will give you an idea for some best practices.
     
    qwikad.com, May 26, 2019 IP
  5. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #5
    First of all, just HTML and CSS will not get you anywhere. You also need to learn some scriptting language, like PHP for example. PHP is easiest to learn as well.
    You need this because ultimately when your website grows big, it'll become impossible to modify theme/content for each new page you make with just HTML and CSS know how...

    For designing part, start with HTML5 and CSS.
    Good practices are, avoid tables, use DIV and float CSS, make sure the design is compatible with at least CHROME/Firefox/IE browsers.

    Keep javascript and CSS in separate files

    Better if markup validates, but its not 100% required.
    Browsers will ignore minor things, like if you forgot to close a <p> tag with a </p> tag
     
    JEET, May 26, 2019 IP
    Karen May Jones likes this.
  6. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #6
    One thing for sure, the only way to get full control is to do it all yourself. That said, to avoid reinventing the wheel multiple times, you do need to learn to do it right the first time. If you don't you will spend the rest of your life constantly fixing fixes that you already fixed, much like one does in Turdpress and so on.

    I suggest you take a gander at @deathshadow's website https://cutcodedown.com/ and use it as a starting place. Also be sure to use http://validator.w3.org/ to check your coding as it is better to find and fix your errors early on rather than tearing your hair out later trying to figure out why your pages do not work.
     
    mmerlinn, May 26, 2019 IP
    JEET likes this.
  7. Eurogetwork

    Eurogetwork Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Thanks a lot for your answers. I think I will just start with analyzing the PHP files of complete wordpress themes. I know some basic CSS and HTML, but want to develop within other codes, because feel really intrested in that.
     
    Eurogetwork, May 29, 2019 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    [​IMG]

    The ONLY thing you can learn from the steaming piles of dung squeezed out by turdpress developers is how NOT to write HTML or CSS. The same can be said for all these dipshit ignorant mentally-enfeebled "frameworks". From top to bottom the techniques, methodologies, approaches, and general attitude of the developers working with these systems is rooted in nothing more than blatant ignorance, apathy, incompetence, and ineptitude.

    Take your typical turdpress website. Endless pointless DIV for nothing, endless pointless classes for nothing, presentational use of classes like "text-center", "menu-item", "menu-dark", "box-shadow", etc, etc, completely defeating the entire reason HTML and CSS are separate in the first place and why many tags were deprecated in HTML 4 Strict!. It is the bleeding edge of 1997 development techniques and reeks of those coding that way being oblivious to the entire point of HTML!

    I've only ever seen ONE turdpress template that was worth a flying purple fish, and I'm convinced that the effort was a contributor in sending Dan Schulz to an early grave! ... and the result to make TP behave properly resulted in neutering the upgrade path and breaking compatibility with most "extensions/mods/plugins/pick a huffing name already"

    Let me give you a quick lesson right here, no extra sites needed. The first thing you need to learn is that you are likely thinking about how to build a website entirely incorrectly, because the majority of sleazy fly-by-night dirtbags (like the makers of wordpress and bootstrap) don't give a damn about users.

    See, the entire POINT of HTML -- the reason it exists -- is device neutral delivery of content. When Tim Berners Lee created HTML it was with the intent of saying what things are or would be for grammatical reasons in a document, so that an end device -- a "user agent" -- could convey that meaning within the limitations of the media. Didn't matter if it was the 21x22 text of Linus Torvald's VIC=20, the TTY daisy wheel terminal on a DEC mainframe at the Pentagon, 640x480 16 color VGA, or the 1120×832 monochrome graphics of the NeXT workstation he was working on at CERN.

    Not all those devices could show italic, or bold, or fonts in different weights and sizes. But there are GRAMMATICAL and STRUCTURAL reasons we are supposed to follow when using those effects. In that way, the HTML tags exist to say what things SHOULD BE -- grammatically, structurally, semantically -- and NOT WHAT YOU WANT THEM TO LOOK LIKE!!!

    That's why B, STRONG, EM, I, and CITE all exist as separate tags. <b> is for things like company names, individuals, or entities in legal documents, and NOT for when you are putting "more emphasis" on a section of text. <i> is for when things would be italic for grammatical reasons, like book titles when they aren't being <cite>d. <em> means emphasis.

    An example a friend came up with I use all the time is:

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

    See how that works, they ALL have different meanings, and it's up to the UA (user-agent, a browser is a UA but a UA isn't always a browser) to determine how or even if to convey that. This is because to this day we still have print, speech, braille, etc, etc. Media targets for whom your presentational affectations like layout and colours mean exactly two things... and Jack left town.

    Any of the HTML tags you use should follow this pattern. Take numbered headings. THEY DO NOT MEAN FONTS IN DIFFERENT WEIGHTS AND SIZES!!! That is just the default appearance in visual UA's (browsers) and if you are choosing those tags for those reasons, you're doing it ALL WRONG!

    An H1 (unless you use HTML 5's idiotic pointless SECTION tag) is THE headING (singular) that everything on every page of your site is a subsection of. Similar -- if not identical -- to what the latter half of your TITLE tag after the hyphen should be. Think if it as being how on every page or fold-pair of a newspaper or book, the title of that document is top-right. It creates the structural root of the page.

    H2 indicate the start of a major subsection of the page, with the first H2 on the page supposedly being for the start of your main content and/or most important thing in the document. This is why "source order" layout tricks became a thing in the first place, so that the primary content could be moved up the page between the H1 and any page navigational extras.

    An H3 means the start of a subsection of the H2 before it, H4 is the start of a subsection of the H3 before it... care to guess what H5 and H6 actually mean? Even lowly HR has a meaning, a change in topic or section where heading text is unwanted or unwarranted.

    ... and using all these tags properly means that HTML 5's SECTION, ARTICLE, ASIDE, MAIN, HEADER, FOOTER, and NAV are utterly pointless code-bloat nonsense.

    P is for wrapping grammatical paragraphs of flow text, not "oh this is some text" or "I want a double-break after this". TABLE is for tabular data, not "hurr durrs eye wunts sum columns". UL/OL are for short bullet points or selections, not multiple large sections of content! That's grammatical bullet points, not "hurr durrz, eye wunts uh dotsy be four it"..

    Even SMALL is for cases where it would be structurally de-emphasized, such as a tagline inside a heading -- which is why pairing two headings back to back for a single section is half-witted semantic gibbiersh. The deprecated as fast as it was introduced HGROUP tag being a stunning example of why the WhatWG didn't know enough about HTML to have created HTML 4 Strict's successor, and why for every improvement in HTML 5 there's an equal measure of crap that should never have been slopped in there.

    So bottom line if you're choosing your starting HTML based on appearance, you're doing it all wrong... and I bet you've never been told that before.

    To that end, using classes like "right" or "red" or "centered" violates the same concept. Not all devices you should be writing for are even capable of these conccepts. If you use classes to say appearance -- aka the core of how HTML/CSS frameworks "work" -- you are undoing the twenty years of progress since HTML 4 Strict was introduced to drag us out of the brainless muck the pissing contest between Microshaft and Nyetscape had left us mired in.

    Same goes for IMG. Is the image content? Yes? It goes in IMG. Is it presentation? Part of the template? Decoration? that goes in the CSS as background-image, and has no business in an IMG tag.

    Appearance, that's CSS' job... and no that doesn't belong in the markup either. 99% of the time you see style="" and 100% of the time you see <style>, it is likely the developer had NO business writing HTML or CSS, or some jackass above them unqualified to do their job had restricted the access needed to do things properly. If you're not using ALL your CSS with <link> to an external file, you're missing caching opportunities and have violated the separation of concerns: specifically separation of presentation from content.

    Likewise, if you see a <link rel="stylesheet"> with no media="" inside it, or it is set to media="all" -- that too is developer ignorance and incompetence. The media attribute exists to say what media to apply the stylesheet to, and your screen media layout (the one most people sleaze by on only) is probably gibberish to print, aural/speech, tty, braille, etc. At BEST it is ignored, resulting in wasting bandwidth. If it's for screen, huffing SAY media="screen". This is part of why style="" is epic /fail/ at development in all but a handful of corner cases (bar graphs for example)... it lacks the ability to even have media targets.

    ... and of course if you are setting media="screen" like a good little doobie, any time you see "@media (screen and" in someone's CSS, the "screen and" part is also an indicator of not knowing enough HTML to be writing CSS. That screen target should have been determined before the CSS was even loaded.

    The technique I advocate is called "progressive enhancement". It maintains the separation of concerns, focuses on accessibility, and automatically creates graceful degradation -- the page still working and usable if fancy stuff is broken/inapplicable to the user -- for you with little to no extra effort. It is also a faster technique since you build from the content up, instead of making some goofy artsy-fartsy BS layout that you have to customize content for.

    To sum up the process; and I post this quite frequently:

    1) take your content -- or a reasonable facsimile of future content -- and put it into a flat text editor and arrange it to make sense with the main content as soon as reasonable in the document as if HTML, CSS, and everything else DOES NOT EVEN EXIST.

    2) mark it up semantically. That means headings to create a navigable document structure that fans out like a tree. That means P for paragraph, UL/OL for lists, TABLE for tabular data... and it means the two or three "semantically neutral" tags like DIV and SPAN have ZERO business in the code at this point, nor do any ID's or classes.

    3) create your legacy desktop screen media layout with CSS. This is when you can add DIV and SPAN but do so sparingly, only as needed. Don't just blindly vomit them into the markup. Same for the classes and ID's. When an element has a perfectly good parent and all its siblings are receiving the same style, NONE OF THEM NEED CLASSES!. This is where classes like "menu-anchor" and "menu-item" are mentally enfeebled bullshit.

    I say start with legacy desktop first because its what we cannot target with media queries. It's the default. A LOT of mouth-breathers say "mobile first" and that's just utterly back-assward. Any mobile devices we care about can be targeted with media queries, legacy cannot... so why the blazes would you start with what can be customized instead of what can't? How do you customize for legacy desktop after mobile if you can't target that legacy?

    Your layouts should all be three very important things.

    First, elastic. This means designed in EM. The EM measurement should be used for font-sizes, widths, paddings, margins, and anything else of major import because it has ZERO fixed relationship to pixels. Instead it is based on the browserr's default font size, which in some cases is inherited from the OS, and in most all cases can be customized by the user. Doing this means that most always you'll deliver a comfortable font-size to the end user without them having to dive for the zoom, becuase if they want it bigger from the start it will auto-enlarge appropriately.

    Second: Semi-fluid. Do not declare an outer fixed width, EVER. At minimum your content column should remain fluid, expanding to fit the available space up to a limit. That limit, set by "max-width" is what makes it semi-fluid. Fluid to a point. This way long lines of text don't become hard to follow when they word-wrap.

    Third: Responsive. Responsive layout is just the last in a long line of accessibility steps after semantics, structure, elastic, and semi-fluid. All it means is re-arranging the layout to best fit the available space. Hence our next step:

    4) narrow the browser window until the layout breaks, figure out how many EM it broke at, round up 2 to 5% for wiggle-room, and apply a media query to change the layout so things fit. Lather, rinse, repeat this process until you're down to around 256px or smaller, which should be the smallest mobile device you need to worry about anymore. Again, your queries should be elastic for any flow content. The only time PX measurements should come up is if you have images going full width and are concerned about their scaling.

    5) Enhance the ALREADY FULLY WORKING PAGE with JavaScript where and only as needed. In general, keep it in your pants on this one as it's far too easy to go full Gungan with the JavaScript.

    Meesa sayz yew nevah goes teh FULL Gungan.

    Good rule of thumb for 90%+ of websites out there? If you can't make it work without scripting FIRST, you likely have zero damned business adding scripting to it. This is even MORE true with so much of what we used to 'have' to use JS for now being easily implemented with just HTML and CSS.

    That is all the information you are likely to NOT come across in most tutorials, and presents concepts you won't find looking at half-assed re-re dipshit incompetent turdpress templates slopped together by dirtbag scam artists who have not one qualification for ACTUALLY building websites.

    My article on the topic -- whilst aging -- walks you through the above steps with a really simple example page.
    https://cutcodedown.com/article/progressive_enhancement

    You start with the content or a facsimile of future content:
    https://cutcodedown.com/progressive/stage1_plaintext/plaintext.txt

    You mark it up semantically saying what things are, and creating a logical structure:
    https://cutcodedown.com/progressive/stage2_semantics/template.txt

    Then you finish off the document adding DIV and SPAN where/as needed to help create the layout.
    https://cutcodedown.com/progressive/stage3_layout/template.txt

    With the real work of layout done in the CSS. I like to do the layout as its own stage separate from images and coloration, with just enough greyscale to tell sections apart:
    https://cutcodedown.com/progressive/stage3_layout/screen.css

    Giving us this:
    https://cutcodedown.com/progressive/stage3_layout/template.html

    By which time any responsive aspects of the layout are completed. Then we paint it.
    https://cutcodedown.com/progressive/stage4_style/screen.css

    For this:
    https://cutcodedown.com/progressive/stage4_style/template.html

    This is a very simple/plain/boring example, but regardless of the design complexity the concepts and techniques hold true.

    I know that's a lot to take in, but read it through, and any questions... ask. That's what smart people do, is ask; question; reason.
     
    deathshadow, May 30, 2019 IP
    Karen May Jones likes this.
  9. Karen May Jones

    Karen May Jones Prominent Member

    Messages:
    3,469
    Likes Received:
    290
    Best Answers:
    1
    Trophy Points:
    380
    #9
    Your post reminded me of the first website I made on Godaddy. I had index page........ then I had 1.html 2.html 3.html etc ect... and every time I wanted to add a new fun page, I would have to edit a menu... and a menu... and a menu - what a messssss.. It was great for learning my way around, but it sucked as a friendly website for both google and visitors! :D

    WOW ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

     
    Last edited: May 30, 2019
    Karen May Jones, May 30, 2019 IP
    JEET likes this.
  10. Eurogetwork

    Eurogetwork Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Thanks a lot, got much material to go through
     
    Eurogetwork, May 31, 2019 IP
  11. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #11
    @Karen May Jones I also remember that problem with my starting websites. Editting menu on all static HTML pages, what a mess that was... I actually started learning PHP because I needed something stored in a database, and was thinking of outsourcing it, but I am so glad I took that step of learning PHP myself. My entire career got built up on this one step...
     
    JEET, Jun 1, 2019 IP
    sarahk and Karen May Jones like this.
  12. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #12
    I'm not smart, but I still want to ask questions.

    An interesting tutorial you wrote on here. So, are you implying that essentially speaking, I can just ignore HTML5 tags, use h tags to organize contents and move things around with div tags and that should be enough to build an acceptable page?

    Are you also suggesting that non-technical general users should learn all of that to put something out there on the web? Don't you think ease of use and user friendliness of GUI is a good thing? Don't you think it's good that more people can publish their ideas and thoughts without having to write HTML and CSS by hand? Have you considered that most people just wanting to have a blog shouldn't have to go through professional hoops to publish on the web?
     
    Gary-SC, Jun 3, 2019 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Not ALL HTML 5 tags are trash. I do take issue with AUDIO and VIDEO being redundant to OBJECT (undoing an improvement from 4 Strict) and the presence of EMBED on the same grounds, but there's nothing wrong with how either works or effects semantics. The TIME, PROGRESS, and CANVAS tags are fine, though that last one REALLY shouldn't actually have a tag in HTML since it's scripting-only functionality; that's NOSCRIPT's job. The new INPUT attributes are bloody brillaint and overdue, as are things like manifest.

    It's just that ARTICLE, ASIDE, HEADER, FOOTER, NAV, SECTION, and the whole "aria roles" nonsense are pointless redundancies and often outright code-bloat if you bother using H1..H6 and HR properly. Those tags should NEVER have been added to HTML 5, and reek of the work of those who never grasped the point of HTML, the improvements of HTML 4 Strict, and long for the days of the abortive train wreck of developer ignorance and ineptitude that was HTML 3.2. (any by extension 4 transitional). This "reek of ignorance" on the part of the WhatWG (the group that actually made HTML 5) is apparent in the now defunct HGROUP tag they tried to introduce, which clearly illustrated they didn't understand what numbered headings are, what they are for, or how to use them. In general if you see people pairing a parent/child depth headings for title and tagline, you're looking at such ignorance in action! They pretty much chose their tags for presentational reasons instead of for semantic/structural/grammatical reasons.

    I'm gonna skip around slightly...

    ... and

    Actually my attitude on it supports that, as turdpress, wix, weebly, blogger, etc are a fine and dandy tool for making a blog for grandma where none of these details are a concern because the traffic is little more than the grandkids.

    The problem is when such idiotic TRASH is used for BUSINESS. Then it becomes a maintennance nightmare, a coding disaaster, a security headache, and can tell large swaths of potential users to go plow themselves. Big tip, telling potential product buyers to sod off is NOT a great business plan.

    More so when the failings of poor to nonexistent semantics, scripting only functionality, and other such issues can land you in COURT in certain industries. Medical, banking, utilities, government agencies; if you don't meet the minimums of accessibility guidelines like the WCAG, or the requirements of laws like the US ADA or UK EQA, you can be hit with massive fines, private lawsuits, and a whole host of headaches that could have been avoided if you hired a professional instead of sleazing together some off the shelf answer.

    Similarly poor semantics makes search engines work harder since they don't have eyeballs and could give a flying f*** about your layout and visuals. Same goes for the massive code bloat so common to such garbage given that Bing, Baidu, Yandex, and Google are all penalizing pages for excessive size and load times. There's a reason professionals used to obsess over Google Pagespeed right up until they pulled that bait and switch, removing all the useful information and good advice to turn it into a dipshit marketing tool to try and sell you a VPS.

    User friendly doesn't always mean a good result. No GUI can actually make proper semantics, meaning the result tells users on braille readers, speech devices, TTY, and so forth to sod off. They are inherently presentational in their construction of HTML, screwing you on speed, usability, accessibility, AND search rankings. GUI's are in fact the FASTEST way to f*** yourself in business. This is why sites like WIX and Weebly are nothing more than predatory scams taking advantage of people who don't know any better.

    It's a cute idea, and to a lesser degree it should be possible for the CONTENT areas if the back-end is well crafted; BUT that whole idea goes bits up face down when you want to build the template AROUND that content. Hence why my "progressive enhancement" says to start with your content OR a reasonable facsimile of future content.

    That's really the problem, we have people doing sites for their businesses or trying to promote their interests, that are for all intents dropping the soap in a prison shower when it comes to the template around their content, because so many people making templates aren't qualified to write a single damned line of HTML -- much less CSS and JavaScript. Again, just look at the code of outright SCAMS like Wix, Wordpress, and Weebly for proof enough of that.

    A situation only further exacerbated by all the know-nothing PSD jockeys under the DELUSION they are web designers. Sad fact is the majority of people calling themselves "designers" don't know enough about HTML, CSS, accessibility, or limitations of the medium to be designing but two things: Jack and Shit... and Jack left town.

    Actual design is not art unto and of itself. Design is engineering that incorporates art, using things like specifications, accessibility guidelines, limitations of the medium and available materials, cost of deployment, cost of maintenance. Hence why dicking around drawing pretty pictures in photoshop or dragging around layers in a WYSIWYG flat out IS NOT DESIGN! No matter how many ignorant or willfully negligent scam artists out there claim otherwise.

    When I say structural design, automotive design, mechanical design... do you picture some hipster in skinny jeans and a top-not sitting in Starbucks sipping a goofy named latte whilst admiring his Prius and getting ready for a day of spanking his crank on a graphics tablet, or does the picture that comes to mind end up a glasses wearing dork with a pocket protector double-pounding a pair of Dunkin's large dark roast iced double-cream double-sweet browsing auto-trader looking for a new front fender for his '86 Saab 9000, getting ready for his day in front of a keyboard and actually typing on it?

    I like to compare that to the difference between Ralph McQuarrie and Chip Foose.

    McQuarrie is responsible for some of the most iconic art and "designs" in sci-fi. The man is a legend in the field, but he's JUST an artist. You'd need unobtanium and to bend the laws of physics to build almost any of the stuff he draws, which is why when movie model makers have to take his ART and turn it into a design, they have to make radical changes to said works to even come close to making a practical model of it, or even a 3d C-G one.

    Foose on the other hand can grab a sheet of paper and some alcohol markers and in three minutes belt out a picture of the coolest car you've ever seen -- then go out to the garage, actually build it, and it'll go down the road straight. His knowledge of the limitations of "this has to carry passengers safely", "this has to have a certain ride height for comfort", "a suspension and engine are this big", the composition and load-bearing capacity of available materials... It all adds up to mean he's a designer, not JUST an artist.

    ... and that's really the rub, we've got too many people out there sleazing together off the shelf templates without knowing enough HTML, CSS, or accessibility to have ANY business doing so, and then businesses buy this crap because the owners don't know any better. The end result is most Internet startups failing in their first year, and a lions share of those not even lasting six months, and those that do hang on end up little more than failing money-pits for the owners. Hence why many larger brick and mortar companies for whom websites are and afterthought actually consider their sites an expense, instead of part of their revenue stream or even promotion.

    Also why my day job freelancing the past 8 years has mostly involved going into businesses in those industries I mentioned above who have been utterly bent over the table by idiocy like frameworks, off the shelf templates, off the shelf CMS, alleged "Designers" who don't know the first thing about accessibility, and just plain bad practices. Real fun are clients like banks who will drop a years income for four weeks work fixing such issues. And why along with my disability I'm at the point I no longer NEED to take on new clients.
     
    deathshadow, Jun 3, 2019 IP
  14. Karen May Jones

    Karen May Jones Prominent Member

    Messages:
    3,469
    Likes Received:
    290
    Best Answers:
    1
    Trophy Points:
    380
    #14
    You should consider doing a 15 minute tedtalkx
     
    Karen May Jones, Jun 4, 2019 IP
  15. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #15
    Ahhh.... So you aren't really trying to diss noobs like me. You are talking about these things in some particular contexts. That's good to know.

    How would you build those services differently then? Do you argue that literally, everyone should learn HTML and CSS to some degree so they could write a basic page and reduce the need to use services like those?

    I'm going to do that, for real. What are some examples of what you would consider "clean code?" I need some reference points. (Perhaps I should look at CutCodeDown site for that?)

    THAT is an interesting point. HTML is indeed a spec, so yeah, that makes sense.

    It is one of the most helpful analogies I have encountered so far — the difference between art and structural design. Thus, the HTML *is* the main thing, not afterthoughts for visual presentation or a mean to accomplish it. So, in some way, writing HTML and CSS is closer to programming or scripting then, since you specifically tell browsers to render contents in specific ways. It's like describing how a street looks like instead of drawing it with a pen. People hearing the verbal description will interpret it and get a mental image of how the street looks. I guess HTML and CSS are like that. Am I getting it right?
     
    Gary-SC, Jun 4, 2019 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    I try to use similes, analogies, comparisons, and their ilk so that beginners might be able to understand it in terms they are familiar with. The more 'experienced' out there will cry "wah wah, that's off topic" but such text is not for them. If you already know this stuff, why are you reading an explanation?

    But with someone like you just starting out, such comparisons allows for a ... transfer of existing knowledge.


    — the difference between art and structural design. Thus, the HTML *is* the main thing, not afterthoughts for visual presentation or a mean to accomplish it. So, in some way, writing HTML and CSS is closer to programming or scripting then, since you specifically tell browsers to render contents in specific ways. It's like describing how a street looks like instead of drawing it with a pen. People hearing the verbal description will interpret it and get a mental image of how the street looks. I guess HTML and CSS are like that.

    You're getting closer and closer. The biggest point of the whole thing remains:

    1) HTML is for saying what things ARE. Grammatically, structurally, semantically. Basically using rules that I was taught at the fourth or fifth grade level of what a paragraph, header, list, table, rules, and other such dividers are. Why you make some words italic, some words bold, or some words underlined. (that last one is a sticky wicket given HTML's use of underscore for links, which is why STRONG is the correct tag and NOT the visual of an underscore!). If you chose your semantic tags inside BODY (basically anything other than DIV, SPAN, and A) because of what you want things to look like, you just failed at grade school English.

    Those semantically neutral tags of <div>, <span>, and <a>nchor exist as hooks for behavior or for style, but should not be used to say what that style IS. Likewise for ID and class which should say what things ARE and not what you want them to look like. This is why when you see class="box-shadow text-centered color-red col-3-s col-5-m" what you are seeing is developer ignorance and/or ineptitude. And again I don't mean ignorance as an insult. Just means they didn't know any better. Ineptitude on the other hand...

    2) CSS is for saying what things look like for specific media targets, customizing the appearance. If you see <style> or <link rel="stylesheet"> without a media="" or set to media="all", this too is an indicator of ignorance and/or ineptitude. The key here is that there's MORE devices to target for style than just screens. Print, Speech, braille, TTY... there aren't style rules for all those, but you shouldn't be blindly sending your screen media layout to all of them either!

    It's also why if you see "media queries" -- a means for customizing style within a media target for realtime changes based on the environment -- where they say something like:

    
    @media (screen and max-width:48em)
    
    Code (markup):
    The "screen and" part likely means those same two words I use far, far too often... because if you're in a stylesheet and the media type such as screen or print isn't already determined, they've already screwed up before they even got that far into the CSS.

    Now, all that said, go to boostrap's website, pull up ANY of their examples and "view source". Yeah, that. Again there are only two words to describe that. The simple fact that:

    
     <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    
    Code (markup):
    ... are seemingly proud of their inability to write the most basic of HTML properly? Mind-blowing.

    I don't mean to keep pointing at it, but it's the current poster child / perfect storm of everything wrong with these frameworks, shortcuts, and ALLEGEDLY "easier" approaches to development. It is also the easiest of them to explain. In general -- and yes, this is just my opinion -- LESS, SASS, SCSS, React, Vue, jQuery, Wordpress, Wix, Weebly, Wrappler, Dreamweaver, Web Expression, and damned near every other framework, tool, WYSIWYG, whatever are all fundamentally flawed in both methodology and mindset. The claims of ANY of them making things easier, or simpler, or faster, or better holding water like a steel sieve.

    The only reason anyone can sing their praises is a failure to grasp the purpose of HTML, why CSS is separate from it, what websites are, and a general apathy that will whip around and bite you in the backside as soon as you build anything more complex than -- as is often used as the example -- "a blog for grandma."

    Though in the case of "site builders" I do wonder why - as I said in another thread -- they seem so determined to intentionally screw themselves. I don't understand why the people who have the time and ambition to build things like Wordpress, Wix, Weebly, or Wrappler cannot even manage even the most basic of HTML and accessibility concepts. That lack of care and effort on their part and on the part of those doing things like making templates for them really feels like malicious willful predatory practices. If not for the phrase "never blame on malice what can be adequately explained by incompetence" I'd be even more vocal in my distaste.
     
    deathshadow, Jun 5, 2019 IP
  17. Gary-SC

    Gary-SC Member

    Messages:
    101
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    33
    #17
    @deathshadow
    THIS:
    I'll probably post more stuff over the weekend, but yeah, I remember learning that stuff as a kid. Had to look it up again to be sure. The general informational writing stuff; header, paragraph, how to organize sections and things like that, right? The same thing MS Word and other word processors follow. (Ex. Heading 1, Heading 2, etc. etc. even the styling control comes from that.) HTML looks just like that, indeed! THAT's why you rant so much about how so many websites neglect this structure stuff because so many people only use it as a visual style control method.

    Never thought of websites that way until this clicked. Now, HTML makes a lot more sense to me.
     
    Gary-SC, Jun 6, 2019 IP
    mmerlinn and kk5st like this.