yktyWeb Design Lecture Notes for Beginners
1. Introduction to Web Design
Definition: Web design is the process of creating websites. It encompasses several
aspects, including webpage layout, content production, and graphic design.
Difference Between Web Design and Web Development
o Design focuses on the look and feel.
o Development involves coding and functionality.
Importance of Web Design
o First impressions
o User experience (UX)
o Branding and professionalism
2. Basic Components of a Website
HTML (HyperText Markup Language)
o Structure of a webpage
o Common tags: <html>, <head>, <body>, <h1>, <p>, <a>, <img>
CSS (Cascading Style Sheets)
o Styling: colors, fonts, layout
o Example: color, font-size, margin, padding
JavaScript (Basics)
o Adds interactivity
o Example: buttons, forms, sliders
3. Web Design Principles
Layout and Composition
o Grid systems
o Visual hierarchy
Typography
o Readable fonts
o Font pairing
Color Theory
o Choosing color schemes
o Contrast and accessibility
Whitespace
o Improves readability and focus
Responsive Design
o Mobile-first approach
o Media queries
4. Tools for Web Design
Text Editors
o VS Code, Sublime Text
Graphic Design Tools
o Figma, Adobe XD, Canva
Frameworks
o Bootstrap (CSS)
o Tailwind CSS
Website Builders (for non-coders)
o WordPress, Wix, Squarespace
5. Website Planning Process
1. Define Purpose and Goals
2. Research and Inspiration
3. Create a Sitemap
4. Wireframe the Layout
5. Design the Interface
6. Develop the Website
7. Test and Launch
6. Accessibility and SEO Basics
Accessibility
o Use of alt text for images
o Proper heading structure
SEO (Search Engine Optimization)
o Keyword usage
o Meta tags and descriptions
o Fast loading times
7. Hosting and Domains
What is a Domain?
o Example: [Link]
What is Web Hosting?
o Server space to store your website files
Popular Hosting Providers
o Bluehost, GoDaddy, Hostinger
8. Practical Project Idea
Create a Personal Portfolio Website
Home
About Me
Projects
Contact Form
9. Tips for Beginners
Start small and practice often
Follow design trends and examples
Don’t overload with animations and colors
Focus on usability and simplicity
Learn from feedback
HTML Coding Lecture Notes
1. Introduction to HTML
HTML stands for HyperText Markup Language.
It is the standard language for creating webpages.
HTML describes the structure of a webpage using tags.
2. Basic Structure of an HTML Document
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>: Declares the document type (HTML5).
<html>: Root element of the HTML document.
<head>: Contains meta-information (title, styles, etc.).
<body>: Contains the content visible on the webpage.
3. Common HTML Tags
Tag Description
<h1> to <h6> Headings (largest to smallest)
<p> Paragraph
Tag Description
<br> Line break
<hr> Horizontal rule
<a href=""> Anchor (link)
<img src="" alt=""> Image
<ul>, <ol>, <li> Lists (unordered, ordered, list item)
<div> Division (block-level container)
<span> Inline container
<strong>, <em> Bold and italic emphasis
4. Attributes in HTML
Provide additional information about elements.
Example:
html
CopyEdit
<a href="[Link] target="_blank">Visit Example</a>
Common Attributes:
href – URL for links
src – Image source
alt – Alternate text for images
style – Inline CSS styling
id and class – Used for styling and scripting
5. Forms in HTML
html
CopyEdit
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username">
<input type="submit" value="Submit">
</form>
Form Elements:
<input> – Various types (text, password, checkbox, radio, submit)
<label> – Defines labels for inputs
<textarea> – Multi-line input
<select> and <option> – Dropdown menu
6. HTML Tables
html
CopyEdit
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
Tags:
<table> – Table container
<tr> – Table row
<th> – Header cell
<td> – Data cell
7. HTML Media
html
CopyEdit
<img src="[Link]" alt="Sample Image">
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
8. Semantic HTML Elements
Used to improve accessibility and SEO:
Tag Purpose
<header> Top of the page/section
<nav> Navigation links
<main> Main content
<article> Independent content
<section> Thematic grouping
<footer> Bottom content
<aside> Side content
9. HTML Best Practices
Always use proper nesting of tags.
Use semantic tags where possible.
Validate HTML using W3C Validator.
Use comments <!-- comment --> for documentation.
10. HTML with CSS and JavaScript
Link CSS:
html
CopyEdit
<link rel="stylesheet" href="[Link]">
Inline CSS:
html
CopyEdit
<p style="color: red;">This is red text.</p>
Link JS:
html
CopyEdit
<script src="[Link]"></script>