#Creation of a site to display music artists' quotes- Design/HTML/CSS vanilla

81 messages · Page 1 of 1 (latest)

simple pelican
#

Oh, and I should mention that I use VSC Web because unfortunately my computer burned down and I got an old computer that has a lot of trouble running google chrome ... so visual studio code I can't imagine.
So using a framework would be rather complicated with vsc web I think (I already don't have access to live preview extensions)

#

And I'll give one last clarification, but obviously if this project interests anyone I'll be very touched, and very enthusiastic about the idea of learning with someone! ❤️

verbal hemlock
#

You might like https://www.gitpod.io/ it's like vsc web but even more powerful

and in terms of the project, whether you use a framework like react etc is up to you, in some ways it might make things easier but it is also another thing to learn. If you're interested in learning a framework I'd say go for it.

im not exactly sure what you mean by artists' phrases but if its just like a bunch of quotes or something I'd guess the main conceptual decision would be how are you going to keep track of all of them

There are a lot of ways to do this, one Astro specific way that is pretty simple is to use https://docs.astro.build/en/guides/content-collections/ content collection which are a way to keep track of a store content in markdown or mdx files

markdown is like a special syntax for easily writing html so you can do stuff like


# Bob Dylan's Famous Quotes

1. ...
2. ...

and the # will become an <h1> and the 1. 2. will become an actual <ol> with <li>

in terms of the actual design there's not much to it but to do it, although a lot of people will write to create a mockup in programs like figma which make it easy to drag stuff around and see what looks good before they get started

figma is also available on the web but it might push your computer a little hard, worth a shot though if you think it'd be easier

Often times I will literally draw with pen and paper what I think the site should look like to get the design juices flowing

simple pelican
#

To answer your question, these are phrases found in artists' songs, which can be taken as philosophical phrases in themselves
Thanks for your advice, I'll use gitpod to see what happens, and figma to create the design.
However as you said the framework is new things to learn and I'm pretty bad at the moment so I do not think I have the level to throw myself on it I will continue in vanilla

#

This kind of phrases for example :
" People are strange, when you're a stranger " - The Doors

#

I've been listening to rock and blues for 10 years, and I had this idea a week ago xD

#

gitpod is 🔥 thanks @verbal hemlock

verbal hemlock
#

It's an awesome idea!

i'll check out your write ups if you do get around to posting!

You'll have to do some write ups on thrasher by neil young haha

simple pelican
#

Ohhh don't worry, I'll post them all xD I love neil young, I'll send them to you if I finish my site before I die ! By the way, it would be smart to set up an e-mail system to let people know when there are X number of new items

#

I forgot how we call that system but yeah

verbal hemlock
#

Yeah basically like a news letter type of thing to let people opt in to staying informed of updates that would be cool

simple pelican
#

Exactly

#

Its a bit hard to use figma tbh

#

And it's hard to see the final rendering of a site with the preview I've got here

#

I can't figure out if this size will be readable for text on website

#

30mns to send a shitty screenshot damn

verbal hemlock
#

hmm it's not ideal but you could just deploy it directly to vercel or netlify and then you can atleast see it faster than 30 min

#

I thought gitpod would have a way to see the previews I'm not an expert though maybe @stiff valley knows she's a gitpod power user

simple pelican
#

Ah but no, don't worry, I'm just talking about my screenshot software which is buggy xD
This is a figma design screen I haven't started developing yet

#

But yeah gitpod is so much fluid than vsc web

#

+++++ I can use extensions + workspace github

simple pelican
#

Not sure about the header but hell its hard to find a design ima do a old school website to match with old school artist (easier4begineer)

#

Oh! I need to add the newsletter

verbal hemlock
#

Looks nice!

simple pelican
#

Now in code it will be hard lmao

simple pelican
#

Creation of a site to display music artists' quotes- Design/HTML/CSS vanilla

simple pelican
#

i lost all my progress because i didn't push the new stuff i'm disgusted i was in the squares !!!

simple pelican
#

HTML : https://sourceb.in/G3oLfYz9BX
CSS : https://sourceb.in/tDn6g9FHyo
JS : https://sourceb.in/MS757JSTQD

Design : https://www.figma.com/design/N5dLXGqIOzpEie7UngvHRl/Quotes?node-id=0-1&t=Q0VY3XyV1rzOSuoq-1
Code into result : https://i.imgur.com/OgWdkOi.png (for the moment square are not fully build because its very for me to move them properly)

SourceBin
HTML

Instantly share your code with the world.

SourceBin
CSS

Instantly share your code with the world.

SourceBin
JS

Instantly share your code with the world.

Figma
Quotes

Created with Figma

Imgur
simple pelican
#

I've done a terrible job with the design, I should never have done it the way I did, I'm going to have to redo a very large part of the site because the design is: Ugly, impractical, not very understandable and it'll be a pain to update

#

For the moment I'll leave it like that but I'm disgusted and think that in the future I'll contact a real graphic designer to help me design something professional.

simple pelican
#

I contacted a graphic designer who offered me $200 for a complete version of the site without assets (I need to find some free ones)

#

I'll take this option later, but I'd like to make the release of a first version official just to be sure

simple pelican
#

1d of bug fixing for 3 mistakes damn

simple pelican
simple pelican
#

I'm going to use this channel as a brainstorm to create the design for my website

#

**Pages : **

  • Home
  • Contact (Questions/Answers/Contact form)
    • Submit a quote

**Features **

  • Upvote/Updown
  • Artist listing
  • Ranking (Top 10 quotes, Top 10 artists, Latest quotes, chatbox)
  • Searchbar
  • Statistics
  • Newsletter
#

**Admin Panel Problem : **To add, delete and modify things I'll have to go through the code because I don't know how to create an admin panel at the moment, but later I want to create a panel that would simplify management and therefore increase the content for users

#

Newsletter : Have a policy that is not boring and above all add the possibility (in the email you send to unsubscribe) Maximum 1 email every 5 days

To explain to people that new quotes have been published and that if they want they can go see, or help us by sharing the quotes from musical artists that they have found

#

**Goal ** I want to make a site accessible for the blind in particular
Easy to use, modern, which makes you want to be on it,

#

Artist Page :
Main Title
Short description to explain this page

Artist Image
Artist Name

Define how many elements are placed per line, add a pagination system

When you click on an artist you come across a page which contains all his quotes

Artist Quote page :
Main title like "All quotes from X-Name"
Short description About who is the artist

#

For the chatbox (inspiration from the xenforo forum):
Temporary nickname

#

Brief introduction to explain the mission of the site

  • Maybe we can place the newsletter here
    Highlight quotes - Quote of the day for example

In the main sections after the "Homepage" we can put featured artists, featured quotes and latest quotes

Then we can put the artists

After that we would create a “chatbox” part to discuss on the site

And then the contact part

simple pelican
verbal hemlock
#

🔥

simple pelican
# verbal hemlock 🔥

Not really :/ I'm going to go for something random, I can't do it, I've been up all night trying things, it doesn't really look right.
I'll do something quick, I really have to get this project out and then I'll improve it, im too bad for design

#

And if need be, I could set up a donation system with a quid pro quo, so that the money donated could be used to pay for a real web designer and the donor would receive a reward for his donation

#

But I could never learn this field, it just makes me want to delete everything I've done and stop it's so boring

#

Another solution might be to use wordpress

simple pelican
#

Hello, just to keep you informed, I've decided to stop making designs, I'm just going to make the site without design and I'll pay someone when I buy a computer to code properly without a browser in particular.

simple pelican
verbal hemlock
#

That looks nice!

simple pelican
#

Not really because its really for me to use Astro as i am a begineer

#

really hard *

#

And no themes will be 100% useful for me

#

Because the project is original

#

Someone recently advised me to use VueJS for my project, so I don't know if I'll be looking into this framework

verbal hemlock
#

Yeah people love vue it’s really popular

tiny peak
#

Everyone is going to tell you to use their favorite framework

Just pick the one you think looks interesting and want to learn, they all amount to the same thing anyway

simple pelican
tiny peak
#

No framework helps with design

Some might have different/easier ways to implement a design but non of them are going to create/help create a design

simple pelican
#

Sadly 😦

simple pelican
#

I had a problem simplifying the addition of quotations, but I've managed to solve it 😄

#

I've added a footer to give a more finished look to the bottom of the site and then I'll just have to add some quotes and that's it

#

While doing this project, I had another idea (this one will be simpler, but I'll still have trouble with the design).
It's a site for referencing learning youtube channels
For example, we'd have a "Categories" tab and in it things like Sciences -> Physics, Chemistry, Biology (to target more precisely the channels referenced).
And other categories like History, Technology etc,...

#

My ideas are intended for the public free of charge. I won't get rich from this, but it might be cool to have this kind of site so you know where to go to learn things

#

And then, if I can really keep the project going thanks to the community, I can surely set up a system of donations with a counterpart, whose purpose is to pay for the site's machine, for example, or to pay for graphic designers

simple pelican
simple pelican
#

It was a bit too hard for me ig

simple pelican
#

A far cry from LinkTree's design, but we're working on it xD

#

I made some css animations to make up for my shortcomings