|
SprewellSleeve



Registered: 03/15/09
Posts: 6,315
Loc: USA
Last seen: 2 days, 4 hours
|
Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? 1
#27640574 - 02/01/22 08:55 AM (1 year, 11 months ago) |
|
|
I PM'd Ythan this question, but he hasn't gotten back to me yet or hasn't seen it. It's good to post here anyway since other people might be able to help and it could help others wanting to know the same thing.
I'm learning HTML/CSS, and so far (and I have feeling it won't) my course hasn't actually explained the math stuff such as how to figure out the height you want, just how to code height.
Is there any tips/resources/websites, etc. that could help me on this? I don't remember math beyond basic addition, subtraction, multiplication, division and I was never great at it (I do want to be one day), so I want this simplified as much as possible. I don't want to keep typing in numbers until maybe I get the measurements I want with the padding, margins, etc.
Any help would be appreciated.
--------------------
Edited by SprewellSleeve (02/01/22 10:25 AM)
|
ninja cat 09
A paranoid android



Registered: 10/11/09
Posts: 4,170
Loc: Mexico
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: SprewellSleeve] 2
#27640633 - 02/01/22 09:48 AM (1 year, 11 months ago) |
|
|
If you right click an item in your browser and click "inspect element' you'll frequently be able to see the size in pixels. Generally though, you'll want to use percentages most of the time. This is because you can never really know the size of a users screen. Pixels are also relative to screen size, but I haven't brushed up on that, you might wanna google "how do pixels work in CSS" or something like that.
Percentages work as a percentage of the parent, so if you don't have anything in your page, you write a div and give it 33% width, you'll get a div which takes up 1/3 of the screen. However, if you put another div in that with 33%, it'll be 1/9th the size of the original (1/3 of 1/3 is 1/9, because you multiply the numbers at the bottom).
It's also worth looking into grids, all new browsers support them and they replace the functionality of many older popular frameworks like bootstrap: https://css-tricks.com/snippets/css/complete-guide-grid/
css-tricks has a lot of good resourses, so does https://www.w3schools.com/. Brush up on your fractions, percentages, multiplications, divisions, etc. if you're rusty, you won't need much more than that, but sometimes you'll need to do some weird calculation (you shouldn't, the less complicated a solution is the better, but sometimes it's inevitable).
It's a pretty big topic and nobody knows everything in and out, google is your friend, and learning how to google is super important. Good luck!
--------------------
|
SprewellSleeve



Registered: 03/15/09
Posts: 6,315
Loc: USA
Last seen: 2 days, 4 hours
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: ninja cat 09] 1
#27640716 - 02/01/22 10:48 AM (1 year, 11 months ago) |
|
|
Quote:
ninja cat 09 said: If you right click an item in your browser and click "inspect element' you'll frequently be able to see the size in pixels. Generally though, you'll want to use percentages most of the time. This is because you can never really know the size of a users screen. Pixels are also relative to screen size, but I haven't brushed up on that, you might wanna google "how do pixels work in CSS" or something like that.
Percentages work as a percentage of the parent, so if you don't have anything in your page, you write a div and give it 33% width, you'll get a div which takes up 1/3 of the screen. However, if you put another div in that with 33%, it'll be 1/9th the size of the original (1/3 of 1/3 is 1/9, because you multiply the numbers at the bottom).
It's also worth looking into grids, all new browsers support them and they replace the functionality of many older popular frameworks like bootstrap: https://css-tricks.com/snippets/css/complete-guide-grid/
css-tricks has a lot of good resourses, so does https://www.w3schools.com/. Brush up on your fractions, percentages, multiplications, divisions, etc. if you're rusty, you won't need much more than that, but sometimes you'll need to do some weird calculation (you shouldn't, the less complicated a solution is the better, but sometimes it's inevitable).
It's a pretty big topic and nobody knows everything in and out, google is your friend, and learning how to google is super important. Good luck!
Thanks for the reply, ninja cat.
You see, your response really has me lost still. I have resources saved such as w3schools which was one of the recommended ones in my course.
The instructor (Daniel Walter Scott from Bring Your Own Laptop) said something about px and % does the same thing I think.
I'm on the flexbox section now, so I'm working on that before I get to grid. I'm not JUST following along though, I do Google some things as well if my course hasn't taught it yet in relation to the topics he covered.
I want to avoid practicing math at all costs right now because I don't want to add that to my plate while trying to learn everything else. If I could use a calculator or something great.
--------------------
|
Ythan
ᕕ( ᐛ )ᕗ


