HTML/CSS help

DipDab93

Hi All,

I'm relatively new to the whole HTML/CSS stuff but I have an issue with responsive web design. I'm not sure where to even start.

If I'm viewing other live websites on a mac or PC the content stays generally the same and the text go all over the shop and the container stays the same and when I try create a responsive web page I don't even know how to go about using the properties right.

for example i have the body element designed and then ive the section element that i put all the paragraphs in but when I increase decrease the browser window everything goes out of shape.
I could put in line breaks at the end of each line but I'm wondering whether there's a better way to do it.

As for using percentages ...... I'm unsure when/where I should favor the percentage over the text. Should it be used on the section?

Sorry for all these questions but any help would be appreciated
TIA

maccored

usually best to design a site for mobile first and foremost, then tweak it if it needs to suit a desktop computer. in css its the @media tag that specifically sets mobile design - thats how you make the website look different on a mobile phone

this guy has some excellent free css video tutorials.
https://www.mikedane.com/web-development/css/

Graham

Don't try and reinvent the wheel.

Start with one of the responsive frameworks (Bootstrap, Foundation etc.) and go from there. These frameworks have many common UI elements built in and are built-in responsive.

If you're already got a website, my advice would be to start again. Trying to make a non-responsive site responsive would be a miserable enough job for an experienced dev.

Sabre0001

If they're a beginner, and I say this as a fellow beginner, would it not be better to learn the fundamentals and foundations before moving on to the established frameworks? Would it give you a better understanding, more flexibility, and ultimately stand to you in the long run?

Would learning from the ground up give you a better understanding of the wheel?

Graham

no argument from me, absolutely learn the fundamentals.

Which approach is appropriate for the OP? Much will depend on whether the goal is to learn (responsive) web design or publish a responsive website.

Sabre0001

Thanks!

tricky D

It's always good to have some fundamentals but he issue here is how deep is it worth going.

Most of web design is already done with the wheel invented and pretty much ready-to-go in the form of templates and frameworks. In some cases you might never look at code beyond initial setup. However, depending on your environment you might well need to know how to work solutions for stuff that is outside the framework or template capabilities and this is where you want some depth of under-the-bonnet skills. The more creative tweaking and blank canvas design scenarios will require deeper skills.

Some tips for the OP:

Get your bookmarks working for all the knowledge that won't fit in your head.
Use the diagnostic tools available.
Some times using various backgrounds colours helps you to figure out how the layout of your containers works.

DipDab93

Graham wrote: »

no argument from me, absolutely learn the fundamentals.

Which approach is appropriate for the OP? Much will depend on whether the goal is to learn (responsive) web design or publish a responsive website.

Thanks for the response.
I'm no where near having a published website.
Using frameworks is great an all if you already know what you're doing and not to mention saves time/effort but I want to be able to make a responsive website myself from scratch simply so that I know I can if ever I need to

I'm really not comfortable with the whole positioning aspect of HTML/CSS
and the percentages. I do know about the viewports and media rules but knowing about them is one thing being able to properly implement them is another.
TIA