Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,151,832 members, 7,813,765 topics. Date: Tuesday, 30 April 2024 at 05:57 PM

I Want To Build Websites All By Myself - Programming (5) - Nairaland

Nairaland Forum / Science/Technology / Programming / I Want To Build Websites All By Myself (7300 Views)

Teach People To Build Websites And Apps And Earn Money / I Build Websites And Mobile Apps / Please Help, I Want To Learn To Build Websites, Web Design... (2) (3) (4)

(1) (2) (3) (4) (5) (Reply) (Go Down)

Re: I Want To Build Websites All By Myself by eesyy(m): 9:40am On Oct 22, 2020
*CSS─ VISIBILITY*

A property called visibility allows you to hide an element from view. You can use this property along with JavaScript to create very complex menu and very complex webpage layouts.
You may choose to use the visibility property to hide error messages that are only displayed if the user needs to see them, or to hide answers to a quiz until the user selects an option.

NOTE: Remember that the source code will still contain whatever is in the invisible paragraph, so you should not use this to hide sensitive information such as credit card details or passwords. The visibility property can take the values listed below.

visible - The box and its contents are shown to the user.

hidden - The box and its content are made invisible, although they still affect the layout of the page.

collapse - This is for use only with dynamic table columns and row effects.

Here is an example:


<!DOCTYPE html>
<html>
<head>
<title> CSS VISIBILITY </title>
</head>
<body style="padding: 10px;">

<p>
This paragraph should be visible in normal way by default. Visible is the default setting, even though it is not set with the visibility property.
</p>
<br/>

<p style="visibility: hidden;">
This paragraph should not be visible. It is set to hidden using th visibility property.
</p>
<br/>

<p style="visibility: visible;">
This paragraph is set to be visible. Notice the browser still provides the space for the invisible paragraph above.
</p>

</body>
</html>


Notice the browser still maintains a layout as if the invisible paragraph were visible. So basically, it is obvious something is there.

The display property can be used for similar purpose, it is however quite different.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by eesyy(m): 4:47pm On Oct 22, 2020
*CSS─ DISPLAY 1*

A property called display allows you to set an element to show or not. The display property is the most important CSS property for controlling layout. The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

*Block-level Elements*
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element. Examples of other block-level elements:
<h1> <h2> <h3> <h4> <h4> <h6>
<p>
<form>
<header>
<footer>
<section>

*Inline Elements*
An inline element does not start on a new line and only takes up as much width as necessary. The <span> element is an inline element. Examples of other inline elements:
<a>
<img>

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

*Override The Default Display Value*
As mentioned, every element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards. A common example is making inline <li> elements for horizontal menus:

See the example and result in the first and second images uploaded below.

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The following example displays <span> elements as block elements:

See the example and result in the third and fourth images uploaded below.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by eesyy(m): 4:54pm On Oct 22, 2020
*CSS─ DISPLAY 2*

*Hide an Element - display:none or visibility:hidden?*
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:


<!DOCTYPE html>
<html>
<head>
<title> CSS DISPLAY </title>

<style>
h1.hidden {
display: none;
}
</style>

</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>


See the result in the image uploaded below.

As we have learnt in the earlier lesson, visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout. So basically:

display - Specifies how an element should be displayed.
visibility - Specifies whether or not an element should be visible.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by geektechlife: 7:56pm On Oct 23, 2020
*CSS─ POSITIONING*

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element. Now, we will see all the CSS positioning related properties with examples.

*Static Positioning*
HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.

*Relative Positioning*
Relative positioning changes the position of the HTML element relative to where it normally would appear based on the surrounding elements. So "left:20" adds 20 pixels to the element's LEFT position i.e pushes the element 20px away from the left without affecting margins or the positions of other elements. An element with position: relative; is positioned at the specified coordinates relative to your screen top-left corner.

*Absolute Positioning*
An element with position: absolute is positioned at the specified coordinates relative to the parent element. An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However, if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A "positioned" element is one whose position is anything except static.

*Fixed Positioning*
Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. A fixed element does not leave a gap in the page where it would normally have been located.

