Creating my own site for photography

Hi guys,

I’m currently on CSS grid challenges (to give an idea of how new I am) and I’m currently needing a website for my photography. Since I’m learning web development, I don’t want to just get a plug & play and what better way to learn than to have your own site.

Luckily, the site I want looks extremely basic*: Like this. How would I get this very simplistic look? I’m not knowledgable enough to know exactly what I’m looking for using devtools.

Is it worth me attempting it or just get a word press for now?

  • /Looks/ extremely basic. But I’ve noticed it uses javascript in the content according to the devtools and to my untrained eye, it’s probably too advanced.

From what I can see there’s some type of ‘grid-sizer’ on the photos, an uneducated guess it looks like what I’ve been learning with Grid/Flexbox.

I’ve not even touched on javascript yet but at what point may it be used with a site such as the one above?

Thanks

This Website

Is made up of Detect which CMS a site is using - What CMS?

If you want to make like this means you need to use the “Format” Tool.

Hope this help,
Thanks,
Codely

1 Like

Thank you! So they got there design here (template in question)

I’m assuming “https://bucket0.format-assets.com/theme_versions/5648065/assets/javascripts/html5shiv.js” is how you found this out?

Anyway great to know, how easy/hard is this to recreate?

1 Like

I can’t understand. What you are trying yo say

Sorry, I meant did you just provide a website builder to help me build a similar website, or provide that specific site because that’s what she uses? :slight_smile:

I provided the tools that website has used.

Yes, how did you find this out so I can know in future?

Thanks.

I use one website named What Cms
if you go into that website and put the link of the website it will say the CMS what is used on that website. Sometimes, it may say that it doesn’t know that is one of the cons

1 Like

This is very helpful. A part of me is upset it’s not custom made!

What i can’t understand :face_with_monocle:

Because everything seems to be prebuilt.

1 Like

I see. :sweat_smile: :sweat_smile:

1 Like

I had bookmarked that website for months because one day I was going to find out how to build it. Now you just said it’s ready-made-site.

Of course I can still build it but as a newcomer to webdev it’s also disheartening to see everything ready-made. (Makes me feel “why I am here!”)
:smiley:

1 Like

Hahaha :rofl: :rofl:

But you can build using HTML, CSS, and JS. :+1: :+1:

1 Like

Indeed! I may give it a shot after my front end cert. :smiley: Thank you for your help.

1 Like

Well someone had to make the template, so it’s not like no one had to develop the code.

The image grid is using JS you can look at something like masonry which is a pretty commonly used library.

Making a masonry image layout in pure CSS can be a little tricky, especially if you do not control the image sources (like with a CMS for example). If you have full control over the images it is a bit easier.

Google: masonry image layout

2 Likes

Very helpful. That is out of my depths at the moment. A good goal to reach and will read up on it.

It might not be as difficult as you think. I’m sure with a little guidance and some persistence you can make something with just pure HTML/CSS. Again there are some limitations of pure CSS masonry layouts.

You can check out this css-tricks article it shows some different options.

2 Likes

Thank you, this will be my goal once I’ve got the responsive design cert!

That link explains a lot. :slight_smile: