Skip to content

Latest commit

 

History

History
103 lines (70 loc) · 5.85 KB

HTML.md

File metadata and controls

103 lines (70 loc) · 5.85 KB
Raw

Web Dev (LS 2020) Week 1: HTML

Networking Basics

This image summarizes everything about Networking Basics

Networking Basics

To know more, read How the web works?

Geting Started

Now that your are familiar with Git and Networking basics, let's start with the very basics of web development.

The first thing that you need to learn is how to create your webpage and put content into it. HTML is what does that job for you. So checkout this link to know what HTML actually is and how to use it to create your own webpage.

Text Editors

Having understood what HTML does, follow the following links to start creating your own HTML documents.

Advanced Code Editors (Optional)

Although the common text editors serve the basic purpose, it is often recommended to use advanced editors that make it easier for you to code seamlessly. The choice of code editors is entirely based on one's own preferences with each editor offering its own advantages. We'll be covering VS Code, in the links below:

  • Download

  • Emmet

    Few important emmets

    • ! : You can create HTML file and write your first letter '!' and press enter. You will have a HTML boiler plate ready for use.
    • lorem : Dummy text is very much important in Web designing, for checking how your text will look with formatting. Lorem serves us with exactly the same. Just write lorem and press enter and you will get some dummy words. Also if you want like 34 words, you just need to type lorem34 and it will give 34 dummy words!

  • Live Server Once you activate live server. You need not to reload your website. Just go live and everytime you save your changes in VS Code, it gets automatically updated in your web browser.

Some other famous code editors are Sublime Text (cross-platform, shareware), Atom (cross-platform, free), Notepad++(Windows, free).

First HTML Code

Once you have set up the code editor of your choice we can go ahead with creating you own webpage. First lets get an overview of a few ascepts for writing HTML.

If you prefer video tutorials over text articles here are some videos for you.

Advanced Learning

If you feel confident with the content covered till now and would like to explore HTML in detail visit the links below.

Assignment 1

Great going! If you have understood everything from the articles above, its time to start with some practice. The assignment will be used towards grading for this course. So, try to put in your best effort!

Task:

  • Create a Repo with the name: Roll_No_WEB_DEV (Eg: 190020043_WEB_DEV) (This will be used for submitting the assignment)

  • In the repo created, create a basic HTML page titled ‘About Me’’ which includes:

    • Your Name
    • Your Picture
    • Education
    • Hobbies
    • Ambitions
    • Any other thing you wish to see in your webpage

  • Use at least 6 out of the 11 given tags:

    • h1-h6
    • p
    • links
    • Img/audio/video/gif
    • lists(ul/ol)
    • style tags (b, i, center, br,hr etc)
    • form (text fields, label, button, etc)
    • div (must give ID/class to div)
    • semantic tags
    • table
    • Comments

  • Finally, host the webpage you created on GitHub/BigHome

Our Suggestions:

  • Since Git is also a version control System, we suggest you initially work with Github for hosting, since its very easy to update your work on Github, once your work is done, you can then host it on BigHome.
  • You must give ids and classes to every elementry tag, because it will be necessary when we do the CSS and JS part.

Extra Practice (Optional)

If you are already completed with this week's assignment, here are some websites that offer a good range of practice problems:

If you face any problems with anything mentioned in the articles above, feel free to discuss it on the Telegram group

Stay tuned for CSS tutorials coming next week!