NOTE: For all positioning you can use four values top, bottom, right and left along with the position property to move an HTML element anywhere in the HTML document. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

Move Left - Use a negative value for left or positive right value.
Move Right - Use a positive value for left or negative right value.
Move Up - Use a negative value for top or positive bottom value.
Move Down - Use a positive value for top or negative bottom value.

Example:


<!DOCTYPE html>
<html>
<head>
<title> CSS DISPLAY </title>
</head>
<body style="font-size: 22px;">

<div style="position: relative; left: 80px; top: 2px; background-color: green;"> This div has relative positioning. </div>

<div style="position: absolute; left: 0px; top: 20px; background-color: yellow;"> This div has absolute positioning. </div>

<div style="position: fixed; left: 80px; top: 20px; background-color: red;"> This div has fixed positioning. </div>

</body>
</html>


With a lot more content enough for the page to scroll, you will see the effect of the fixed position value. However, see the result of the example in the image uploaded below.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by eesyy(m): 8:36am On Oct 30, 2020
*CSS─ LAYERS*

CSS gives you an opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.

The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom.A z-index property can help you to create more complex webpage layouts. The following example shows how to create layers in CSS. Example:


<!DOCTYPE html>
<html>
<head>
<title> CSS LAYERS </title>
</head>
<body style="font-size: 22px;">

<div style="background-color:red; width:300px; height:500px; position:relative; top:10px; left:80px;"> This div has relative positioning.
</div>


<div style="background-color:green; width:300px; height:400px;"> This div has no positioning.
</div>


<div style="background-color:yellow; width:300px; height:100px; position:fixed; top:0px; right:35px; z-index:1;"> This div has fixed positioning.
</div>

</body>
</html>


See result in the image uploaded below.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by geektechlife: 8:45pm On Oct 30, 2020
*CSS─ MEDIA TYPES*

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen or paper, with a speech synthesizer or braille device e.t.c. We have currently two ways to specify media dependencies for style sheets:

1) Specify the target medium from a style sheet with the @media or @import at rules.
2) Specify the target medium within the document language.

*The @media rule*
The @media rule specifies the target media types (separated by commas) of a set of rules.
Given below is an example:


<!DOCTYPE html>
<html>
<head>
<title> CSS MEDIA </title>

<style tyle="text/css">
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 18pt }
}
@media screen, print {
body { line-height: 2.2 }
}
</style>

</head>
<body>

<div> This is the first div. </div>
<div> This is another div. </div>
<div> This is the third div. </div>

</body>
</html>


*The Document Language*
In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet, just like this:

<link media="print" href="mystyle.css">


*Recognized Media Types*
The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to.

NOTE: Media type names are case-insensitive. Given below is a list of various media types:

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by geektechlife: 8:26pm On Nov 01, 2020
*What is Responsive Web Design?*

Responsive web design makes your web page look good on all devices. At this point, there is good sense to treat this highly important issue of web design.

Have you noticed some websites look different on phone from how they appear on large desktop or laptop screens? Sometimes the difference might not be much: a vertical flow of content adapting to small screens while a grid outline on desktop, other times bigger differences: some hidden or altered contents on small screens. The answer to the question is RWD: Responsive Web Design which uses only HTML and CSS. It is not a program or a JavaScript.

*Designing For The Best Experience For All Users*
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. It should not leave out information to fit smaller devices, but rather adapt its content to fit any device, like in the image uploaded below.

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

*What is The Viewport?*
The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen. This was not perfect!! But a quick fix.

*Setting The Viewport*
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

This comes inside your document head section before the internal style element, most likely after the title tag.

Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience. Therefore, also keep in mind:

1. Do NOT use large fixed width elements - For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.

2. Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.

3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.

There's more to cover on this topic. We'll do that in subsequent sessions.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by eesyy(m): 1:18am On Nov 03, 2020
*What is a Grid-View?*

Many web pages are based on a grid-view, which means that the page is divided into columns, like you see in the first image uploaded below.

Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page. See the second image uploaded below.

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

*Building a Responsive Grid-View*
First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements. Add the following code in your CSS:

