Web development learnings from https://scrimba.com/links/htmlandcss & https://www.youtube.com/watch?v=a_iQb1lnAEQ&t=79s :
- 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.
- 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.
- 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.
- 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.
- 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.