How to find out the grid and layout on an example website

[jsteave]

I am new to web dev and design. I enjoy copying websites that I like as inspiration and a learning tool. What is the best way to see the layout examples for websites so that I can replicate them in Figma?

 

[Randy B. Singer]

Have a look at this free Web page design program:

BlueGriffon (free. There are three versions, two of which aren't free, but the free version is full-featured and sincerely free. It isn’t a demo or crippled version.)

http://bluegriffon.org/

“What-you-see-is-what-you-get” Web site creation program (there is also a built-in text editor if you choose to work with the raw HTML, and it helps you by allowing you to add HTML commands with one click). Easy to use (if you know how to use a word processor you will take to this program quickly), and full featured. It's great for beginners and experienced Web designers alike. If you liked Apple’s departed iWeb, you will like this program. Many folks are skeptical upon approaching this program because it seems too-good-to-be-true. It’s true!
Free video tutorial series:
(The tutorial does not use the Mac version of the program, but the program is virtually identical across platforms.)

BlueGriffon Tutorial: How to Design a Website with BlueGriffon
BlueGriffon Tutorial: How to Design a Website with BlueGriffon (thesitewizard.com)
A tip for using BlueGriffon:
When you first open it, the interface will look terrible. Don't get discouraged. Do this:
BlueGriffon menu --> Preferences --> General tab --> Theme -> enable "Light"
The interface will now look world's better!

You can download any existing Web site and use it in BlueGriffon using:

SiteSucker ($5)
https://ricks-apps.com/osx/sitesucker/

 

[Raz0rEdge]

@Randy B. Singer , that isn't exactly what the OP was asking..

@jsteave - If you trying to replicate website, just inspect the code and look at the HTML structure to see how they are doing it.

The rigid idea of grids are no longer actively used. Bootstrap, for a while, was the go-to standard and put everything in grids when people tended to write their code largely in XHTML and CSS. These days, people tend to write code from the various frameworks out, React, Angular and so on and they've all adopted the component style of coding.

So you write up your components, put it together at the Index level and then use SCCS to structure the overall page.

Additionally, with the grid system you end up getting a pretty rigid design, and with components you can add/remove pieces, so grids don't make a lot of sense.

Lastly, if you are looking to put things into Figma, the idea is not to worry about the specifics of how a website is going to be built, but rather how you want to display the information and deal with the interactions. Putting grids into Figma is unnecessary.