- Use Django. Use Templates, Static Files, Dynamic and relative links to acheive that.
- Your final result should have at least 4 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.
-
- Path:
html/introduction/
- Path:
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.
- Path:
css/introduction/
- 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
-
Mini Project
- Create an article webpage from about "AI Revolution".
- Use HTML/CSS properties learned throughout the week. With images and videos if needed.
- Resources: Personal creativity and practice.
- Path:
article/ai/
- 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 a CV page about yourselft.
- Path:
careers/cv/
Remeber: a CV is:
A CV – or Curriculum Vitae – is an itemized list of a person's entire education, publications, accomplishments, notable projects, awards, honors, achievements, and professional experiences. In one document you're trying to sum up your whole career in detail, focusing mainly on the academic side.