I’ve never used a design tool before and looking to start with penpot over Figma. I’m not seeing any tutorials on creating websites using your tool. I’m trying to get away from building and designing at the same time but I find your tool difficult to use.
From what I’ve seen, Boards in Penpot is like a div and I don’t understand why rectangles are used for.
Can you recreate the penpot website from scratch just like anyone would so that I can see how Penpot works? I would like if you can break it into a series to simulate your thought process.
I’m currenlty finding it easier to design and build a website than use Penpot.
I’m hoping that a turtioul will increase adoption.
Ooh this is a great idea for a hands-on session or a blog tutorial. I find Penpot is great for web design and I’ll add this to my list of future tutorial ideas.
From what I’ve seen, Boards in Penpot is like a div and I don’t understand why rectangles are used for.
Yeah, a board is a container so it can be like the body of your web page, a div or a more semantic element like a header. (In the Penpot code, it will be a div, though you can always change it later.)
Rectangles are more for drawing SVG shapes, which in web design would be more useful for creating icons and decorative elements, though rectangles are also handy for masking images into specific shapes or as image placeholders.
Many thanks for replying and adding it to your list of tutorial ideas.
I find it much easier learning when based on a use case that applies to me. It removes any bias that a tutorial will not help me even though it may well. As an example, I watched the below video about 3 times before benift of arranging things first then wrapping it in a layout.
I’ve another question but I can open another topic. Please don’t shy from telling me if I should.
How do you set a website content width?
Currently I’m trying to create a container for the content width within a section as I would it I was building a real site. The idea behind it is so that I have flexibility to have a section which content width or full width.
Thanks very much for the suggestions. I find it so much easier to understand if a tutorial is liked to a use case that is applicple to me. It’s no different in my opinion to marketing in some ways. Create content/tutorials based on a persona.
I find it much easier learning when based on a use case that applies to me. It removes any bias that a tutorial will not help me even though it may well.
I know what you mean, I find it easier to learn that way as well. Especially when it’s a very new concept to me.
How do you set a website content width?
Currently I’m trying to create a container for the content width within a section as I would it I was building a real site. The idea behind it is so that I have flexibility to have a section which content width or full width.
Is this text content or a group containing any kind of content?
If you want an element to be flexible and fill the width of its parent container, but not grow any bigger than a specific width (for example, 400px), you can do this with any element that’s inside a Grid or Flex layout. The “section” would have a Grid or Flex layout, and the “content” could be set to full width with a maximum width:
Kudos and likes for this forum, I’ll be watching it
@LauraKalbag what if you keep moving on tutorials till build project like this? You’ve shown components, libraries… then jump to use this elements on setting a big page I am anxious to see a real case of use (from scratch to code deliver)
How to set a flex layout webpage with 1440 pixels-width, combine multiple sections with different grids/columns, each one filled it with diferents components?
I strongly believe that Penpot is ready to advanced design projects, though I asume that I am struggling to use its features on grid and flex layout. For now, tutorials have shown us basic components on minimal interfaces…
Btw, I’ll be trying it out again by the end of this month and it would be awesome to have a hands on session !
I use a page builder to build website on Wordpress. Currenly my main builder is Bricks together with a CSS frameframe called ACSS
When I add a section element in Bricks by default it comes with a container to control my content width. It saves me having to add a class or use CSS variables everytime I add a section > container. The best part is that there’s no specicality as they are use either Scope or Where pseudo-class. I use BEM methodolgy so if I want to change a section to full width and I can use one of their CSS variables.
I was looking at Penpot components and I think that I may have solved the problem. I created a section and container and turned it into a component. Everytime I add my conponent named section - primary I can detach it from the main component. I’m loving it.
Hey folks in this thread, you might be interested in the next live hands-on session next week where I’ll be working on a UI design from start to finish: UI Design with Penpot | Hands-On Demo, Dec. 11
I am anxious to see a real case of use (from scratch to code deliver) 
