The class was conducted on 31st August for Batch 1 and 1st September for Batch 2. The Instructors for the program are Arun Padmanabhan , CSE 3rd Year and Joel Johnson , IT 4th Year.
Agenda
- About the Club
- Prerequisite Editors and Software
- Git
- Why Web Development?
- Learning and coding time!
- Task (Homework)
- Resources
1. About the club
This is a community group for students in their undergraduate or graduate term. Our club is recognized by Google Developers. Our primary aim is to create an impact with technology in and around campus. The club is intended as a space for students to try out new ideas and collaborate to solve Mobile and Web development problems, Machine Learning, Cloud Computing and other in demand technologies.
2. Prerequisite Editors and Software
We're using Visual Studio Code as the code editor because it combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging. Nowadays every editor has the same features. We are using this because it is our preferred choice. There are of course other editors like Atom, Sublime, Komodo etc. You can download Visual Studio code here: Click Here
3. Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Now you must be wondering what a Version Control System is. They are a category of software tools that help a software team manage changes to source code over time. In Layman term, it means you can keep a track of your code while you are updating it regularly. If a mistake is made, developers can turn back the clock and compare earlier versions of the code to help fix the mistake while minimizing disruption to all team members.
GitHub
GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. No matter how small your changes are at the end of the day or a week whatever change you have made, you must push it to your repository.
These are the 3 mantras that you should remember:
- git add --all
- git commit -m “your message”
- git push.
4.Why Learn Web Development?
- No Prerequisite while learning from Scratch.
- There are always web development jobs available.
- There are always Freelance Opportunities and there's no problem in earning a little while you're still in college.
- It’s creative and fun.
General Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
5. Learning and Coding Time!
HTML (Hyper Text Markup Language) is the standard markup language for Web pages. It is human-readable, meaning markup files contain standard words, rather than typical programming syntax. Now what is Markup Language??A markup language is a computer language that uses tags to define elements within a document. But what is a Tag???
< This is a tag >
- Head tag: Head tag is used to contain all the head element in the html file. It contains the title, style, meta, … etc tag.
<head>”Contains elements describing the document”</head>
- Body tag: It is used to define the body of html document. It contains image, tables, lists, … etc.
<body> “The content of your HTML page”</body>
- Title tag: It is used to define the title of html document.
<title>”tab name”</title>
- Heading tag: It is used to define the heading of html document.
<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
- Paragraph tag: It is used to define paragraph content in html document.
<p>Write your para here.</p>
- Bold tag: It is used to specify bold content in html document.
<b>Bold word</b>
- Italic tag: It is used to write the content in italic format.
<i>Italics</i>
- Deleted text tag: It is used to represent as deleted text. It cross the text content.
<strike>Type here</strike>
- Anchor tag: It is used to link one page to another page.
<a href=“www.google.com"> Google</a>
- List tag: It is used to list the content.
<li>List item 1</li>
<li>List item 2</li>
- Ordered List tag: It is used to list the content in a particular order.
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
- Scrolling Text tag: It is used to scroll the text or image content.
<marquee bgcolor="#cccccc" loop="-1“ scrollamount="2" width="100%">Example Marquee</marquee>
- Font tag: It is used to specify the font size, font color and font-family in html document.
<font face="Times New Roman">Example</font>
- Image tag: It is used to add image element in html document.
<img src="gfg.jpg" width="40"
height="40" border="0">
- Horizontal rule tag: It is used to display the horizontal line in html document.
Syntax: <hr />
- Break Tag: It is used to give a break.
<br>
6. Task
This article hasn't covered all topics of HTML. It is done so that you can explore some other tags by yourself. Form tag is one example.
Now go to Freecodecamp and complete the Basic HTML and HTML5 in the Responsive Web Design Certification Section. The link is given here: Click me
7.Resources
a. W3schools
c. Or simply Google it!
d. The GitHub Repository where the codebase should be present: Click here
This blog is written by Aman Zishan and Joel Johnson. Feel free to comment on this post if you have any queries and show us some love by liking the post!
Hosted at CITTIC
