What are the things you should know as the web developing beginner level learner
What are the things you should know in beginning?
If you use social media and you are interested in web developing memes I’m sure you saw this meme.
Wait a minute, why HTML isn’t a programming language. First, we should go to the definition of programming language. A programming language is a formal language that contains a collection of instructions that generate different output types. To implement algorithms, programming languages are used in computer programming. Many languages for programming consist of instructions for computers. Now we can understand the reason why HTML isn’t a programming language because it hasn’t any algorithms and instructions.
So what is HTML, HTML standard for HyperText Markup Language. and it is designing language. It’s using to design web pages according to me it is like the foundation of a web page.
If you want to learn about HTML is the first thing you should learn. HTML 5 is the newest version of the HTML.
When you learn HTML you able to make a basic website which is very boring. so now you want to make this beautiful. here is the place when CSS coming to web development. CSS standard for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.simply it is a styler of our web page.css can change font, colour, position, background, and size. Not only but also we can do basic level animation from it. At the basic level HTML and CSS using for the front end of development and we can use javascript which is a programming language for some logical things and add some advanced animation.
The best way to start learning web development is a visit to https://www.w3schools.com/ but it’s not enough to learn web development you should build your web projects so you can learn fast.
What you missed and some tips
So I’m not going to teach HTML or CSS but I’m going to give some important things which you missing when you learning web development and also I give some tips.
Cheatsheets
There are so many apps and websites to learn and build CSS, HTML, and javascript but trust me this will different from others. You should visit and try this https://htmlcheatsheet.com/.
Shortland CSS
The use of shorthand properties, which allows you to define many properties using just one, is one of the many great possibilities in CSS. You can quickly see the advantage of using these shorthand properties if you have started learning about CSS and implementing it on your Web pages. CSS shorthand makes adding style to your markup much simpler for you and makes your CSS code more concise. You can refer to the below link to learn that.
https://www.sitepoint.com/introduction-css-shorthand/
<div>
I know you learn this tag already if you refer w3school website. But how you use it just for reference. But you can use it for styling things. Not only but also we can use in divtable didn’t you try it yet.go through the below link to this website also provide a table generator with CSS to make your table with getting the code and learn how to make that kind of table.
Web extensions
We can have a preview of our website from open in the browser. But did you know you can have an also debugger on the web if you install extensions. Just visit google store and search for it so you can found many extensions there.
Position
As a beginner, it’s very hard to understand positioning so how to learn to positioning.
The below links are what I refer to learn positioning so I think it would be helpful to you too.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Stealing codes
Oops, what steals code is it a bad thing? No no you can read any website code in inspecting. So you can copy and get that code or learn from it. If you have simple knowledge about these technologies you can read this and understand the code. So for inspecting you have two choices
Right-click your mouse and select inspect
Fn+F12
You can choose one of these two and inspect the code. And do whatever you want.
Grid-template
Did you ever use a grid-template in your CSS? If you want to make your website responsive to different screen sizes, need to adjust the location of your HTML elements frequently this the best way.
<html><head><title></title><style>
main,nav,header,article,aside,footer
{border: 1px solid black;padding: 3px;font-size: 20px;text-align: center;}.main-container {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-template-rows: repeat(4, 1fr);grid-template-areas: “nav nav nav nav” “header header header aside” “article article article aside” “article article article aside” “article article article footer”;column-gap: 5px;row-gap: 3px;}.nav {background-color: goldenrod;grid-area: nav;}.header {background-color: lightseagreen;grid-area: header;}.article {background-color: firebrick;grid-area: article;}.aside {background-color: thistle;grid-area: aside;}.footer {background-color: sienna;grid-area: footer;}</style></head><body><main class=”main-container”><nav class=”nav”>Navbar</nav><header class=”header”>Header</header><article class=”article”>Article</article><aside class=”aside”>Aside</aside><footer class=”footer”>Footer</footer></main></body></html>
fitting image to the card
image is fitting to the card is very important for many websites so there a are some example for you
<html><head><title></title><style>.container {display: flex;}.dynamic-card {display: flex;flex-direction: column;position: relative;background-color: #FDFFFC;width: 40vw;height: 40vw;margin: 1rem;overflow: hidden;border-radius: 1rem;box-shadow: 0 3px 5px 0 #777;}.dynamic-card-content {font-family: ‘Righteous’, cursive;font-size: 1em;text-align: center;color: #000;line-height: 1em;text-align: left;padding: 4px;height: 40%;}.dynamic-card-content-button {position: absolute;width: 100%;height: 100%;font-family: ‘Righteous’, cursive;font-size: 4em;text-align: center;color: #fff;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;line-height: 1em;background: transparent;border: transparent;}.dynamic-card-content-button:hover {text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;color: #000;}.dynamic-card-img {width: 100%;height: 100%;overflow: hidden;object-fit: cover;img {}}</style></head><body><div class=”container”><div class=”dynamic-card”><button class=”dynamic-card-content-button”>Click Here</button><img class=”dynamic-card-img” src=”https://images.unsplash.com/photo-1545469044-6a709aeb90b5"></div><div class=”dynamic-card”><img class=”dynamic-card-img” src=”https://images.unsplash.com/photo-1571832191391-921b95fd87f8"><aside class=”dynamic-card-content”><h1>Stock Photo</h1><li>Additional Details</li><li>More Details</li></aside></div></div></body></html>
mask image
this is another good CSS effect to make your images more creative. you can go to this video and find out more.
https://youtu.be/lBK_kh4iCAQFonts
You can get one of the google fonts it’s very easy to import. if you don’t know how to import google fonts I’m sure this video (https://youtu.be/Z3JR6mEWEEo) will help you and you can use the :first-letter in CSS to change the first letter specifically and give a great look for it.
CSS clip-path marker
Making clip shape and get the size and angel is very hard so you can use this online tool.