Abohisham-Web banner

Abohisham-Web

Created by: Abohisham
20 devlogs
23h 36m 47s

In this website there is everything that you will need for school notes, programming projects and hardware projects
I want to have good looking ui and i will try to make it work so i later can maybe buy a domain, obtain a server, make a database and develop it into a better webpage that other people can register into and add do whatever they want with it.

Note: I will in the future update this to make it suit for everyone, instead of letting it be “Abohisham-web”.
But as a start, it is a more personal website with notes and projects.

Demo Repository

README

Loading README...
Abohisham
Abohisham shipped Abohisham-Web
about 2 months ago

Shipped this project!

Hours: 0.41
Cookies: 🍪 3
Multiplier: 7.4 cookies/hr

I have focused in this project on simplisity and ui, so it is peaceful to use everyday. I wanted to make this project to have everything that i need in my everyday life all in one place, instead of using e.g Onenote, google calendar, notepad and to-dolist app.

Im aiming in the future to make this accessiple for more people, and will also try to develop a mobile app, so the website can be accessible anywhere.
The website saves the data locally, and i believe it would be a lot better if i could make a database to save the data, so they do not disappear. But since this is only the beginning, im focusing on making it functional, and then develop even more the backend in the future.

Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
0h 24m logged

I added more info to README.

I tried to integrate some data that is saved from before into the hardware projects folder, but it was tricky so i just left it be without data, since it was a bit tricky and uneccesary.

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
0h 23m logged

I added loading gifs to the pages that did not have content, and that is to prevent the “404 error”.

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 18m logged

I had some issues here i tried to fix, mainly the coding projects tab, because the content was always empty, so i had to add some content to make it more alive in a way.

I think i will ship now, stay tuned guys i will make future updates to this projects, and hopefully at that time i will try to get a server and make a database.

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 19m logged

I finally made the styling for the coding projects, and i reused the code for the hardware projects. I was thinking to add a upload feature to upload pictures for the hardware storage, but i thought i will leave it out till next shipment and add even more and better features.

I did some changes in bg and other small changes

Attachment
Attachment
Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 42m logged

I worked really hard for this to do the javascript since im a beginner at this, it took much more time than expected, hopefully it was worth it. Now the storing code is somewhat functional, where it is possible to write code and it will get saved locally.
I will do some more work later on css and maybe some additional functionality to the JS

Attachment
Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
0h 48m logged

I have done a lot of experimenting with background colors and changed the theme for a more dark mode.
I tried for the fun of it to make the buttons have the so called “liquid glass” look but it didnt look so good because of the background should be more colorful in order to have the optimum look. So i disregarded that idea

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 23m logged

Working on making the adding code functional so it gets saved locally when you add it, honestly id prefer if i had a server to save them, but my only option to make this work is to make them be saved locally.

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 6m logged

Lets goo
I got the websites page to work with ease, i didnt expect to finish it very fast. I did not want to make a dedicated javascript code for adding a website. Therefore i took the javascript code that i made for the to-dolist and changed the names of the id’s. Now the websites have their own place where they are stored locally :D

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
2h 35m logged

FINALLY!!
Just finished the to-do list. The javascript was pain in the ass, it was soo confusing that i had to watch a yt tutorial on how to make the delete and store it locally in the computer, so it is not removed after a refresh.

Though i also struggled a bit with the css, because the listing did not want to center, i tried everything, and at the end found out that i should use the #id from the js that i made in the other tab.

Attachment
2

Comments

MeBadDev
MeBadDev about 2 months ago

Cool! Why does it says 2024 instead of 2025 though XD

Abohisham
Abohisham about 2 months ago

Bruh, thank youuu, im still living in 2024

Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 11m logged

Yea, i think this is better, i changed the background by making a pattern using the css for the background, i also fixed the buttons or tabs which are in the middle of the scree, they could not allign well when they were independent. but i made a box for them and now they fit better in the screen content.

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 17m logged

