So i have been trying to learn javascript for a bit by watching tutorials, till finally i got tired of the "monkey see monkey do" approach on youtube and decided to give myself challenges to solve.

One of my biggest challenges with javascript was form submission of any kind.

For some reason i was coming up with errors, even if it was form submission to url or worst to another page, I had tried to use nodejs to do it earlier in the year.

But that i learnt the hard way that i didn't know what i was doing in node (particularly since i was using the "monkey see monkey do" approach on youtube.

So i paused told myself, go get a grasp on javascript first before you come back to you save point on node.

Thus was middle of march 2024.

I decide to say we dead here, let solve this problem once and for all. Let me get that good enough to do it in my sleep.

By first week of april, i had slightly solved the problem, and gotten a better understanding of using id's in html and document.getElement-- in javascript.

Then i noticed another problem, i had learnt html for a while and had just breezed through CSS just for the basic. As my goal for was javascript and then server side languages, Now that i understood form submission, my forms were still looking like a two year olds work on html.

So i decided, the heck, lets go back and under this design thing with CSS well.

During this time my wife had to go for a Myomectomy and i was with her in the hospital laptop and cracking Css to pass the time (more like to hide the tense of the surgey on my nerves).

I first started learning positioning schema's, using absolute and relative positioning.

.header {
position: relative;
top: -20px;
left: 5px;
}

.header > h1 {
position: absolute;
float: right;
right: 5px;
top: -20px;
}

I really loved how easy it allowed to position where you want and use z-index to overlap items. I felt so good till i resized the screen by mistake, then i saw my first problem.

They don't work well with small screens as you got to stroll to where things where on right.

To solve that i started exprimenting with margin, padding, border, height, width in all its ramification and examples. using things like

.header {
width: 100%;
height 40px;
padding-left: -120px
padding-top: 5px
bordor-top: 3px groove black;
box-shadow: 1px 5px 10px black;
}

Again i hit challenges with position on small screens and things not lining up.

then i finally stumbled on to
@media (max-width: 768px) {

}

And i was like finally, this could be where my solutions are. And like anyone who just learnt it, i started adding my styles to it.

Till i noticed that my screen maintained the same arrangement in smaller screens, which was had when you had a tiny usename and password form to fill.

Almost tired of looking for a solution and deciding what i knew was enough and to just go back to the javascript i de do.

I saw something about Css grids, ok this kinda looks like it might work.

.container {
display: grid;
grid-template-areas:
"header header"
"nav nav"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr 1fr;
gap: 10px;


}

This is looking promising, can i use it on small screens, yes. Cool
Can i even adjust the columns to 1 on a small screens.

@media (max-width: 768px) {

.container {
grid-template-areas:
"header"
"nav"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}

}

Sweet. Sugar crunch.

I think i will use this for now going forward.

See the things i built with it below.

Next i want to take a look at Bootstrap an tailwind frameworks then jump back to javascripts hopeful nodejs and other serve side languages before end of june.

Wish me lucks guys as my final project is building a CRM ERP.

Aiit guys rate my build

Tech Journey at 40
https://whatsapp.com/channel/0029VaF6eqo6LwHtvEZcjh0m

Since its not hosted yet, please see the code below.

A friend of mine advised that it was better to work on your scripts and styles in the html document, so you can see you errors and correct them, then once your done, move em to their respective files.

So far thats how i work on my projects.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IfeanHealth CRM</title>
<!--
<link rel="stylesheet" href="stylesheet/style.css">
-->
<style>
body {
background-color:#f4f4f4;
font-family:Arial, Helvetica, sans-serif
line-height: 1.2em;
}

.container {
display: grid;
grid-template-areas:
"header header"
"nav nav"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr 1fr;
gap: 10px;


}

.header {
grid-area: header;
background-color: #8b4513;
color: white;
border-top: 30px solid black;
box-shadow: 2px 1px 3px black;
border-radius: 5px 5px 0 0;
}

.header > img {
width: 150px;
height: auto;
float: right;
margin-top: -77px;
margin-right: 5px;
}

.nav {
grid-area: nav;
background-color: black;
box-shadow: 2px 1px 3px black;
padding-bottom: 7px;
margin-top: -5px;
height: auto;
border-radius: 0 0 5px 5px;
display: flex;
flex-wrap: wrap;
}

.nav > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.nav > nav > ul > li {
list-style: none;
padding: 2px;
}

.nav > nav > ul > li > a {
text-decoration: none;
margin: 5px;
color: white;
}


@media (max-width: 768px) {

.container {
grid-template-areas:
"header"
"nav"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}

}

.main {
grid-area: main;
padding: 10px;
margin-top: -10px;
}

.main > img {
max-width: 100%;
height: auto;
border-radius: 10px 0 10px 0;
}