Registered: 08/08/97
Posts: 18,774
Loc: NY/MA/VT Borderlands
Last seen: 30 minutes, 21 seconds
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: SprewellSleeve] 2
#27641642 - 02/01/22 10:22 PM (1 year, 11 months ago) |
|
|
Hey man sorry for not responding sooner, apparently I search my username more often than I check my PMs. 
I agree with ninja cat, you really shouldn't need much math for web design. It can get a little complicated if you're using non-intuitive base units like em instead of px or %, but you don't have to use those units, especially as a beginner. If you aren't already familiar with your browser's built-in developer tools, definitely read some introductory documentation because they save a tremendous amount of time and effort. Can you explain the problem you're working on or what you're confused about specifically? It's hard to give more detailed advice without knowing where you're getting stuck and how much you already know.
|
SprewellSleeve



Registered: 03/15/09
Posts: 6,315
Loc: USA
Last seen: 2 days, 4 hours
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: Ythan] 1
#27642911 - 02/02/22 06:45 PM (1 year, 11 months ago) |
|
|
Quote:
Ythan said: Hey man sorry for not responding sooner, apparently I search my username more often than I check my PMs. 
I agree with ninja cat, you really shouldn't need much math for web design. It can get a little complicated if you're using non-intuitive base units like em instead of px or %, but you don't have to use those units, especially as a beginner. If you aren't already familiar with your browser's built-in developer tools, definitely read some introductory documentation because they save a tremendous amount of time and effort. Can you explain the problem you're working on or what you're confused about specifically? It's hard to give more detailed advice without knowing where you're getting stuck and how much you already know.
It's all good. I figured typing in your name might summon you and it worked .
I haven't gotten really much into a particular problem yet, but that's largely because I've been following along with my instructor, but I'll give you some examples.
The width I've been using for the wrapper/container has been 1024px because of my instructor, but what if I, for whatever reason, want another size, how would I know? Maybe 1024 covers the bases for most computer screens, but yeah. This isn't a big problem for me though. This sounds like math really won't come much into the equation if it at all.
Here's the part I'm lost at. What if eventually I have an idea for a div/footer/header/etc. I pictured in my mind, the things that are going in it, color, font, everything, but how would I know what measurements to put in? This is my design, so how am I going to know the ballpark of the padding and margins? Of course I can just mess around with numbers, but I want to actually KNOW what and why I'm going to put a figure in. A lot of this stuff I might not even know where to begin. Also when I start reverse engineering websites down the road, I want to be able to just look at a part of the site and have an idea what measurements were used.
If this doesn't make sense, I'll try to explain it further.
Thanks for the reply, Ythan!
Edit: I'm a beginner btw.
--------------------
Edited by SprewellSleeve (02/02/22 09:08 PM)
|
ninja cat 09
A paranoid android



Registered: 10/11/09
Posts: 4,170
Loc: Mexico
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: SprewellSleeve] 1
#27645326 - 02/04/22 11:22 AM (1 year, 11 months ago) |
|
|
Usually you don't know, which is why you'd want to use percentages and grids. You don't know if people are on a giant tv-sized screen or a cellphone. You want to keep both scenarios in mind usually. You can make use of css media queries for this, which says 'if the screen is larger than 1024 do this, otherwise do that'.
--------------------
|
SprewellSleeve



Registered: 03/15/09
Posts: 6,315
Loc: USA
Last seen: 2 days, 4 hours
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: ninja cat 09] 1
#27645914 - 02/04/22 06:10 PM (1 year, 11 months ago) |
|
|
Quote:
ninja cat 09 said: Usually you don't know, which is why you'd want to use percentages and grids. You don't know if people are on a giant tv-sized screen or a cellphone. You want to keep both scenarios in mind usually. You can make use of css media queries for this, which says 'if the screen is larger than 1024 do this, otherwise do that'.
Thanks. I'll keep that in mind and look more into it. This part of what I want to learn seems easier than thinking of margins and stuff (a size of a certain div/box).
--------------------
Edited by SprewellSleeve (02/04/22 06:10 PM)
|
Flaneur
Stranger
Registered: 07/14/21
Posts: 7
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? *DELETED* [Re: SprewellSleeve] 1
#27652620 - 02/09/22 05:21 PM (1 year, 11 months ago) |
|
|
Post deleted by Flaneur
Reason for deletion: Deleting posts.
|
ninja cat 09
A paranoid android



Registered: 10/11/09
Posts: 4,170
Loc: Mexico
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: Flaneur] 1
#27653755 - 02/10/22 12:53 PM (1 year, 11 months ago) |
|
|
Quote:
Flaneur said: You could also take a look at CLOG:
https://github.com/rabbibotton/clog
That seems like something completely unnecessary for a beginner. Especially if doing it to eventually work on it, I have seen 0 job postings asking for CLOG, ever. And for it to be simple for OP they'd need to know LISP, which I wouldn't expect to be the case.
--------------------
|
SprewellSleeve



