HTML & CSS Search-Engine Sketch-Up

[Dan-Kode]

So today, I was quite bored. So I figured that why not make a Sketch of a Search-Engine in HTML.

Now you're probably thinking: "But you can't make a Search-Engine, it's too hard."

Yes, I know it's hard to make a Search-Engine but don't worry, it doesn't involve any of that PHP or SQL Code that every Search-Engine has. This Search-Engine is just something that I cobbled together just for fun.

So here it is:

Now, yes. I know it looks really bad and it looks like something that you would find in the 90's, I get it. But again, it was just something that I put-together just for fun. I don't really care about the Font or Rounded-Corners.

So looking at the Photo, you can of course see the Name of the Search-Engine, the Search-Box and Search-Button and a Menubar that contains Links for an Image-Search, Video-Search and a List of Popular-Websites(Compass-Popularity).

Tell me what you think. I will continue to work on it just for fun as I don't plan on making it into an actual Website(And just so you know, that Link in the Search-Box does not take you anywhere so don't bother Searching it).

 

[sn0w]

Looks neat!
Could use a little bit of styling though.

You should take a look at bulma, which is a really simple and straight-forward CSS framework.

 

[Dan-Kode]

Hey, @sn0w.

Thanks for the Response. I do appreciate it. As for the CSS, I do know about it. I will be adding a few touches to the CSS as time goes on and I will post Updates to show others what it will look like after some Changes have been made to it.

And thanks for the Link to Bulma. It does look interesting so I might use it but I don't think I will just now anyway.

 

[Dan-Kode]

I made a couple of Changes to the Site just now. Although before I did those Changes, I did have to re-write the HTML-Code as EMACS had gotten rid of every single Line(Except for about 2-Lines). I did re-write it but this time in VSCode(Which I'm liking so far).

So one of the Changes I did was that I added a Logo to it:

I know it looks like it's from the 90's but hey, I will continue to work on this Logo as time progresses(It kind of looks like the old Google Logo. The old Google-Logo was what inspired me to make the Logo look like this).

Next, is that I added both a Light-Theme and a Dark-Theme:


So as you can see in the Photos above, there are two Buttons that let you choose between a Light-Theme and Dark-Theme. Now, the Dark-Theme only changes a couple Colours and get's rid of the Shadow for the Logo(Which I've tried to fix but the fix that I did never looked right).

So of course, all I did was add a Logo and make it so that once a Button was pressed, a few Colours would be tweaked. I will continue to work on it so do expect a lot Additions and Changes in the next few days.

 

[Malcolm]

That's awesome! I"m glad you're practicing, I should take a page from your book.. I started practicing as well but keep getting sidetrack.

How long did it take you to code it all?

 

[Dan-Kode]

I wouldn't consider it as 'Practising'. I would say that it was more of just a Project that I'm doing for fun.