.sidebar {
grid-area: sidebar;
padding-left: 10px;
border-left: 2px groove rgb(207, 205, 202);
border-style: 10px;
border: 2px groove black;
border-radius: 0 10px 0 10px;
}

.sidebar > aside > p {
margin-top: 0;
}

.sidebar > aside > form > label {
display: block;
padding: 5px 0;
}

.sidebar > aside > form > input {
padding: 5px;
margin-top: 5px;
width: 100%;
box-sizing: border-box;
}

.sidebar > aside > form > button {
background-color: #4caf50;
color: white;
padding: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 10px;
width: 100%;
}

.footer {
grid-area: footer;
background-color: hsl(163, 23%, 64%);
padding: 5px;
}

</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>IfeanHealth ERP</h1>
<img src="img/Ihlogo1.png" alt="IfeanHealth logo">
</div>

<div class="nav">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="patient-new.html">New Patient</a></li>
<li><a href="patient-details.html">Patients Details</a></li>
<li><a href="clinical-details.html">Clinical Team</a></li>
<li><a href="patient-followup.html">Followup Team</a></li>
<li><a href="patient-pricing.html">Pricing Team</a></li>
<li ><a href="management-page.html">Management Team</a></li>
</ul>
</nav>
</div>

<div class="main">
<h2>IfeanHealth CRM</h2>
<p>Welcome to the IH ERP system</p>
<img src="img/ihimage1.JPG" alt="IfeanHealth image">
<p>This system was made to help you keep track and handle patient list development and management, patient acquisition.
It will help you track clinical pricing, followup and management tasks and resources</p>
</div>

<div class="sidebar">
<aside id="sidebar">
<h1>CRM Login </h1>
<p>If you have an account please login, else create your account by clicking the new user details below the login screen</p>
<form id="main-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail">
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<button type="submit" value="Submit">Submit</button>
</form>
<div id="error-message"></div>
<p class="account-link">
Don't have an account? <a href="/signup">Create one</a>.
</p>
</aside>
</div>

<div class="footer">

<footer id="main-footer">
<p>Copyright &copy; 2024 IfeanHealth</p>
</footer>
</div>
</div>
<script src="scripts/mainscript.js"></script>
</body>
</html>

[quote author=cj1080 post=130030827]Since its not hosted yet, please see the code below.

A friend of mine advised that it was better to work on your scripts and styles in the html document, so you can see you errors and correct them, then once your done, move em to their respective files.

So far thats how i work on my projects.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IfeanHealth CRM</title>
<!--
<link rel="stylesheet" href="stylesheet/style.css">
-->
<style>
body {
background-color:#f4f4f4;
font-family:Arial, Helvetica, sans-serif
line-height: 1.2em;
}

