My Learning Journey
Exploring web development, design, and everything in between
← Back to PortfolioDay 1
HTMLHTML Basics
On the first day, I dove into the basics of HTML. I learned how to structure an HTML webpage using VS Code and explored various HTML tags such as headings, paragraphs, lists, and the div tag.
Topics Covered:
- HTML document structure and DOCTYPE declaration
- Heading tags (h1 to h6) and their semantic importance
- Paragraph, bold, italic, and other text formatting tags
- Lists (ordered, unordered, and definition lists)
- Div and span elements for grouping and styling
- Basic attributes like id, class, and style
- HTML comments and best practices
Day 2
HTMLWorking with Images & Links
On day two, I learned how to use the img tag to add images and the a tag to create hyperlinks. I also learned to work with superscripts and subscripts for formatting content, and explored different types of links including internal, external, and anchor links.
Topics Covered:
- Image tags, src, alt, and other attributes
- Hyperlinks and anchor tags with href attribute
- Superscript and subscript formatting for scientific notation
- Linking to external resources and internal pages
- Image optimization techniques and formats (JPEG, PNG, SVG)
- Creating bookmark links within the same page
- Using target attribute to control link behavior
Day 3
HTMLAdvanced HTML & Forms
On the third day, I explored more advanced HTML concepts, including creating tables with table elements and building forms to collect user input. It was a great hands-on experience to understand HTML structure better, and I learned about form validation and accessibility considerations.
Topics Covered:
- HTML table structure with thead, tbody, and tfoot
- Form elements and attributes for user input
- Input types (text, email, password, radio, checkbox, etc.)
- Form validation basics using HTML5 attributes
- Structuring complex forms with fieldset and legend
- Select dropdowns, textareas, and other form controls
- Accessibility considerations with labels and ARIA attributes
Day 4
CSSIntroduction to CSS
On the fourth day, we started learning CSS (Cascading Style Sheets). We covered the basics of CSS, its syntax, and how it is applied to style websites. We explored basic properties like background-color, color, font-size, font-family, and text-align, and learned about different ways to include CSS in HTML documents.
Topics Covered:
- CSS syntax, selectors, and specificity
- Color systems (named colors, HEX, RGB, HSL)
- Background properties and gradients
- Typography and font properties (family, size, weight)
- Text alignment, spacing, and decoration
- Inline styles vs internal vs external CSS
- CSS comments and organization best practices
- Basic layout with display properties
Day 5
CSSAdvanced CSS Properties
On the fifth day we covered advanced CSS properties. We learned about the box model in CSS, which includes content, padding, border, and margin. This box model is used to differentiate sections of a webpage. We also explored the display property, which is used to style elements, including the display: flex property and various positioning methods such as relative, absolute, and fixed.
Topics Covered:
- CSS Box Model (content, padding, border, margin)
- Display properties (block, inline, inline-block, none)
- Positioning (relative, absolute, fixed, sticky)
- Flexbox layout and its properties
- Responsive design principles and media queries
- CSS transitions and basic animations
- Pseudo-classes and pseudo-elements
- CSS variables for maintainable code
Day 6
JavaScriptJavaScript Basics
On the sixth day, I started learning JavaScript, the programming language that makes web pages interactive. I learned about variables, data types, operators, and basic control structures. JavaScript allows us to manipulate HTML and CSS, handle user interactions, and create dynamic content.
Topics Covered:
- JavaScript syntax and basic structure
- Variables (var, let, const) and data types
- Operators (arithmetic, comparison, logical)
- Conditional statements (if, else, switch)
- Loops (for, while, do-while)
- Functions and function expressions
- Basic DOM manipulation
- Event handling basics
function showMessage() {
alert(message);
}
// Call the function
showMessage();
Interactive Demo: Simple Calculator
Enter two numbers and see JavaScript in action:
Day 7
JavaScriptAdvanced JavaScript Concepts
On the seventh day, I delved into more advanced JavaScript concepts including objects, arrays, and more complex functions. I learned about scope, closures, and the concept of 'this' in JavaScript. These concepts are fundamental to writing efficient and maintainable JavaScript code.
Topics Covered:
- Objects and object-oriented programming basics
- Arrays and array methods (map, filter, reduce)
- Scope (global, function, block) and hoisting
- Closures and higher-order functions
- The 'this' keyword and its behavior
- ES6 features (arrow functions, template literals)
- Error handling with try/catch
- Asynchronous JavaScript basics
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const evenNumbers = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((acc, num) => acc + num, 0);
// Object example
const person = {
name: "John",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
Interactive Demo: Array Manipulation
See how JavaScript can manipulate arrays: