I Want To Build Websites All By Myself. Can I? - Webmasters (5) - Nairaland
Nairaland Forum / Science/Technology / Webmasters / I Want To Build Websites All By Myself. Can I? (4470 Views)
I Build Websites...... Any Kind Of Websites @cheap Rates / Build Websites For Your Business, E-commerce And Many More At Cheap Rates....... / What Can I Use To Build Websites Like This One (2) (3) (4)
(1) (2) (3) (4) (5) (Reply) (Go Down)
| Re: I Want To Build Websites All By Myself. Can I? by shopiesfy(m): 7:56am On Oct 20, 2020 |
Of course you can. You can use BuzzPress; * New BuzzPress Cloud Builder * AdSense To Profits For Every Click * Unlimited Free Hosting Included * Set-Up Your Own Custom Domain * ECom Store & Affiliate Store Built-In * Beginner-Friendly - No Code * No Monthly Fees * Clickbank, JVzoo & Warriorplus * Done For You Offers Built In * 30 Day Money Back Guarantee...
|
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 2:23pm On Oct 20, 2020 |
*CSS─ SCROLLBARS* There may be a case when an element's content might be larger than the amount of space allocated to it. For example, the given width and height properties do not allow enough room to accommodate the content of the element. CSS provides a property called overflow, which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values: visible - Allows the content to overflow the borders of its containing element. hidden - The content of the nested element is simply cut off at the border of the containing element so it can not be seen, and no scrollbar is visible. scroll - The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content. auto - The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow. Here is an example: <!DOCTYPE html> <html> <head> <title> CSS SCROLLBARS </title> <style type="text/css"> .visible, .hidden, .scroll, .auto { display: block; border: 1px solid red; padding: 5px; margin-top: 5px; width: 300px; height: 50px; } .visible { overflow: visible; } .hidden { overflow: hidden; } .scroll { overflow: scroll; } .auto { overflow: auto; } </style> </head> <body style="padding: 10px;"> <p>Example of visible value:</p> <div class="visible">I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div><br/> <p>Example of hidden value:</p> <div class="hidden">I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div><br/> <p>Example of scroll value:</p> <div class="scroll">I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div><br/> <p>Example of auto value:</p> <div class="auto">I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars. </div> </body> </html> *The overflow-y and overflow-x Properties* You can set different overflow values for vertical and horizontal axis of an element. To set for vertical, use overflow-y; for horizontal, use overflow-x. Here is an example: <!DOCTYPE html> <html> <head> <title> CSS SCROLLBARS </title> <style type="text/css"> .vertical { display: block; border: 1px solid red; padding: 5px; margin-top: 5px; width: 300px; height: 50px; overflow-y: auto; } .horizontal { display: block; border: 1px solid red; padding: 5px; margin-top: 5px; width: 300px; height: 50px; overflow-x: scroll; } </style> </head> <body style="padding: 10px;"> <p>Example of overflow-y value:</p> <div class="vertical">I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This shows vertical overflow. </div><br/> <p>Example of overflow-x value:</p> <div class="horizontal">I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This shows horizontal overflow. </div> </body> </html> Results are shown below in the uploaded images accordingly. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 9:38am 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. Can I? by eesyy(m): 4:56pm 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. Can I? by eesyy(m): 4:57pm 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. Can I? by geektechlife: 7:55pm 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. Can I? by eesyy(m): 8:33am 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. Can I? by geektechlife: 8:20pm 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. Can I? by geektechlife: 8:15pm 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. Can I? by HassieMalcomson(f): 11:07pm On Nov 01, 2020 |
Are you building a website in Django, Express Js or Laravel then yes, it could be a tough job and you should be expert in these frameworks before their application. But if you are designing a simple WordPress website then no doubt, it is not rocket science. Even most of the CRMs are not enough difficult to learn to build a website. 1 Like |
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 1:14am 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. Can I? by eesyy(m): 10:33pm 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. Can I? by eesyy(m): 2:26am 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
|
The Fraudulent Nigerian Immigration Website???? / How Long Does It Take Payoneer / I Want To See Your Personal Website!
(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. 71 |