Registered: 03/15/09
Posts: 6,315
Loc: USA
Last seen: 2 days, 4 hours
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: ninja cat 09] 1
#27654436 - 02/10/22 09:12 PM (1 year, 11 months ago) |
|
|
Quote:
ninja cat 09 said:
Quote:
Flaneur said: You could also take a look at CLOG:
https://github.com/rabbibotton/clog
That seems like something completely unnecessary for a beginner. Especially if doing it to eventually work on it, I have seen 0 job postings asking for CLOG, ever. And for it to be simple for OP they'd need to know LISP, which I wouldn't expect to be the case.
I didn't understand anything Flaneur was talking about, so yeah . Appreciate it though.
--------------------
|
BSUUF2
derails threads



Registered: 10/15/20
Posts: 666
Loc: not that important
Last seen: 1 year, 10 months
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: Flaneur] 1
#27663450 - 02/18/22 02:01 AM (1 year, 11 months ago) |
|
|
Quote:
SprewellSleeve said:
Quote:
ninja cat 09 said:
Quote:
Flaneur said: You could also take a look at CLOG:
https://github.com/rabbibotton/clog
That seems like something completely unnecessary for a beginner. Especially if doing it to eventually work on it, I have seen 0 job postings asking for CLOG, ever. And for it to be simple for OP they'd need to know LISP, which I wouldn't expect to be the case.
I didn't understand anything Flaneur was talking about, so yeah . Appreciate it though.
I'd look at higher order functions once you start coding something, you might get interested or hooked... JavaScript can do that.
Quote:
Flaneur said: You could also take a look at CLOG:
Quote:
The Common Lisp Omnificent GUI, CLOG for short, uses web technology to produce graphical user interfaces for applications locally or remotely. CLOG can take the place, or work alongside, most cross-platform GUI frameworks and website frameworks. The CLOG package starts up the connectivity to the browser or other websocket client (often a browser embedded in a native template application.)
https://github.com/rabbibotton/clog
Isn't straight into CL from basic HTML/CSS questions a bit of a steep learning curve?... I'm well aware, it's the only right way in the long run, but I'm messing with a different dialect now, not web development related.
-------------------- LAGM2022
Edited by BSUUF2 (02/18/22 02:15 AM)
|
BSUUF2
derails threads



Registered: 10/15/20
Posts: 666
Loc: not that important
Last seen: 1 year, 10 months
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: SprewellSleeve] 1
#27663887 - 02/18/22 12:07 PM (1 year, 11 months ago) |
|
|
Quote:
SprewellSleeve said: The width I've been using for the wrapper/container has been 1024px because of my instructor, but what if I, for whatever reason, want another size, how would I know? Maybe 1024 covers the bases for most computer screens, but yeah. This isn't a big problem for me though. This sounds like math really won't come much into the equation if it at all.
Your instructor seems to be stupid or just trolling you. Specifying anything in pixels is year 2000 level web design... If your don't mind your grades, push that straight into your instructors face.
Why you should never specify anything in pixels, instead use relative measurements (percentage, em, ...): https://www.w3schools.com/html/html_responsive.asp
-------------------- LAGM2022
|
SprewellSleeve



Registered: 03/15/09
Posts: 6,315
Loc: USA
Last seen: 2 days, 4 hours
|
Re: Question about HTML/CSS math - Any tips/resources on learning sizes, height, pixels, etc.? [Re: BSUUF2] 1
#27664338 - 02/18/22 06:37 PM (1 year, 11 months ago) |
|
|
Quote:
BSUUF2 said:
Quote:
SprewellSleeve said: The width I've been using for the wrapper/container has been 1024px because of my instructor, but what if I, for whatever reason, want another size, how would I know? Maybe 1024 covers the bases for most computer screens, but yeah. This isn't a big problem for me though. This sounds like math really won't come much into the equation if it at all.
Your instructor seems to be stupid or just trolling you. Specifying anything in pixels is year 2000 level web design... If your don't mind your grades, push that straight into your instructors face.
Why you should never specify anything in pixels, instead use relative measurements (percentage, em, ...): https://www.w3schools.com/html/html_responsive.asp
I'm not getting graded. It's online courses from 2019. I originally subscribed for the Photoshop lessons, and I saw shortly before I started taking front-end web design courses that he had them as well so I decided to go with him since I like his teaching. This is his site:
https://bringyourownlaptop.com/
He did teach about rem and touched briefly on percentages. I actually memorized his way of figuring out the rem. Choose your font size in pixels and multiply it by 0.0625. He said he doesn't know why he remembered that. Maybe him saying he doesn't know how he remembers that made me remember it .
Thanks for the link.
I like year 2000 level web design .
--------------------
|
|