What I need to know
Hello Family members, you need to know how to cook because I love food....
Lolzzzzzz, you must have been wondering what kind of the title is this: What I need to know. The question will now be what I need to know where?
I want to introduce you to what to start with for coding. There are different types of developers like Software developers, Android Developers, etc; out there using different languages like HTML, CSS, Python, JavaScript, Java, etc. For a software developer, you can be a Front-end or Back-end developer or a Full Stack(Both Front-end and Back-end developer). Majorly, I will be dwelling on the front-end development.
First, you will need to install Visual Studio Code, Google Chrome on your System.
so to start with; I'm going to be defining some terms and explaining more about them
What is Web Design?
● Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific purpose
● Web Design is a similar process of creation, with the present content on electronic web pages, which the end-users can access through the internet with the help of a web browser.
Elements of Web Design
● Layout: This is the way the graphics, ads, and text are arranged.
● Colour: The choice of colors depends on the purpose and clientele; it could be simple black-and-white to multi-colored, conveying the personality of a person or the brand of an organization, using web-safe colors
●Graphics: Graphics can include logos, photos, clip art, or icon all of which enhance the web design.
● Fonts: The use of various fonts can enhance a website design. Most web browsers can only read a select number of fonts, known as "web-safe fonts".
● Content: Content and design can work together to enhance the message of the site through visuals and text. Written text should always be relevant and useful.
what is HTML?
● HTML stands for Hyper Text Markup Language
● HTML describes the structure of Web pages using markup
● HTML elements are the building blocks of HTML pages
● HTML elements are represented by tags
● HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
● Browsers do not display the HTML tags but use them to render the content of the page
What is CSS?
● CSS stands for Cascading Style Sheets
● CSS describes how HTML elements are to be displayed on the screen, on paper, or in other media
● CSS saves a lot of work. It can control the layout of multiple web pages all at once
● External stylesheets are stored in the CSS file
What is JavaScript?
● JavaScript is the programming language of HTML and the Web
● It adds interactivity to web pages
● Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language
Setting Up
1) Create a template folder at a location on your system
2) Inside the folder, create a folder for your CSS and image files
3)Create a template.html file using a text editor(Visual Studio Code) of your choice settings
Using the Template
● For each project we want to create we can simple the template folder and work with it
● The template.html file will also be renamed as the need arises
● The template.html file gives us a clean place to start from every time we want to create a web page Using the Template
MODIFY YOUR TEMPLATE
Understanding the Template file
● The<!DOCTYPE> declaration must be the very first thing in your HTML document, before the HTML tag.
Press SHIFT+1 on your keyboard to bring out the declaration.
● The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in
Understanding the Template file
● The <html>tag tells the browser that this is an HTML document
● The<html> tag represents the root of an HTML document
● The tag is the container for all other HTML elements (except for the<!DOCTYPE>tag)
Understanding the Template file
● The <head>element is a container for all the head elements
● The<head> element can include a title for the document, scripts, styles, meta information, and more
● The head supports other tags such as <style>, <base>, <link>, <script>, <noscript>.
●Metadata is data(information) about data.
●The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.
●Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other information.
●HTML5 introduced a method to let web developers take control over the viewport(the user's visible area of a web page), through the <meta> tag.
●The <title>tag is required in all HTML documents and it defines the title of the document.
●The <title> element defines a title in the browser toolbar
●This provides a title for the page when it is added to favorites.
●This also displays a title for the page in search engine results.
CREATING YOUR FIRST WEBPAGE
● Copy your template folder
●Rename your copy of the template to the folder to first_webpage.
●Go inside the folder and rename the template.html to index.
NOTE
●Every website must have an index.html file.
●The index.html file is the default file to be rendered on a website.
●Create the index.html file then the other pages of your website.
Edit your index file
Render your index file
●Preview your index file
●It will appear as shown below:
Note
●<!--This is a comment-> did not display in the browser.
●The text for the title tag shows up in the title
● The text for the <h1> tag shows up on the page rendered.
●Comments are never rendered in the web page, they can be viewed when you view the source of a web page.
<h1><h6>
●Headings are defined with the <h1> to<h6> tags
●<h1> defines the most important heading.<h6> defines the least important heading.
●<h1> headings should be used for the main headings, followed by<h2>headings, then the less important<h3>, and so on.
Feel free to try this out:
Complete your first web page to provide a detailed description of yourself.
Create a single-page resume of yourself.
screenshot and tag us (Coder's Den)
https://twitter.com/CodersDen94?t=QvnEWuYvXDI6gS9zJVeHvg&s=09 on Twitter, watch videos of the classes you have missed on youTube:
https://m.youtube.com/channel/UCSaPpb0ORIIlGDT8Tieq0Iw
you can also join our Slack Channel https://join.slack.com/t/codersdenhq/shared_invite/zt-1bk86msb8-5kzdwWj_TWqO_i4iwZ0soA
Conclusion
HTML Is a means of creating web pages
CSS handles the presentation of a web page to the user
JavaScript enhances the interactivity of a web page.
This is where I'm going to stop for today, see you on my next write up
Images: from phone and Unsplash
Sites that also help in this article: www.w3school.com, https://developers.mozilia.org
I hope you enjoyed studying this write-up, feel free to comment, like, and subscribe. Thank you
Thank you, I hope you learnt some things there.