Web development learning thread(Javascript, HTML, CSS, angular, vue.js). Post: 303034188

Sponsored Content

Top Forums Web Development Web development learning thread(Javascript, HTML, CSS, angular, vue.js). Post 303034188 by RavinderSingh13 on Sunday 21st of April 2019 12:32:05 AM

04-21-2019

Moderator

Quote:

Originally Posted by Neo

Good learning!
Keep learning Ravinder and soon you can dive into Vue.js and write new forum components with me, after you get the basic of CSS and JS down Smilie

I will create a JSON REST API for you and encourage you tp build a Vue app using live forum data Smilie

Thanks a TON Neo for encouragement here, fingers crossed, I pray to GOD to give me strength to learn more daily basis.

Hello All,

I created a simple side navigation bar, where all options(hyperlinks) are my own programs itself Smilie

UI's explanation:

On left side have 5 links where I can hit on them and go the specific program's UI, I thought I will maintain all my programs into this side bar itself.

On main page it is a sample text I have taken from net.

HTML code: HTML code uses very basic things like hre(for page simple redirection to another link), link rel TAG for mentioning CSS file name in it by which we are making page settings like coloring, spacing etc etc. <div>...</div> tag which specifies a specific section in code(AFAIK).

Code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "all_programs1.css" />
<script type="text/javascript" src="all_programs.js"></script>
</head>
<body>

<div class="sidenav">
  <a href="http://localhost:5500/Change_colors%20of%20cells%20with%20buttons/change_color_of_cell.html">Color cells and clear cells program.</a>
  <a href="http://localhost:5500/Working_ones/create_window.html">Click on button and get alert program.</a>
  <a href="http://localhost:5500/Working_ones/date-time.html">Get date on browser simple program.</a>
  <a href="http://localhost:5500/Working_ones/create_window.html">Get confirm message window program.</a>
  <a href="http://localhost:5500/Working_ones/prompt_user.html">Relocate page program.</a>
</div>

<div class="main">
  <h2>Auto Sidebar</h2>
  <p>This sidebar should handle test contents.</p>
  <p>Scroll down the page to see the result.</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
  <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>  
</body>
</html>

Now here I have first time tested how to import a CSS file into HTML codes. Have created file named "all_programs1.css" where all css code will be there for above html code.

CSS code:

Code:

body {
    font-family: "Lato", sans-serif;
  }

.sidenav{
    width: 460px;
    position: fixed;
    z-index: 1;
    top: 20px;
    left: 5px;
    background: #eee;
    padding: 8px 0;
    font-size: 25px;
  }
  
  .sidenav a {
    padding: 6px 8px 20px 16px;
    text-decoration: none;
    color: #2196F3;
    display: block;
  }
  
  .sidenav a:hover {
    color: #16cc35;
  }
  
  .main {
    margin-left: 470px;
    font-size: 28px;
    padding: 0px 10px;
  }

A bit explanation on CSS portion is; .sidenav is a class name(for <div> TAG) and I am telling css to have this setting only for that class by using .. In case anyone wants to apply CSS settings for a specific component's ID then use like #sidenav as an example.

their properties are pretty much easy to understand. 1 great feature is hover which means we could set properties FOR ACTION when MOUSE/CURSOR is over some heading/text. In this example I am setting that its color should be GREEN, likewise we could set more things in it.

NOTE: Again few references were taken by googling.

Thanks,
R. Singh

RavinderSingh13

View Public Profile for RavinderSingh13

Find all posts by RavinderSingh13

7 More Discussions You Might Find Interesting

1. Web Development

Help with passing HTML values in to JavaScript

Not sure if this is the right place to ask this but here goes. I am creating a cheat sheet for co-workers. The concept is that you pick wire size and conduit size and the amount of wires that will fit is displayed. I haven't used alot of drop downs and can't quite figure out the way the get id...

2. Shell Programming and Scripting

Javascript or HTML to retrieve apache username

I have a internal wesbite set up and any visitor must enter username / passwd as defined in apache (I've set these up using htpasswd) I use cgi scripts set up using ksh or javascript to populate pages / tables etc. I want to be able to get the apache username that the used authorised...

3. Web Development

Learning HTML

I have tried to create a web page browser window. An example, I copied what the book pretty much wanted but get only the header. What should I change? Also Anyone know any good books for this? Many thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translation/EN" ...

4. Programming

Looking For the Best Way to Rotate an Image: JavaScript, PHP, HTML etc

Hey All, What I'm looking for is a way to rotate an image by non 90 degree angles (ie 90, 180, 270, 360). I am able to do it in PHP, but there are errors in the image, some pixels end up colored incorrectly and the image ends up resized and I lose transparency. I've done my share of searching on...

5. Web Development

HTML down, CSS help, ahhhh

I am having some problems. I have been able to learn HTML, but when I try and encode CSS, nothing happens, what is the major issue here. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>MY CSS</title> <style...

6. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ...

7. Web Development

Google Trends: react.js angular.js vue.js

While I'm on the subject of Google trends, here is a global trend since 2004 comparing react.js, angular.js, vue.js It's no secret I'm a vue.js fan and coder, but not because of the trend line (which I just saw for the first time a few minutes ago) My experience is that vue.js, a late arrival...