During this session i worked on adding a better background, the one from before looked too bad, it was kind of challenging becuse i tried doing it in the body, but everything seemed to glitch, i think because i did not define the background to be totally behind, therefore i found from tutorial that it is possible to use body::before, which helped. I also added blur for better layout.

I have tried to improve the scaling when making the screen smaller, it worked to some extent, but i still have to do working

Attachment
Attachment
Attachment
1

Comments

Abohisham
Abohisham about 2 months ago

Any suggestions on what to improve?

Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
0h 31m logged

I did some improvement by changing the background color, and did some little tweaks in the ui.

Any suggestions how the background should be, i feel that it is too dark??

Attachment
Attachment
2

Comments

blitzy
blitzy about 2 months ago

white background and darker gray cards would probably look good

Abohisham
Abohisham about 2 months ago

Ok i will try it blitzy

Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 29m logged

This was a tiring session, I worked really much on how to get the tabs to be next to the todolist, and continue downwards, but i really struggled this time. I did though some achievement, i added the to-dolist and also did improve the ui a bit.

I will not give up, i will try again to see if i can manage to make the buttons become next to the to-do list.

Attachment
Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
0h 51m logged

There is now a search box in my webpage, it was difficult to position it correctly, however i managed to do it. I also added some groups to the home-page. I have done some improvement in the code by removing uneccessary lines.

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 19m logged

Improved the layout of the page, made the navigationbar more responsive and deleted some of the uneccesary code that i had.

I also tried to make a time-logging feature, but it needs a lot of calculation and javascript, which is too advanced rn

I also did work on the projects for coding tab, where i improved the “project overview”, which is the list on the left. I feel that i really have improved my knowledge in UI, f.x i have worked in css on margin, gaps the corners, the shdowing, etc. So i have a better understanding about it now.

Attachment
Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 0m logged

I worked this time on getting animation on the main index.html page and on hovering effect, there is a shadow showing up.

For the “projects for coding” button, i added a side-navigation bar, which gives an overview over the projects and it took some trial and retries to get the text-boxes to work with the plus button.

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
0h 49m logged

I got the basics for the open and collapse to work for the coding projects tab. It now opens when the plus icon is clicked and collapses when it is clicked again.

The form is only a type of shape or idea on how to add the content, their will be some more work on it. I did some research, and if i want to store data, there should be a server to do it, and i dont have one, so sadly i cannot make it store the data i want.
This is the layout so far:

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 15m logged

This session really drained me. It was a struggle to connect the VS-code to github, because I haven’t done it before, however, i managed to get it to work and connect through a long time of searching and pasting code in terminal.

I have also worked on fixing the code and making it more managable by making a dedicated css file for the navigation-bar. I tried to make a html file for the whole navigation-bar so i do not have to copy and paste the same code in different tabs, but i learned that i need some kind of server to run the html file. Therefore i decided to keep the code in each document.

I still got more to work on for my navigation-bar

Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 38m logged

Today I added content to the tabs and improved their responsiveness on click. I also spent quite a bit of time fixing the navigation bar, which was stressful, because it took soo much time, where the issue was because of a wrong class name. It took longer than expected but i finally got it working :-)

Further, I have been working on the aestetics, by adding some images to the buttons and making the images the same size. It really improved the look of the home-page, though i still have got more work to do here to make the buttons perfectly alligned in different screensize, and maybe add some more visuals to the homepage.

This took good amount of time, and i feel like i know how to make a good user interface now, i will of course upgrade the ui so it becomes better

Attachment
Attachment
Attachment
0
Abohisham
Abohisham worked on Abohisham-Web
about 2 months ago
1h 9m logged

I have began working with the basic in this project. I have made the “logo”, and added buttons with good looking ui, where there is hovering effect so the button becomes darker when hovering. They still do not have content though(which they will have later).

It has been a bit of time since i last coded html, therefore i have experimented a bit with css code. I have to work on the top-bar or what they now call it, because i have issue with the position of the top-bar, where it does not fill the corners of screen.

My code so far:

</body>
Attachment
0