Im trying to make a journal like website where it has a flip book in it but i cant get the flip book right. My idea is that only the front cover opens and in the back of it there is a menu where u can select between new entry, entries list where u see your entries and edit them, u have ur profile where u can change ur name and stuff or delete your account. What you select on your menu gets displayed on the right side. Does anyone know of a tutorial that can help me make something like this. Would love the help. Thanks in advance

I just finished building a Markdown Editor and wanted to share it.

https://10samarth.com/tools/md-editor/

Features:

1. Live Preview
2. Rich Syntax Options: Quickly apply formatting with shortcuts like:
   1. Code: `code`
   2. Bold: bold
   3. Italic: italic
   4. Strikethrough
   5. Headers: # Header
   6. Blockquotes: > Blockquote
   7. Lists: - Unordered or 1. Ordered
   8. Links: text
   9. Images

I’d love for you to try it and let me know what you think. Feedback or suggestions would mean a lot to me!

I just started building an app for Aurora forecasting but i deeply struggle with the absolute mess that's there with adding a giant number of api calls for each parameters in aurora forecasting. Do you guys have any tip? i just started coding and am absolutely not a webdev. I appreciate the help and please be kind to me.

Hello ive been practicing html css bootstrap flex box and grid for the past 2 months (im waiting to start JavaScript until i got this 99% down. How is my first website can anyone give me some positive criticism in what I could do better (or just shit on me). I'm still struggling a bit with grid and flex box and what's been really hard is making it optimal for mobile devices. Thankyou!!

https://forms.gle/2QG7wVB2jv4xHz2k8

Ever wondered how Google’s Single Sign-On (SSO) works? I recently explored how Google’s system lets you access all of its services with just one login. Our latest blog breaks down the process and explains how it provides seamless and secure logins across platforms.

Check out the full article here: https://journal.hexmos.com/google-sso-how-single-sign-on-works-secure-login-explained/ to learn more about the benefits of SSO for both users and businesses!

When I started building SaaS projects, I thought the hardest part would be the coding. Turns out, it wasn’t—it was managing my time and staying focused. Here’s what I’ve learned:

1️⃣ Repetition Is a Time Killer: Setting up auth, payments, and a database isn’t “fun coding”—it’s repetitive. I realized I needed a way to automate or speed this up to avoid burnout.

2️⃣ Done Is Better Than Perfect: I’ve spent too many hours tweaking small details no one cared about. Launching early and iterating based on feedback is always the better move.

3️⃣ Start With Real Problems: The biggest waste of time? Building features I thought users wanted. Listening to real feedback saved me months of work.

4️⃣ Balance Is Key: I used to grind 10-hour days trying to “finish,” only to burn out. Pacing myself and working smarter (not longer) changed everything.

These lessons shaped how I approach building apps today. If you’re curious about the system I use to avoid these pitfalls, check my profile. What’s been the biggest challenge for you in building projects? 🚀

/*#EBA300  #44C8EA   #0001EB   #75EBB0  #0118EB*/
/* General Body Content */
.body_content {
  color: #eba300;
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 16px;
  margin-left: 15px;
  margin-right: 15px;
  border: 2px solid #0001EB; 
  padding: 20px;
}

.float-element {
  float: left;
}

div.pictures {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  padding: 0 4px;
}

.pictures {
  display: flex;
  flex: 50%;
  padding: 0 4px;
}

.col {
  margin-top: 8px;
  vertical-align: middle;
  width: auto; /* Default to 100% width (one column on small screens) */
}

.col img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;  /* Images will fill the container's width */
}

h1.heading_1_color{
  background-color: #ff6f61;
  height: auto;
}

header.title {
  background-color: #008b8b;
  height: auto;
  border-bottom: 2px solid #0001EB;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* General styles for the image grid */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.col {
  background-color: #0001EB; 
  width: 32%;
  margin: left; 
  overflow: hidden; 
}

ul li {
  color: #0001eb;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.header-title {
  font-family: "Inconsolata", serif;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 28px;
}