.container {
display: grid;
grid-template-areas:
"header header"
"nav nav"
"main sidebar"
"footer footer";
I would like to see JS

Ok will add that and circle back

You should get a GitHub account.
Download any of the available code editors (eg. Vscode or Pycharm). Then make your repositories public so others can see and possibly suggest ways you can improve on it.
Although, it's been years I wrote html and CSS codes as I mostly write codes in C++ and Python these days, I can still help if you have any question about git and GitHub.

cj1080:
Since its not hosted yet, please see the code below.

A friend of mine advised that it was better to work on your scripts and styles in the html document, so you can see you errors and correct them, then once your done, move em to their respective files.

So far thats how i work on my projects.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IfeanHealth CRM</title>
<!--
<link rel="stylesheet" href="stylesheet/style.css">
-->
<style>
body {
background-color:#f4f4f4;
font-family:Arial, Helvetica, sans-serif
line-height: 1.2em;
}

.container {
display: grid;
grid-template-areas:
"header header"
"nav nav"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr 1fr;
gap: 10px;


}

.header {
grid-area: header;
background-color: #8b4513;
color: white;
border-top: 30px solid black;
box-shadow: 2px 1px 3px black;
border-radius: 5px 5px 0 0;
}

.header > img {
width: 150px;
height: auto;
float: right;
margin-top: -77px;
margin-right: 5px;
}

.nav {
grid-area: nav;
background-color: black;
box-shadow: 2px 1px 3px black;
padding-bottom: 7px;
margin-top: -5px;
height: auto;
border-radius: 0 0 5px 5px;
display: flex;
flex-wrap: wrap;
}

.nav > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.nav > nav > ul > li {
list-style: none;
padding: 2px;
}

.nav > nav > ul > li > a {
text-decoration: none;
margin: 5px;
color: white;
}


@media (max-width: 768px) {

.container {
grid-template-areas:
"header"
"nav"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}

}

.main {
grid-area: main;
padding: 10px;
margin-top: -10px;
}

.main > img {
max-width: 100%;
height: auto;
border-radius: 10px 0 10px 0;
}

.sidebar {
grid-area: sidebar;
padding-left: 10px;
border-left: 2px groove rgb(207, 205, 202);
border-style: 10px;
border: 2px groove black;
border-radius: 0 10px 0 10px;
}

.sidebar > aside > p {
margin-top: 0;
}

.sidebar > aside > form > label {
display: block;
padding: 5px 0;
}

.sidebar > aside > form > input {
padding: 5px;
margin-top: 5px;
width: 100%;
box-sizing: border-box;
}

.sidebar > aside > form > button {
background-color: #4caf50;
color: white;
padding: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 10px;
width: 100%;
}

.footer {
grid-area: footer;
background-color: hsl(163, 23%, 64%);
padding: 5px;
}

</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>IfeanHealth ERP</h1>
<img src="img/Ihlogo1.png" alt="IfeanHealth logo">
</div>

<div class="nav">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="patient-new.html">New Patient</a></li>
<li><a href="patient-details.html">Patients Details</a></li>
<li><a href="clinical-details.html">Clinical Team</a></li>
<li><a href="patient-followup.html">Followup Team</a></li>
<li><a href="patient-pricing.html">Pricing Team</a></li>
<li ><a href="management-page.html">Management Team</a></li>
</ul>
</nav>
</div>

<div class="main">
<h2>IfeanHealth CRM</h2>
<p>Welcome to the IH ERP system</p>
<img src="img/ihimage1.JPG" alt="IfeanHealth image">
<p>This system was made to help you keep track and handle patient list development and management, patient acquisition.
It will help you track clinical pricing, followup and management tasks and resources</p>
</div>

<div class="sidebar">
<aside id="sidebar">
<h1>CRM Login </h1>
<p>If you have an account please login, else create your account by clicking the new user details below the login screen</p>
<form id="main-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail">
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<button type="submit" value="Submit">Submit</button>
</form>
<div id="error-message"></div>
<p class="account-link">
Don't have an account? <a href="/signup">Create one</a>.
</p>
</aside>
</div>

<div class="footer">

<footer id="main-footer">
<p>Copyright &copy; 2024 IfeanHealth</p>
</footer>
</div>
</div>
<script src="scripts/mainscript.js"></script>
</body>
</html>

while that's a great idea, what's the point? there's clearly no huge difference, even if i actually used to do so. from experience, doing such leaves you bombarded with lots of code that may put you in a state of disarray esp. when you eventually have to debug lot of errors in your code. imagine you have to debug a 1,000 and something line of code instead of maybe a 300 in a separate file. easily navigating your code is something to talk about, too.
my piece of advice- while your friend may be right, just assigning each code to their respective files may save you the stress

ASHTAROTH:
You should get a GitHub account.
Download any of the available code editors (eg. Vscode or Pycharm). Then make your repositories public so others can see and possibly suggest ways you can improve on it.
Although, it's been years I wrote html and CSS codes as I mostly write codes in C++ and Python these days, I can still help if you have any question about git and GitHub.

Thanks for the feedback @Ashtaroth.

I actually have 2 git hub accounts, but the thing is this. getting the site on github and then getting it to a server (aws or azure) is actually the end goal of my project.

See i did a Devop course last year that covered the basics of various apps and tools used for Devops, mainly Linux, bash scripting, git, marvin, nexus, sonarqube, jenkins, terraform, docker, kubinettes, anisable and grafana.

My annoyance with the course was it covered how to use these tools and apps but not indeptly. worst it didn't really show us how to solve the challenges one faces with using these tools and apps.

So my journey entails, creating this CRM and an erp, learning as many languages involved in the process as i go, then passing it through the devops processes above. Functionally understand the challenges of managing an app development cycle through each of these processes.

Hopefully when i get to the Devops part, i would have lunched the app functionally manager it and learn more about the challenges of each of the tools and apps i will use.

Hope this process is not so weird or wrong, that is my plan

princely4ever:


while that's a great idea, what's the point? there's clearly no huge difference, even if i actually used to do so. from experience, doing such leaves you bombarded with lots of code that may put you in a state of disarray esp. when you eventually have to debug lot of errors in your code. imagine you have to debug a 1,000 and something line of code instead of maybe a 300 in a separate file. easily navigating your code is something to talk about, too.
my piece of advice- while your friend may be right, just assigning each code to their respective files may save you the stress

I see you point @pricely4ever

Fun to know you actually use to do it before.

Ofcourse the essense for me it to have to do my eithers in one document, but ofcourse there will come a time i will work with multiple document as the code grows.

For now i feel comformable doing this this way, and when that time comes, i will move the codes to their various documents.