Website Building: Front-End Roadmap

Main Objectives

• Create a website using HTML
• Design the website based on the front-end roadmap
• Make the website suitable for various views like desktop, mobile, and tablet

Technical Aspects

• HTML
• CSS
• JavaScript

Website Design

• Convert design PNG image to the website
• Three types of design: desktop, mobile, and tablet
• The same code should appear suitable in all three places

Website Development Stages

1. Setting up the folder structure
2. Creating the index.html file
3. Setting up boilerplate code
4. Viewing the design
5. Writing code:
   • Heading (h1)
   • Horizontal line (<hr>)
   • Content (paragraphs)
   • Creating links (anchor tag)
   • Images (<img> tag)

Using Text

• Setting font family
• Formatting:
  • Bold
  • Italic
  • Links
  • Bullet points
  • Numbered list

Important Points

• Searching: with the help of Google
• HTML entities
• Use of <hr>
• Setting up height and width in the <img> tag
• Adjustable design of the website

Extra Tips

• Proper use of paragraph tags
• Setting minimum and maximum width
• Formatting code in your way

Final Thoughts

• Full design of the website ready
• Website suitable for different screen resolutions
• Website created using only HTML

Tools and Links

• Web development folder
• Sample websites of professors from various universities