ol li {
  color: #75ebb0;
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

dl dt {
  color: #eb0c00;
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

dl dd {
  color: #00ffff;
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0; 
  list-style-type: none; 
} 

nav li {
  display: inline-block;
  margin-right: 10px;
}

q {
  color: #00ffff;
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

figcaption {
  color: #00ffff;
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

a:link {
  color: #ff6f61;
}

a:hover {
  color: #8ddcdc;
  text-decoration: none;
}

a:active {
  color: #add8e6;
}

p::first-letter {
  color: #ff6f61;
  font-size: x-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

a:visited {
  color: #75ebb0;
}

a:focus {
  color: #eb0c00;
}

footer {
  color: #d3d3d3;
  font-family: "Noto Serif", serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

main {
  padding: 15px;
}

body {
  background-color: #00417a;
  font-size: 16px;
  font-family: "Inconsolata", monospace;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

footer {
  background-color: #0118eb;
  height: 20px;
  width: 380px;
}

footer a:link {
  color: #ff6f61;
}

footer a:visited {
  color: #75ebb0;
}

footer a:hover {
  color: #8ddcdc;
  text-decoration: underline;
}

div {
  text-align: center;
}

main a:link {
  color: #ff6f61;
}

main a:visited {
  color: #75ebb0;
}

main a:hover {
  color: #8ddcdc;
  text-decoration: none;
}

main a:focus {
  color: #eb0c00;
}

main a:active {
  color: #add8e6;
}

nav a:link {
  background-color: #ff6f61; 
  color: #ffffff; 
  font-family: "Noto Serif", serif; 
  font-size: 16px; 
  padding-top: 15px; 
  padding-bottom: 15px;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none; 
  border-radius: 5px; 
}

nav a:hover {
  background-color: #8ddcdc; 
  color: #0118eb;
  text-decoration: none;
}






<!DOCTYPE html>
<!--The doctype starts the code and gives you stuff to start with-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="description"
      content="A website dedicated to the hobbies of Michael Gilbert, made with HTML code."
    />
    <meta
      name="keywords"
      content="auto, bio, biography, story, background, history"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hobby photos</title>
    <link rel="stylesheet" href="CSS/styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="stylesheet" href="CSS/index.html" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Anton&display=swap"
      rel="stylesheet"
    />
  </head>
  <!--meta tags are typically used to specify character set, page description, keywords, author of the document, and viewport settings.-->
  <!--Only one H1 should be used in the code-->
  <!--UL starts the list while the Li puts it in a neat list-->
  <body>
    <!-- Opening <body> tag moved here -->
    <header class="title">
      <h1 class="heading_1_color">Michael Gilbert's Hobbies</h1>
      <h2>By Michael Gilbert</h2>
      <nav>
        <ul class="a">
          <li><a href="index.html">Home</a></li>
          <li><a href="favorites.html">Favorites</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="resume.html">Resume</a></li>
          <li><a href="mailto:mgilbert1@mymail.tstc.edu">Email</a></li>
        </ul>
      </nav>
    </header>
    <!--Mail to will open the email so the user can send an email.-->
    <main>
      <p>
        Come into this colorful world of creativity as Michael shares his love
        for photography among other hobbies. This is a photo gallery website
        that flaunts everything from panoramic views down to the closeness of
        portraits. 
      </p>
      <p>
        It showcases life's beauty through his eyes. Aside from
        photography, his hobbies include painting, hiking, and traveling—all of
        which find a place in his artwork. You will also find sections
        showcasing these interests and the experiences that form the backbone of
        his work. Join us on this visual journey, sharing your insights and
        connecting with Michael as he continues to grow as an artist. Thanks for
        stopping by at Michael's Hobby Haven, where every click tells a story!
      </p>
      <div class="pictures">
        <div class="col">
          <figure>
            <img src="Images/Edited/1000010342.jpg" alt="Photo 1" />
            <figcaption>Picture of wheat stalks.</figcaption>
          </figure>
        </div>
        <div class="col">
          <figure>
            <img src="Images/Edited/1000010347.jpg" alt="Photo 2" />
            <figcaption>
              Another picture of wheat but with more lighting.
            </figcaption>
          </figure>
        </div>
        <div class="col">
          <figure>
            <img src="Images/Edited/1000010359.jpg" alt="Photo 3" />
            <figcaption>A photo that looks like a drink.</figcaption>
          </figure>
        </div>
        <div class="col">
          <figure>
            <img src="Images/Edited/1000010366.jpg" alt="Photo 4" />
            <figcaption>A picture of the sun before sunset.</figcaption>
          </figure>
        </div>
        <div class="col">
          <figure>
            <img src="Images/Edited/1000010371.jpg" alt="Photo 5" />
            <figcaption>The sunset from eye level behind the wheat.</figcaption>
          </figure>
        </div>
        <div class="col">
          <figure>
            <img src="Images/Edited/1000010416.jpg" alt="Photo 6" />
            <figcaption>Up close of wheat grains.</figcaption>
          </figure>
        </div>
      </div>
    </main>
    <!--Dont Put ../ in the code when the images are in the same place-->
    <!--width and height arent needed for the images-->
    <!--Src starts the code for inserting an image-->
    <footer>
      <p>&copy; 2024-2025 Michael Gilbert. All Rights Reserved.</p>
    </footer>
    <!--The copy symbol can be done-->
  </body>
  <!-- Closing <body> tag here -->
</html>

Hey! So I’ll be creating my very first website for a customer and I was hoping to get a couple of tips on what tools I should be using or just tools in general. The website is a simple website where the customer will post a small number of illustrated essays. The key is for it to be maintainable for the customer so he could post future essays on the website independently (the customer is older but is comfortable with technology). I was told the hosting would be outsourced to a commercial vendor (likely something like Hugo or Jekyll).

Hey devs👋 ,

A few months ago, I started building a SaaS app using Next.js, and I was so excited to bring my idea to life. But pretty quickly, I found myself stuck in what I call setup hell—the endless grind of setting up authentication, databases, payments, and UI, over and over again.

At first, I thought, “This is just part of the process.” But the more I worked, the more frustrated I got. I’d spend hours wiring up auth flows (passwordless, OAuth, social logins), only to move on to configuring a database. Then there was integrating Stripe for payments, handling subscriptions, and on top of that, making sure the UI didn’t look like it was slapped together in a rush.

By the time I was done with all that, I hadn’t even started working on the actual features that made my app unique. And here’s the kicker—I realized I was repeating this same setup grind with every new project.

That’s when I decided to change things. I sat down and asked myself: What if I could take all the painful, repetitive parts and solve them once and for all?

I built ZapStart to scratch my own itch. Not because the world needed another boilerplate, but because I needed something that actually worked out of the box. For me, the difference was making sure it wasn’t just “a starting point,” but something that felt like a foundation I could launch from on day one.

If you’ve been through this same grind, I’m curious—What part of the SaaS setup process frustrates you the most? For me, it was definitely the combination of auth and payments. It felt like no matter how many tools or kits I tried, I was always missing something. 🚀

Hello ive been learning html and css for a little over a month. Im working on flexbox and grid right now. I recently made my first website that I actually took a lot of time to make probobly 6 hours of work put in. Am i properly using semantic html? Hows my indentation look. I'm trying to make my code look as clean as possible. Is there anything you would change? I put in roughly an hour a day and a hour of tutorials. Am I learning very slowly or would you say I'm just right? Thankyou! Heres my repository https://github.com/ryanx1723/Portfolio

What factors influence your choice of framework for personal projects? And what type of projects do you typically build with your preferred framework?

View Poll

Hii,

I'm a budding developer and would love a bit of explanation on how jisho.org has that faint japanese text underlaid behind the disclosure text on the bottom of the page. See these reference images: https://imgur.com/a/how-do-i-replicate-this-background-text-effect-on-webpage-i-build-Y7MgnYc

Is it as simple as having a big text/header element with a low z-index and given an absolute position with like bottom: 3px? I wasn't immediately sure on first inspection because the kanji text that i'm referring to is not highlight-able and i wasn't able to pull up a specific element for it in the Inspector.

Any help/insight would be much appreciated!

I have been working as a WordPress developer for 2+ years and I have fair knowledge of WordPress ecosystem, plugin development, integrations etc. I have completed many successful projects in the same field. The problem is that as a WordPress developer, I don't really get chances to work in mid or big sized companies. I have a pretty good grasp at JavaScript and React and have completed a few projects also to strengthen my skills but I don't seem to get any calls when I apply for a frontend/ react job. Do I have to polish by CV or something? What am I doing wrong?

Hey Iam a newbie in web dev although I have completed my btech and iam in ms now I only know frontend react html css some js I have completed all from YouTube but as I dive deeper into backend like node and express mongo I am struggling a lot how to connect both and how I can utilize mongo for my portfolio project or how I can add proper authentication,any suggestions how to be on the correct path,am I on wrong path?