For every website you create do you follow a method or created your own method?

What I mean by method is do you have a previous code that you copy and paste to make it easier for you to understand? Such as code for your container, sections, images, headings, etc. etc. And do you create it by mobile view first? So inspect it on Mobile S - 320px then gradually move or change elements as you change the view of the website.
Does this all make sense?

I don’t know if I have watched too many tutorials that they all have different ways of creating websites, which might confuse me a bit to follow and understand their methods or instructions.

However, this time I have looked at a website, inspect it, looked at how it’s done and try and re-create that site by my way. However, it is giving me a headache on how they have created a polygon image and kept it the same from each different screen device, from mobile to desktop. - this is the site I would like to re-create and add in more stuff myself - https://www.easygym.co.uk/set-to-sweat

this is my codepen - https://codepen.io/Rosstopherrr/pen/eYNYVPG

codepen strangely does not show it as well as I have created it in visual code.

Sorry for the long post, two links and sort of reposting this. But I am trying to break it down for any experienced web developer to understand what I mean and would like to know how they do it. Is there an old template you have that you always use when using CSS grid? Or is it just simply open a file and just go for it? No matter how many attempts you just try and work around it until you figured it out?

1 Like

Hi there, I’m no ‘expert’, but so far I’m understanding that once you understand the general basics of HTML/CSS, you start to get the idea that there are different approaches you can take to create something.
i.e.: What audience are you designing the page for (desktop, mobile, etc) or a mix of them.
Depending on that there are different approaches you can take.
Maybe you use some ‘flexbox’ or ‘grid’ systems, or maybe you look at some ‘frameworks’ (which I guess are like bundles of default setups?), or do you plan on using a ‘CMS’ system to help you create it for you.
All of these you maybe consider in the beginning.
I’m only getting through HTML/CSS/JavaScript so far, but this is what I’m gleaming of the whole picture so far, LOL!
Oh, I can’t leave out weather you are just designing front end, back end, or both.
Hope this helps a bit.

1 Like

Hey, I will second @ReallyWant2Learn in that I’m also “no ‘expert’”, but I find your questions interesting. It’s similar to what went through my head.

Not exactly, but I love the emmet editor extension. It makes writing HTML quite fast. (e.g. [!] + [tab] and you have a basic HTML document set up) I also find the idea of code snippets intriguing, but so far I haven’t got around learning and using them.
As ReallyWant2Learn said it depends on the scope of the project and there is already a lot of reusable quality code out there. Large frameworks like Bootstrap, or small frameworks like Skeleton. Large animation libraries like GSAP / Anime.js, or small animation libraries like Rellax. And so on …

Personally, I like to start in prototyping software (Adobe XD, Sketch) and in the beginning I jump between desktop and mobile since my brain doesn’t produce ideas strictly mobile-first. But I aim to flesh out mobile as much as possible first because I feel adding to a simple mobile design to make it a more interesting desktop experience is easier, then the other way around.

yes

True. There are many ways to do this and they are constantly evolving. Pick what suits you.

You could change the values of the class .polygon-reverse with a media-query …

Mostly, but human life is messy and there is frustration, exhaustion, deadlines, and stuff …