It only took me about 30+ Minutes or something to code it(I'm usually much faster but I think I was a bit tired which was why it took longer). But since I had wrote it in Emacs, upon opening up the .html File again in Emacs, everything had been erased except for a couple Lines. Which was strange because I did save it. So after Emacs had deleted essentially all of the HTML and not the CSS, I picked up Visual Studio Code which I'm really liking so far.

 

[Malcolm]

I wouldn't consider it as 'Practising'. I would say that it was more of just a Project that I'm doing for fun.

It only took me about 30+ Minutes or something to code it(I'm usually much faster but I think I was a bit tired which was why it took longer). But since I had wrote it in Emacs, upon opening up the .html File again in Emacs, everything had been erased except for a couple Lines. Which was strange because I did save it. So after Emacs had deleted essentially all of the HTML and not the CSS, I picked up Visual Studio Code which I'm really liking so far.

Oh okay! I've been working on a one-page website template these last couple weeks. Definitely had me stumped at some points just because I haven't done it in quite some time. It's really encouraging though, when you have a blank then later you have a screen full of code then when you check the browser it's a masterpiece (Even though elements are on top of each other etc).

A developer has many enemies including tiredness, food, water etc the list goes on. I've never heard of Emacs, what's that? Have you heard of PHPStorm, @TopSilver introduced me to it.

 

[Dan-Kode]

Oh no. ELEMENTS ON TOP OF EACH OTHER! AAAAAAAAAAAAAGGGHHHH

As for Emacs, it's a Text-Editor that includes things like Syntax-Colouring. It's pretty decent but unless you want to work in confusing Keyboard-Shortcuts then I suggest you use something that's more easier like VSCode or Notepad++.

Here's a Wikipedia Article about it: https://en.wikipedia.org/wiki/Emacs

I have also heard of PHPStorm. Judging by it's Icon, it's by the same people that made IntelliJ which is what I use for Java Programming.

 

[Malcolm]

Oh no. ELEMENTS ON TOP OF EACH OTHER! AAAAAAAAAAAAAGGGHHHH

Hahaha using the nice lovely 'Position' property in CSS.

As for Emacs, it's a Text-Editor that includes things like Syntax-Colouring. It's pretty decent but unless you want to work in confusing Keyboard-Shortcuts then I suggest you use something that's more easier like VSCode or Notepad++.

Oh interesting, when I get some time I'll add it to the Helpful tools & resources thread! I'm a pretty complicated person

I have also heard of PHPStorm. Judging by it's Icon, it's by the same people that made IntelliJ which is what I use for Java Programming.

Yes, it is! It's by JetBrains!

 

[Dan-Kode]

Oh God, don't get me started on Positioning Elements in CSS. I don't think I need to tell you how many times I need to Search on Google just to find out how to position an Element.

Now, seeing as your a 'Pretty-Complicated-Person' or [PCP], I think you'd like Emacs. One thing that did turn me off was it's Shortcuts. I would press CTRL+S just to save and then if I can remember, it did either nothing or it brought up a Window. I can't remember.

And I knew I was right about PHPStorm being made by JetBrains. It's the Icons that make it pretty apparent.

 

[Malcolm]

Oh God, don't get me started on Positioning Elements in CSS. I don't think I need to tell you how many times I need to Search on Google just to find out how to position an Element.

Hahaha it's a big pain! #WeNeedAPositionTutorial! Searching things up on Google is okay, just make sure you're learning something from it

Now, seeing as your a 'Pretty-Complicated-Person' or [PCP], I think you'd like Emacs. One thing that did turn me off was it's Shortcuts. I would press CTRL+S just to save and then if I can remember, it did either nothing or it brought up a Window. I can't remember.

But then that's too complicated for my goldfish brain

And I knew I was right about PHPStorm being made by JetBrains. It's the Icons that make it pretty apparent.

I was thinking of getting their C Lion app as well, have you heard anything about it?

 

[Antero360]

If you want to see how it would work as fully functional search engine, I can show you how

 

[Dan-Kode]

That would be quite cool. Although, this was simply just a little Fun-Design that I've did. Nothing too serious. It's up to you if you want.

 

[Deleted member 65]

This is just a sketch up.

 

[Dan-Kode]

How is this considered: "Unwelcoming Behaviour"?

It's just a Sketch-Up that I did for fun. It's not like a said anything that's considered "Unwelcoming".

 

[Ghost]

How is this considered: "Unwelcoming Behaviour"?

It's just a Sketch-Up that I did for fun. It's not like a said anything that's considered "Unwelcoming".

Hey @Code_Block , this warning message is in regards to the user's comment that it is attached to. I can see how that may be confusing, but it's just letting the community know that the user did receive a warning on their reply of "This is just a sketch up". It's a moderation tool that lets everyone know the user was warned & educated on why their reply was deemed unwelcoming. It's not a quote or part of their reply.

 

[Dan-Kode]

Ah, thank you for clearing that up for me, @Ghost.

I was immediately confused at first but this just clears everything up.

Thanks again.

 

[Ghost]

No problem! I actually hadn't seen public warnings before either as I was just given Moderator permissions, so I completely understand your confusion. At first I thought I could only see it as Moderator, but your reply made me realize it was public. I have yet to issue a publicized warning like that, but I'll probably talk to Malcolm about making it abundantly obvious that it's not part of the user's actual post.
If there's ever anything you're wondering about just shoot me a message & I'll try my best to clear it up

 

[Ash]

Looks neat!
Could use a little bit of styling though.

You should take a look at bulma, which is a really simple and straight-forward CSS framework.

+1 on Bulma. It's a great framework that will take away all the boring basics that you have to worry about at the start especially if you don't care about the CSS that much but still want it to look somewhat nice.

 

[Ghost]

+1 on Bulma. It's a great framework that will take away all the boring basics that you have to worry about at the start especially if you don't care about the CSS that much but still want it to look somewhat nice.

Absolutely agree
I prefer to program the models, logic and controllers, as well as the database. It's very nice to have a CSS framework to take off a lot of the design load. Plus you can import what you need and remove everything else before a site goes live so there's not even that much bloat.