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

Viewed 28

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.

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

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

HTML Templates

If you're just starting out and HTML+CSS seems overwhelming there's always the option to download

Free HTML Templates

NOTE we do not endorse any of these sites, they just contain HTML templates to get you started

FOr the last 2, start from the last pages for "oldschool" styles, going to the first pages for the most recent HTML5 variants.

Always beware to verify the files you're downloading from any site so that it doesn't contain viruses.

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.

Getting started is easy, all you need is text editor such as notepad++, or a simple IDE as Codium.

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