50
kiki
6y

Just before you, my fellow system programmer, scroll past this, let me say this:

🍬 The web is actiually simple. 🍬

Both HTML and CSS is declarative. It's all easy when you understand the concepts, learn how to be idiomatic and quit trying to do that imperative bullshit in languages that aren't imperative.

HTML is simple. You know the boilerplate: doctype, head, body, that's all. Just mark it up and do NOT look at it before you end, mark it up as it were article or something. The appearance is up to css.

CSS is simple. You may even forget bem or rscss, you're already a skilled software developer. Use common sense and your code-splitting and naming skills you gained reading The Code Complete or doing software development for years.

Forget mockups. Forget absolute positioning, forget setting width and height in pixels. Go to awwwards, find some inspiration. Draw some buttons and fields on paper with your good old pencil. Then go and write some css. Feel free to steal some shadows and transitions from codepen.

Read about 8-pixel grid system. Let every element push away from others by setting something like margin: 16px; and whoops! You've just got fully responsive and got great vertical rhythm without even using media queries!

Oh my god, do NEVER set width and height explicitly! Type something like button { width: 120px; } and bang! The entire web page is broken. Quit that shit. Let it resize as it should. It will resize itself to fit its contents.

HTML is by default ready for your template engine. That's how you receive data from server — as server-side rendered, plain old HTML page. On the other hand, the form element is the most axiomatic and simple way to send the data to server. That's how you send it — as plain old GET or POST that every webserver can handle.

All of there are true:
1. It's easy to get great 100% responsiveness without media queries.
2. It's easy to align items in row, it's just one line of css. Maybe two, if you still want elements to wrap, but want to use flexbox:
.parent {
display: flex;
flex-wrap: wrap;
}
3. HTML and CSS are fast by default.
4. You don't need mockups to achieve great visual experience. Mockups is imperative, web is declarative.
5. You may not even need JavaScript to make great website.

Go on, ask me a question about web! I'll ready to answer everything.

Comments
  • 23
    Said no-one ever.
  • 9
    Yes marking up web design is very simple. What isn't simple is having the eye for it.
  • 3
  • 8
    I'm a "system programmer" and I know what you said is true. Which is exactly why I don't do web design. It's far too boring.

    That and JavaScript (which you still need) is garbage.
  • 3
    Hmmmm... No.

    Web is easy if you limit yourself to generic design. It is a actually easy to learn but hard to master.

    Show me some page of yours, i show you things that are wrong with it. I can say that because you throw a lot of terms around that simply do not match up.

    I mean serously awwwards is the worst place for design references. And mokeups help to design around content. Not to content for the design.
  • 9
    Most of the problems, we created ourselves.
    Most of the solutions are already in the browser.
    Most of the users go to other websites.

    http://motherfuckingwebsite.com/
    http://bettermotherfuckingwebsite.com/...
    https://bestmotherfucking.website/
  • 4
    Designer: I want the diagonal background of the titel below the star button which opens the vimeo lightbox to change according to the users mouse position and another image on mobile.

    me: *does some magic* ...done!

    Customer: I liked it better before!
  • 3
    @Hammster I'm not telling everyone to be generic here. I'm just trying to say that webpages are rendered different in different browsers, on different screens of different devices, and that's possible because it's declarative. And so you can't expect mockups to work here because they are imperative. That's it
  • 4
    @Hammster of course, the good designers got their inspiration from somebody like Alvar Aalto, but not on Awwwards or codepen. That's just the basics. If you understand this, my rant is probably too basic for your level and you know it
  • 3
    @cephei exactly!
  • 2
    @JamesBS BS indeed! 😂
  • 2
    @Lahsen2016 did the glasses not give away a differance :p
  • 0
    and just you think you know it.. child container has margin outside parent and you realize there are no rules in css, similar to no spoon.
  • 2
  • 0
    How to learn JavaScript easily?
Add Comment