# Professional website with p5

**URL:** <https://discourse.processing.org/t/professional-website-with-p5/15433>\
**Category:** Project Guidance\
**Created:** [November 12, 2019, 8:47pm UTC](https://discourse.processing.org/t/professional-website-with-p5/15433 "2019-11-12T20:47:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 12, 2019, 8:47pm UTC](https://discourse.processing.org/t/professional-website-with-p5/15433/1 "2019-11-12T20:47:15Z")

</div>

Hi,

a typical website contains multiple pages besides the index.html.  
(i.e. home, bio, shop, dates, contact etc.), Do you develop pro websites in p5 or is it a mere code learning platform?

Thx  
BX

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 12, 2019, 11:01pm UTC](https://discourse.processing.org/t/professional-website-with-p5/15433/2 "2019-11-12T23:01:41Z")

</div>

[http://www.kennyrosedesign.com/](http://www.kennyrosedesign.com/)

heres a website built with p5.js

heres another  
[http://www.krabcode.eu/](http://www.krabcode.eu/)

as with all websites i dont think you’ll be able to not use html. Then you got to consider your database, or server, which you can handle with p5, then you got to consider the security which I don’t think you can handle with p5, might be wrong though.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 13, 2019, 11:02am UTC](https://discourse.processing.org/t/professional-website-with-p5/15433/3 "2019-11-13T11:02:08Z")

</div>

Great help and insight, [paulgoux](https://discourse.processing.org/u/paulgoux)

[Dan](https://www.youtube.com/watch?v=URSH0QpxKo8&t=615s) does great and I found this where he talks about the interaction of html and p5. He suggests to accent one or the other inside a particular detail of the project. So knowing html besides p5 seems crucial in creating web sites, at least I would see so far regarding your aspects yet.

I also found another thing called progressive web application ([PWA](https://www.youtube.com/watch?v=4XT23X0Fjfk&list=PL4cUxeGkcC9gTxqJBcDmoi5Q2pzDusSL7&index=1)). Where to put this in the overall picture? Is it a kind of extended html programming or such?

My main question is if I am correct to see the key is to implement and connect the different areas (p5, html, PWA) correctly in a typical web site project? One aspect then is the referencing techniques and putting everything in a appropriate order (inside the index.html??)

Did you learn all languages(?) for your work? Looks like a bigger thing to do, of course.

THX  
BX

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 13, 2019, 11:27am UTC](https://discourse.processing.org/t/professional-website-with-p5/15433/4 "2019-11-13T11:27:19Z")

</div>

> [@byxx](#):
>
> putting everything in a appropriate order (inside the index.html??)

just idea about HTML .v.s. sketch.js

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/h53BeOPNU)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 13, 2019, 1:05pm UTC](https://discourse.processing.org/t/professional-website-with-p5/15433/5 "2019-11-13T13:05:29Z")

</div>

Kll, Great!!  
I would regard this as one of a multi page site. Is cool to stay in p5.

the `createElement` Function is the key to write html like headers, I slowly understand that, The `create` thing in general seems to be the html secret here, (as far as I can see) Alright!

Now:  
How to add several sites (say: home, bio, shop, contact etc.) in one p5 project, (If possible, of course). And/Or how to organize a file structure containing the media material (mp3, mp4, pics) of each particular page of the whole web site?  
THX!!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 13, 2019, 1:16pm UTC](https://discourse.processing.org/t/professional-website-with-p5/15433/6 "2019-11-13T13:16:15Z")

</div>

wait, you should work on both sides,  
and this what i show is only one option,

it is a HTML page with a ( small ) processing canvas  
means example the menu and links are all handled on the HTML side…  
not need processing create element in all cases.  
BUT for both must learn HTML, style / CSS…

* * *

but if you check on what we talk here with the “gamers”  
is also possible, only to use the minimal HTML index.html  
and a fullscreen canvas with a button menu ( of mouse click on rectangles ) and a state system  
( like for multi screen games )

* * *

also that here is only a test, actually the real HTML start would be  
to get one of the HTML 5 templates and integrate there the p5.js canvas…

i remember that i used a free  
[https://html5up.net/phantom](https://html5up.net/phantom) ,  
for my webserver CMS project python  
but just to make it ?programmable? took me 3 days.  
\_\_

for the media file system you have the data or assets dir.

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 13, 2019, 1:25pm UTC](https://discourse.processing.org/t/professional-website-with-p5/15433/7 "2019-11-13T13:25:18Z")

</div>

Thanks,

what about the PWA (progressive web application) approach? Is it a different story, necessary or useful for creating “regular” web sites or more or less a online app development scheme?

I understand that html5 and p5 should be combined so far in web development, or maybe a better expression makes sense to use both, okay. It would be great to know a bit on the application of the tools. Is it possible if you start out in PWA to implement/edit it in html or p5 later?

THX  
BX