* {
box-sizing: border-box;
}

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by geektechlife: 10:30pm On Nov 03, 2020
*Grid-View Example*

The following example shows a simple responsive web page, with two columns: see the first image uploaded below.

The example is fine if the web page only contains two columns. However, we want to use a responsive grid-view with 12 columns, to have more control over the web page.

The CSS:
First we must calculate the percentage for one column: 100% / 12 columns = 8.33%. Then we make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

All these columns should be floating to the left, and have a padding of 15px:

[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}

The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns does not exist. To prevent this, we will add a style that clears the flow:

.row:after {
content: "";
clear: both;
display: block;
}

The HTML:
Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12:

<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>

We also want to add some styles and colors to make it look better: see the second, third and fourth images uploaded below.

Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In our next lesson you will learn how to fix that.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by syluck(m): 7:16pm On Nov 05, 2020
Thank God I came across this thread.
I will refer to this when I'm ready to learn html. For now I'm on programming language.
Re: I Want To Build Websites All By Myself by eesyy(m): 2:24am On Nov 07, 2020
*Responsive Web Design - Media Queries 1*

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. For example, if the browser window is smaller than 500px, the background color will change to lightblue:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>
body {
background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
body {
background-color:lightblue;
}
}
</style>

</head>
<body>

<p>Resize the browser window. When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>


*Add a Breakpoint*
Earlier in our lessons, we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen. Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Let's take the example similar to the one from our last lesson, use a media query to add a breakpoint at 768px. So when the screen (browser window) gets smaller than 768px, each column should have a width of 100%. See the first and second images uploaded below.

Powered by Programmers Community...

2 Shares

Re: I Want To Build Websites All By Myself by syluck(m): 12:42pm On Nov 07, 2020
eesyy:
*Responsive Web Design - Media Queries 1*

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. For example, if the browser window is smaller than 500px, the background color will change to lightblue:


<!DOCTYPE html>you
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>
body {
background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
body {
background-color:lightblue;
}
}
</style>

</head>
<body>

<p>Resize the browser window. When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>


*Add a Breakpoint*
Earlier in our lessons, we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen. Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

Let's take the example similar to the one from our last lesson, use a media query to add a breakpoint at 768px. So when the screen (browser window) gets smaller than 768px, each column should have a width of 100%. See the first and second images uploaded below.

Powered by Programmers Community...

Which programming language are you using?
Re: I Want To Build Websites All By Myself by geektechlife: 12:27am On Nov 08, 2020
syluck:


Which programming language are you using?

This is just html and css
Re: I Want To Build Websites All By Myself by syluck(m): 5:51am On Nov 08, 2020
geektechlife:


This is just html and css
Okay, I thought as much grin
Re: I Want To Build Websites All By Myself by FadaFran6Xavier: 2:58pm On Nov 09, 2020
I’d love to learn coding from scratch so I can become a web programmer and web app developer.
Re: I Want To Build Websites All By Myself by eesyy(m): 2:24am On Nov 10, 2020
FadaFran6Xavier:
I’d love to learn coding from scratch so I can become a web programmer and web app developer.

This thread was started for that purpose: help people like you.
Re: I Want To Build Websites All By Myself by Marks112: 12:46pm On Nov 13, 2020
eesyy:


Awesome of you to say something. Thanks.

To all followers, do the work to know the steps and how much you can actually do, else the journey stops even before it begins and you would have only amassed large quantities of head knowledge; nothing practice-able. Track your progress, communicate your results here, if you please. Your experience starts now, especially in this training. Be practical everytime. It's in your wisdom to do these.

I respect you all, Programmers-In-Training, soon Programmers-To-Teach. You guys are great. It takes guts and will, that I know.
Thumbs up...
Following

Re: I Want To Build Websites All By Myself by Marks112: 5:54pm On Nov 14, 2020
This is so well explanatory ,keep up the good work
Following step by step

