Own Your Online Identity: A Beginner's Guide to Web Development with ZenDenPen

andrei 1
Viewed 10

ZenDenPen empowers you to take control of your online presence. By hosting your own website, you can share your thoughts, ideas, and creative projects with the world.

This process is a great way to learn programming in HTML, CSS and JavaScript.

Getting started is easy, all you need is text editor such as notepad++, or a simple IDE as Codium if you wish to edit on your PC. If you're using ZenDenPen then you can edit in browser.

Create a file called index.html, open it and paste

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My title</title>
  <h1>My first webpage - heading</h1>
  <p>My first paragraph</p>
</head>
<body>
  
</body>
</html>

THen open the file in your browser and voila, your first page

Please add awesome resources and tips ond tricks on the best path to learning and building your website.

zendenpen
1 Answers

The best resources on learning HTML, CSS and later JavaScript are from Mozilla (the creators of the Firefox Browser)

  1. You'll get to learn the basics of HTML/CSS from zero https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
  2. Afterwards to go deeper into HTML https://developer.mozilla.org/en-US/docs/Learn/HTML
  3. Styling your pages with CSS: https://developer.mozilla.org/en-US/docs/Learn/CSS

You can also find good resources at https://www.w3schools.com/html/

Layout cookbook: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook

Articles on improving your CSS https://css-tricks.com
Arranging content on your page with flexbox, if you learn this you can do a plethora of things:

There's also CSS GRID, but to be honest if you learn Flexbox it's more then enough, unless you plan to do some fancy things or become a front end developer

CSS/HTML Frameworks

There are a plethora of CSS frameworks which provide out of the box functioalities all you need to do is save the CSS and link to your HTML and there you go.

A huge list of other CSS frameworks: https://github.com/troxler/awesome-css-frameworks

THe problem with frameworks is that while they help you to get started, your site will probably look like many others and you might fight against the framework sometimes. Remember: Nothing stops you form using a cssframework AND writing great CSS!

Some friendly advice

At the beginning you might get overwhelmed with te information on the net, don't go installing NPM/NODE etc. Keep it simple. Just build things, learn, build some more. Iterate at each step.

Static Site GEnerator

After you've gained some basic knowledge on how to build with HTML/CSS I'd advise you to look into a static site generator which will greatly simplify your life because you can just focus writing content in markdown and then focus on building the layouts in HTML, the static site generator will build the site for you.

You'll also get to explore it's internals and get acquinted with the basics of a simple programming/template language.

Hugo is a great and fast static site generator.

Even if your site is static, you can add functionality provided by other services or host something like Pocketbase to add interactivity to your website and save data in a database.

andrei1
Related
Own Your Online Identity: A Beginner's Guide to Web Development with ZenDenPen
1 answers