- Use Django. Use Templates, Static Files, Dynamic and relative links to acheive that.
- Your final result should have at least two web pages (you can create more while learning!)
A Suggested learning plan for HTML/CSS with resources. You'll find more resources submitted to discord.
Goals: Understand the basic structure of a web page and essential HTML elements.
-
Basic Structure
- Learn about HTML tags and the structure of an HTML document.
- Create your first HTML file with
<!DOCTYPE html>,<html>,<head>, and<body>tags. - Resources: MDN Web Docs - HTML Basics
-
Text and Formatting
- Learn about headings (
<h1>to<h6>), paragraphs (<p>), bold (<b>), and italic (<i>). - Practice creating and formatting text.
- Resources: W3Schools - HTML Elements
- Learn about headings (
-
Links and Images
- Learn how to create links (
<a>) and add images (<img>). - Understand attributes like
hrefandsrc. - Resources: W3Schools - HTML Links, HTML Images
- Learn how to create links (
-
Lists and Tables
- Learn about ordered (
<ol>) and unordered (<ul>) lists, and list items (<li>). - Introduction to tables (
<table>,<tr>,<td>,<th>). - Resources: MDN Web Docs - HTML Lists, HTML Tables
- Learn about ordered (
-
Forms and Input
- Learn about forms (
<form>) and input elements (<input>,<textarea>,<button>,<select>, etc.). - Resources: MDN Web Docs - HTML Forms
- Learn about forms (
-
Review and Practice
- Review all the topics covered so far.
- Build a simple web page incorporating text, images, links, lists, tables, and a form.
- Resources: Any HTML tutorial platform for practice (e.g., Codecademy, FreeCodeCamp).
-
Mini Project
- Create a webpage of your choosing. examples:a list of hobbies, favorite links,a contact form, about a football team you support, etc.
- Resources: Personal creativity and practice.
Goals: Understand the basics of CSS and how to style HTML elements.
-
Basic Syntax and Selectors
- Learn about the structure of CSS rules (selectors, properties, and values).
- Understand different types of selectors: element, class, ID, and universal.
- Resources: MDN Web Docs - CSS Basics
-
Colors and Backgrounds
- Learn how to apply colors using names, HEX, RGB, and HSL values.
- Learn about background properties:
background-color,background-image,background-repeat, etc. - Resources: W3Schools - CSS Colors, CSS Backgrounds
-
Text Styling
- Learn about font properties:
font-family,font-size,font-weight,font-style, andtext-align. - Understand how to use Google Fonts.
- Resources: Google Fonts, MDN Web Docs - CSS Fonts
- Learn about font properties:
-
Unit of Measurements & Positions
- Learn about Unit of Measurements & Positions
- Resources: Unit of Measurements. CSS Posiition
-
Box Model
- Understand the box model:
margin,border,padding, andcontent. - Learn how to use
width,height,box-sizing. - Resources: MDN Web Docs - Box Model
- Understand the box model:
-
Layout Basics
- Introduction to display properties:
block,inline,inline-block,none. - Learn about CSS positioning:
static,relative,absolute,fixed. - Resources: W3Schools - CSS Layout
- Introduction to display properties:
-
Flexbox Basics
- Introduction to Flexbox layout model.
- Learn properties like
display: flex,justify-content,align-items, andflex-direction. - Resources: CSS Tricks - A Complete Guide to Flexbox
-
Mini Project
- Create a styled version of the personal webpage from
1section. - Use various CSS properties learned throughout the week.
- Resources: Personal creativity and practice.
- Create a styled version of the personal webpage from
Goals: Deepen understanding of HTML and CSS with advanced concepts and techniques.
-
1: Semantic HTML
- Learn about semantic HTML tags:
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>. - Resources: MDN Web Docs - HTML5 Semantic Elements
- Learn about semantic HTML tags:
-
2: Responsive Design
- Learn about media queries and responsive design principles.
- Understand how to create a responsive layout that adapts to different screen sizes.
- Resources: MDN Web Docs - Responsive Design
-
Day 3: CSS Transitions and Animations
- Learn how to add transitions (
transition-property,transition-duration) and animations (@keyframes,animation-name). - Resources: MDN Web Docs - CSS Transitions, CSS Animations
- Learn how to add transitions (
-
4: Advanced Selectors and Pseudo-classes
- Learn about attribute selectors, pseudo-classes (
:hover,:nth-child), and pseudo-elements (::before,::after). - Resources: MDN Web Docs - Selectors, Pseudo-classes, Pseudo-elements
- Learn about attribute selectors, pseudo-classes (
-
5: CSS Frameworks
- Introduction to popular CSS frameworks like Bootstrap and Tailwind CSS.
- Learn how to incorporate a framework into your project.
- Resources: Bootstrap - Introduction, Tailwind CSS - Getting Started
-
6: Accessibility and Best Practices
- Learn about web accessibility and how to make your site accessible.
- Understand best practices for writing clean and maintainable CSS.
- Resources: WebAIM - Introduction to Web Accessibility, MDN Web Docs - CSS Best Practices
- Practice Regularly: Consistency is key to mastering HTML and CSS.
- Build Projects: Apply what you learn by building small projects.
- Join Communities: Engage with online communities (e.g., Stack Overflow, Reddit, Twitter) for support and inspiration.
- Stay Updated: Web technologies evolve; keep learning and exploring new techniques.
- Apply all you've learned on your webpage.
- Create another webpage (an article, informational, contact us page, etc.) and apply on it all you've learned.