Re: I Want To Build Websites All By Myself by Chingle6(m): 6:54pm On Nov 14, 2020
This OP just dey rush person... Abeg u dey Lagos make u teach me
Re: I Want To Build Websites All By Myself by eesyy(m): 2:31am On Nov 17, 2020
Chingle6:
This OP just dey rush person... Abeg u dey Lagos make u teach me

No. Not currently. I will be in Lagos by the weekend.
Re: I Want To Build Websites All By Myself by Chingle6(m): 6:46am On Nov 18, 2020
eesyy:


No. Not currently. I will be in Lagos by the weekend.

Abeg if u do mistake enter Lagos abeg flash me 09098970319
Re: I Want To Build Websites All By Myself by Chefgray92: 2:33am On Oct 13, 2022
eesyy:
*HTML –LINKS 2*

*Linking to a Page Section*
You can create a link to a particular section of a given webpage by using id attribute. This is a two-step process.
First, id the section you want to go to when the link is clicked:

<h1 id="news"> ... </h1>

Second, create a link to the place where you want to reach within a webpage and id it using <a...> tag as follows:

<a href="#news"> Click to scroll to news </a>

On click of this link, the browser scrolls to the section of the page where that element with the news id is located on that same page.

What if you intend to visit a particular section on a different page? Simple as well! For example the section in question is:

<h2 id="notes"> ... </h2>

and exists on an html page named blog.html on the same directory (i.e folder) as the
h file you are working on, which carries your link text. Just do this on the link:

<p> <a href="blog.html#notes"> Click to see notes </a> </p>

This type of linking is referred to as BOOKMARKS.

*Download Links*
You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give complete URL (web address) of the downloadable file as follows:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="http://www.gigabyteresources.com/files/page.pdf">Download PDF File</a>
</body>
</html>

The URL above shows that the file to be downloaded on click of the link DOWNLOAD PDF FILE, is named page.pdf and located in a folder called files. That folder is on the same folder/directory as the file you are working on.

*HTML – IMAGE LINKS*
It is a cute practice among programmers to use image as links to and bookmarks even. The method is no much different from the usual. It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below:

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>

<p>Click following link</p>
<a href="http://www.gigabyteresources.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point" border="0"/>
</a>

</body>
</html>

*HTML Email Tag*
It is not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming problem for your email account. There are people, who can run programs to harvest these types of emails and later use them for spamming in various ways.

You can have another option to facilitate people to send you emails. One option could be to use HTML forms to collect user data and then use PHP or CGI script to send an email. HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http.

<a href=”mailto: abc@example.com”>Send Email</a>

Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc.) installed on your user's computer. There is another risk to use this option to send email because if user do not have email client installed on their computer then it would not be possible to send email.

*Default Settings*
You can specify a default email subject and email body along with your email address. Following is the example to use default subject and body.

<a href=”mailto:abc@example.com?subjectFeedback&body=Message”>
Send Feedback
</a>

Powered by Programmers Community...





Good looking bruv.....do you build web pages as well if yes I would like to propose an idea I'm working on it include base64 encryption and PHP scripts as well as Linux skills and vps server settings.....would you mind?
Re: I Want To Build Websites All By Myself by sanjaysahu: 1:09pm On Jan 30
[url]Your blog is a treasure trove of great and practical information. The informative nature of your posts is genuinely appreciated.[/https://salesforcemasters.in/salesforce-developer-course-in-hyderabad/]
Re: I Want To Build Websites All By Myself by archana06n: 2:01pm On Feb 08
That's a great goal! Building websites can be a rewarding skill to learn, and there are plenty of resources available to help you get started. Here's a general roadmap to guide you:
Learn HTML
Master CSS
Understand JavaScript
Explore Frameworks and Libraries
Practice, Practice, Practice
Stay Updated
Build a Portfolio
Remember, building websites is a skill that takes time and dedication to master. Be patient with yourself and don't get discouraged by setbacks. Keep practicing, learning, and experimenting, and you'll soon be able to build websites! For guidance, Visit Us at https://infycletechnologies.com/

(1) (2) (3) (4) (5) (Reply)

Programming Videos And Books For FREE / Javascript In Pidgin!!! / Can I Learn Medicine And Practice Coding At Same Time

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 104
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.