Guidance for a basic responsive website

Hello, this is my first post on this forum.
I need to make a new website, a quite simple one with some pages.
It is a company website (my company) and for selling a product.
The product is a software for Windows (I mention that so you can know more or less what the site is about).

I've been reading how to make a responsive website, but I have some questions and I need some place to ask them, so here I am. I hope that I came to the right place, and if it is not, please point me where I should go.

The first page that I'm working on, is the home page for the domain. It will be for now only a landing page, very basic and with a link to the product main page. The product pages will be in www .domain.com/ProductName/

I'm trying to make the markup or distribution of sections on the page with floats. I'm reading https://www.w3schools.com/html/html_layout.asp and basing the HTML text on that example.

The problem is with the header section, I would like to split the header section in this way: in the 30% of the left side I want to display a picture that is a company logo, and in the other 70% (the right side) to put some text like "Welcome to this company site".

The question is how.

 

Just don't, w3schools is garbage, if you ask @deathshadow nicely he'll probably show you a better way..

 

Hello. Thanks for your answer.
I think I'm asking...

 

It's okay you just learnt basic. Now learn the bootstrap other frameworks. It will help you to do this website very easily. I think your website requirement is not so much. So just bootstrap can help you. Or you can use CMS such as WordPress. Then you no need to learn any code.

 

Hello, I'm not familiar with "bootstrap", I don't know what it is and why I need that.

As you said, my requirements are not so much, I need to make a very basic site.

But I'm stuck, that's why I asked the question:

And this is the base code that I'm using: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float

How can I split the header section and put an image on the left side?

TIA.

 

The LAST damned thing this poor sod needs is the train wreck laundry list of how NOT to build a website that is bootcrap. It is painfully obvious to anyone qualified to write a single damned line of HJTML or CSS that the people who created it are utterly unqualified to build a website; much less tell others how to do so! It is a monument to the 3i of development: ignorance, incompetence, and ineptitude, and ANYONE who sees merit in it doesn't know enough about HTML to be flapping their damned yap on the topic.

Hence:

You don't. It's bullshit that despite the wild claims by the dunning-kruger flavour-aid drinkers just makes you work harder, not smarter. There's a reason it's called bootcrap, and if you walk through it I suggest finding a stick to scrape it off with before you go tracking it across the Internet's carpets!

And for the love of Christmas, forget W3Fools too. Those sleazy two faced ignorant turds aren't gonna teach you a blasted thing that's useful or correct either. In spite of unfounded rumors to the contrary they are NOT in any way related to the W3C -- their first lie -- and their pages are filled with broken, incomplete, and outright inaccurate information.

I'd suggest you try MDN instead:
https://developer.mozilla.org/en-US/docs/Learn

Is this THE heading for the entire site/page? That's an H1's job. Don't think it percentages as image scaling is a bad idea if said image is a logo... and if it's a logo that image is therein presentation, meaning it has NO business in the HTML in the first place. Is the image actually content?

It SOUNDS like you have a site name represented by a logo, and a tagline.... so:

<h1>
	<span>Site Title</span>
	<small>Welcome to the site</small>
</h1>

Code (markup):

Then in your EXTERNAL stylesheet (style in 99% of cases has NO business in the markup)

h1 { /* there should only ever be one H1 in a page! */
	overflow:hidden; /* contain floats */
	text-align:right;
}

h1 span {
	float:left;
	position:relative;
	padding:1em;
	/* you'll want to set the size of this to the aspect of the iamge */
}

h1 span:before {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/* image should be non-transparent */
	background:url(image.png) center left no-repeat;
	background-size:contain;
}

Code (markup):

... though that's me guessing wildly since I don't know what the image is, what the text is, or how you're using it on the page. The above attempts to use a technique called "Gilder-Levin image replacement" so that for users who don't get images for bandwidth or accessibility reasons, the page is still useful.

Even so, remember that your H1 (singular) is THE (singular) heading (singular) that everything on every page of the website should be a subsection of; which is why it should be THE FIRST content-bearing element on your pages. Just as a H2 (or HR) indicates the start of a major subsection of the page, with the first H2 (or HR) marking the start of your pages primary content (optional if you use HTML 5's MAIN tag), H3 marks the start of a subsection of the H2 preceding it, H4 indicates the start of a subsection of the H3 preceding it, and so-forth, establishing your document structure. THEY DO NOT MEAN fonts in different weights and sizes or "draw a line across the screen!

Rule #1 of HTML, if you're choosing ANY of your tags because of what their default appearance, you are choosing all the wrong markup for all the wrong reasons.

Hence why most bootcrap examples starting the page with a H4 and using DIV+IMG to do H1's job are pure 3i chazerei!

When building HTML properly you should be writing as much of your content - or a reasonable facsimile of future content -- first as if the appearance doesn't even exist to grammatical norms using semantic markup FIRST. Then and only then once that is complete do you apply STYLE and semantically neutral tags like SPAN and DIV as well as classes/id's as needed. And only as needed.

See my article on progressive enhancement, which breaks down the "sane/rational" approach to building an accessible responsive website.

https://cutcodedown.com/article/progressive_enhancement

 

When it comes to modern-day website design the key concept that appears in every web design project is responsiveness website layout. Responsive layout lets your website adjust to different screens and devices and render a perfect view. There are dozens of website layout concepts that you can learn from popular learning platforms like w3schools.com, however, choosing the right layout for your site can be challenging.

As far as your problem is concerned, you can utilize a <div> for the header section then place two divs inside it.

Set float property to left and choose width:30% for first and width:70% for the second div to get the desired effect.

You can also use a flexbox or grid layout to get this layout. For more details browse our web design service page.

 

Thank you guys. I've read the tutorial on cutcodedown.com pointed above and was already able to set up this simple landing page using a flexbox.

Yes, that was the issue: that there seems to be several ways to do more or less the same thing (floats, flexboxes, Etc.).

I understood the issue of focusing first on the content and making use of H1, H2, H3 for sections.

I'm working now on the rest of the web site, that has a menu on the top, the body with some content and at the bottom a footer (it is also simple but with several pages).

I'll ask if I have a question.
Thanks you very much.