Scribd
Upload
4 views3 pages

Full WebDev Cheatsheet

This document provides a comprehensive cheatsheet for Django, HTML, CSS, JavaScript, and Bootstrap, detailing project and app structures, model definitions, template tags, and static file handling in Django. It also covers HTML semantic tags, form structures, multimedia elements, CSS advanced features like pseudo-classes and animations, JavaScript basics and DOM manipulation, as well as Bootstrap components and utilities. Each section includes essential code snippets and explanations for quick reference.

Uploaded by

hermes.ar90745
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views3 pages

Full WebDev Cheatsheet

This document provides a comprehensive cheatsheet for Django, HTML, CSS, JavaScript, and Bootstrap, detailing project and app structures, model definitions, template tags, and static file handling in Django. It also covers HTML semantic tags, form structures, multimedia elements, CSS advanced features like pseudo-classes and animations, JavaScript basics and DOM manipulation, as well as Bootstrap components and utilities. Each section includes essential code snippets and explanations for quick reference.

Uploaded by

hermes.ar90745
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Django, HTML, CSS Cheatsheet with Explanations

Django Full Cheatsheet


1. Project Structure:
- manage.py: Command-line utility
- settings.py: Project settings
- urls.py: URL declarations
- wsgi.py/asgi.py: Server gateways

2. App Structure:
- models.py: Database models
- views.py: Logic/Controllers
- templates/: HTML templates
- static/: CSS, JS, images

3. Models:
from django.db import models
class MyModel(models.Model):
name = models.CharField(max_length=100)
created = models.DateTimeField(auto_now_add=True)

4. Forms:
- HTML form or Django form (forms.Form / forms.ModelForm)

5. Template Tags:
- {% for x in list %} ... {% endfor %}
- {% if condition %} ... {% endif %}
- {% include "file.html" %}
- {% url 'route_name' arg %}

6. Static & Media:


- {% load static %}
- <img src="{% static 'img.jpg' %}">
- MEDIA_URL/MEDIA_ROOT setup for user uploads

7. Middleware, Authentication, Sessions, Decorators


- @login_required, request.user, messages framework

HTML Extended Cheatsheet


1. Semantic Tags:
- <header>, <nav>, <main>, <section>, <article>, <footer>

2. Forms:
- <form action="" method="post">
<input type="text" name="user">
<input type="submit">
</form>

3. Tables:
- <table><tr><td></td></tr></table>
Django, HTML, CSS Cheatsheet with Explanations

4. Multimedia:
- <video src="movie.mp4" controls></video>
- <audio src="sound.mp3" controls></audio>

CSS Advanced Cheatsheet


1. Pseudo-classes:
- :hover, :first-child, :nth-child(n)

2. Animations:
@keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.fade-in { animation: example 2s; }

3. Flexbox & Grid:


- display: flex; justify-content; align-items
- display: grid; grid-template-columns

4. Variables:
:root { --main-color: blue; }
color: var(--main-color);

JavaScript Cheatsheet
1. Basics:
- Variables: let, const, var
- Functions: function greet() {}, () => {}
- Data types: String, Number, Boolean, Object, Array

2. DOM Manipulation:
- document.getElementById('id')
- document.querySelector('.class')
- element.innerText / innerHTML

3. Events:
- element.addEventListener('click', function)

4. Control Structures:
- if, else, for, while, switch

5. Fetch API:
fetch('/api').then(res => res.json()).then(data => ...);

Bootstrap Cheatsheet
1. Getting Started:
- Link CDN: <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
Django, HTML, CSS Cheatsheet with Explanations

2. Layout:
- Container: <div class="container">
- Grid: <div class="row"><div class="col-md-6">

3. Components:
- Buttons: <button class="btn btn-primary">
- Cards: <div class="card"><div class="card-body">
- Navbar: <nav class="navbar navbar-expand-lg navbar-light bg-light">

4. Utilities:
- Padding/Margin: p-3, m-2
- Text: text-center, text-danger
- Display: d-flex, d-none

You might also like