devanshi-cloud / web-development

Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges.

Web-Development

Web development learnings from https://scrimba.com/links/htmlandcss & https://www.youtube.com/watch?v=a_iQb1lnAEQ&t=79s :

1. HTML and CSS Fundamentals:

• Understand HTML tags and their structure.
• Learn how to write a news article using HTML.
• Use the image tag to include images in your web page.
• Gain proficiency in nesting HTML elements.

2. Styling with CSS:

• Write CSS rules to style your web pages.
• Manipulate width, margins, padding, and borders of elements.
• Use classes and IDs for targeted styling.
• Learn about the box model and how it affects element layout.

3. Layout and Positioning:

• Explore different layout techniques like flexbox.
• Center elements horizontally and vertically.
• Use margins, padding, and inheritance for precise control over spacing.
• Create responsive designs with media queries.

4. Interactive Elements and User Experience:

• Implement interactive elements like buttons and input fields.
• Enhance user experience by applying hover effects.
• Learn about font selection and usage for better readability.
• Incorporate Google Fonts and custom fonts using @font-face.

5. Deployment and Project Management:

• Build complete websites with multiple pages and components.
• Deploy your websites using hosting services.
• Understand the basics of version control and using tools like GitHub Desktop.
• Gain experience in troubleshooting and refining your web projects.

In this course on HTML and CSS, I've learned how to create and style web content. Starting with HTML, I gained an understanding of fundamental tags for structuring content, writing articles, and incorporating images. I learned about nesting elements and even experimented with modifying websites using HTML. Interactive elements like buttons and input tags were introduced, and I built a Google clone using these skills.

Transitioning to CSS, I delved into styling by setting widths, using margins and padding for spacing, and manipulating block and inline elements. I grasped the concept of CSS classes and applied various styles to elements, including borders, backgrounds, and fonts. Flexbox became a valuable tool for layout, enabling me to center content efficiently.

As I progressed, I developed more complex projects. I built a digital business card, fine-tuning image placement, adding styles, and using flexbox for layout. In another project, I crafted a space exploration site, incorporating background images, Google fonts, and even text shadows for readability. Additionally, I created a dynamic birthday gift site, employing flexbox for layout, hover effects, and background gradients, making it personalized and appealing.

Finally, I embarked on a solo project, constructing a hometown homepage, showcasing my cumulative skills. Throughout the course, I not only learned the technical aspects of web development but also the creativity and problem-solving required to design and deploy functional and visually appealing websites.