Where can I practice my HTML, CSS, and JavaScript?

Where can I practice my HTML, CSS, and JavaScript

If you think you have enough knowledge of HTML, CSS, and JavaScript you can practice it through your computer.

So what to do?

How to incorporate all the things you learned into a single project?

Simple, create an example website/webpage.

First, create a topic.

What topic would it be? Well, don’t make it complicated since you are just starting out. Maybe just a simple website where users can navigate through pages, it’s all up to you.

  1. Create localhost on your computer. This is optional only but it will you expand your knowledge on how a website and hosting works.
  2. In creating your webpage, you must decide what elements will appear on those pages. Example, we are creating a four pages website. The pages are home, about us, contact, and blog.
  3. Picture out those pages, all of the pages are the same but except for its content. The point is to code the global sections first! The header where the logo and navigation lies, and the footer.
  4. The process is normally you create your HTML markup (webpage structure). Next, design it with CSS and the JS comes after that. This doesn’t mean you can’t touch your markup once you are done with styling (CSS). You are practicing, so you can tweak whatever you want.

Where can I practice online?

Try with an online code editor like jsfiddle or codepen. You can save or share your code created in there.

What is next after I learned HTML, CSS, and JavaScript?

You can study the different libraries like Jquery, a javascript library. Or start learning about Php language.

Learn more about CSS, HTML, Javascript in 22bulbjungle.

CSS Hover Effects | Fade in Text with Background Source Code

Fade in Text with Background Hover

This video is going to show you how to create a CSS Fade in text with background Hover effect. An image is covered with a solid color fades in with a text when a user hovers it.

The HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.  
  7.  
  8. <div class="wrapper">
  9.  <img src="animal.jpeg">
  10.  
  11.  
  12. <div class="overlay">
  13.  
  14.  
  15. <div class="content">Fade In<span>Fade In text</span></div>
  16.  
  17.  
  18.  </div>
  19.  
  20.  
  21. </div>
  22.  
  23.  
  24.  
  25. </body>
  26. </html>

The CSS

  1. .wrapper {
  2. font-family: sans-serif;
  3. width: 80%;
  4. margin: 0 auto;
  5. position: relative;
  6. }
  7.  
  8. img {
  9. display: block;
  10. width: 100%;
  11. height: auto;
  12. }
  13. .content {
  14. position: absolute;
  15. top: 45%;
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. -ms-transform: translate(-50%, -50%);
  19. color: #fff;
  20. text-transform: uppercase;
  21. font-size: 60px;
  22. }
  23.  
  24. .content span{
  25. font-size: 24px;
  26. display: block
  27. }
  28.  
  29. .overlay {
  30. position: absolute;
  31. top: 0;
  32. bottom: 0;
  33. left: 0;
  34. right: 0;
  35. height: 100%;
  36. width: 100%;
  37. opacity: 0;
  38. transition: .5s ease;
  39. background-color: #ff771d;
  40. }
  41.  
  42. .wrapper:hover .overlay {
  43. opacity: 1;
  44. }

Fade In Background Opacity(transparent) Hover

The HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>CSS hover effects: Fade In Background opacity</title>
  5. </head>
  6.  
  7. <body>
  8.  
  9.  
  10.  
  11.  
  12. <div class="wrapper">
  13. <img src="highland.jpeg">
  14.  
  15.  
  16.  
  17. <div class="overlay">
  18.  
  19.  
  20. <div class="content">
  21. the title <a>read more</a>
  22. </div>
  23.  
  24.  
  25.  
  26. </div>
  27.  
  28.  
  29.  
  30. </div>
  31.  
  32.  
  33.  
  34.  
  35. </body>
  36. </html>

The CSS

  1. .wrapper{
  2. font-family:sans-serif;
  3. width: 80%;
  4. margin: 0 auto;
  5. position:relative;
  6. }
  7. img{
  8. opacity: 1;
  9. display: block;
  10. width:100%;
  11. height: auto;
  12. transition: .5s ease;
  13. }
  14. .content{
  15. position: absolute;
  16. top:45%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. -ms-transform: translate(-50%, -50%);
  20. text-transform: uppercase;
  21. font-size: 60px;
  22. color:#fff;
  23. white-space: nowrap;
  24. overflow: hidden
  25. }
  26. .content a{
  27. font-size: 24px;
  28. display: block;
  29. background-color: #ff771d;
  30. text-align: center;
  31. padding: 10px;
  32. cursor: pointer
  33. }
  34. .overlay{
  35. opacity: 0
  36. }
  37. .wrapper:hover img{
  38. opacity: .5
  39. }
  40. .wrapper:hover .overlay{
  41. opacity: 1
  42. }

How to Center an Image in CSS Very Easily

center image in css

There are few pointers to center an image in CSS.

  • First, make sure that the parent element of the image has its width set.
  • Second, the image should not be wider than its parent element, that’s pretty obvious.

See also:  How To Center A Div Inside A Div Easily

Center and Image in CSS horizontally

Images are the same as divs, you can use the text-align into its parent element but not the margin: 0 auto alone on the image.
To center image in div, set a width of the div then add margin:0 auto and display: block into the image in CSS.

The HTML code:

  1. <div class="wrapper">
  2.  <img src="http://22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg"></div>

The CSS styles:

  1. .wrapper{
  2. width: 100%;
  3. height: 300px;
  4. border: 2px solid #93c504;
  5. }
  6. img{
  7. max-width: 250px;
  8. display: block;
  9. margin: 0 auto
  10. }

This will result into an image centered horizontally:

center-image_margin_0_auto

 

See the jsfiddle:

Make sure you have a smaller image width than the parent element.

The margin’s first value 0 was for the top and bottom margin. While the second is for left and right margin.

You can also set margin-left: auto and margin-right: auto on the image in CSS.

Center an Image in CSS horizontally and vertically

We will going to use the span element to guide our image  making it center. Setting an image with margin and text-alignment could not make our image center align.

The HTML code:

  1. <div class="wrapper">
  2.  <span class="for-image"></span>
  3.  <img src="http://22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg"></div>

The CSS styles:

  1. .wrapper {
  2. width: 100%;
  3. height: 300px;
  4. border: 2px solid #93c504;
  5. text-align: center
  6. }
  7.  
  8. .for-image {
  9. height: 100%;
  10. display: inline-block;
  11. vertical-align: middle
  12. }
  13.  
  14. img {
  15. max-width: 200px;
  16. height: auto;
  17. background: #3A6F9A;
  18. vertical-align: middle
  19. }

center-image_margin_auto

Responsive design images

Creating a responsive design image is very useful for mobile devices.

Responsive image will automatically scale down and adjust to the width of the device.

To create a responsive design image, you just set a max-width: 100%; and height: auto; into the images.

The max-width: 100%; means the image’s width will cover all its parent’s width. You can also set a natural image width(full resolution width of the image) to the max-width property so it will not be basing upon its parent element’s width.

The height: auto; makes the image height and width proportional. As a result, it would not stretch.

What happens if you will not set a height: auto; is, the image’s original height will still be the same while the width is scaling according to the device’s width, so it will be non-proportional.