Create a website with your own simple, custom CMS using HTML, CSS, JavaScript, Django, & Python! (Skillshare)

Offered by Skillshare,
Create a website with your own simple, custom CMS using HTML, CSS, JavaScript, Django, & Python! (Skillshare)

In the next few videos, I'm going to teach you how to create a completely custom, CMS-driven website from scratch using a Job Listing website as an example. *This is a step by step tutorial with explanations along the way. This class is mainly going to be for designers who have some HTML, CSS, and JavaScript experience, who are maybe tired of manually entering data for portfolio pages and want to create a more efficient solution.

Important (June 2020): Because of the long delay and because the technology has since been updated, setting up the Admin page is not included in the video lessons.
Learn more about using django-admin for Django 3.0 in the documentation.
You're free to take this class as a learning tool, but be aware that it uses an older version of Django and Python.
〰️
This class is also for web/front-end developers who want to take their back-end knowledge a bit further, get comfortable with using the command line, and start building web pages for clients without depending on existing CMS's.
A CMS, or content management system, is an application used to create and manage digital content. Some existing popular ones include Squarespace, Wix, and WordPress. While there's nothing wrong with using these CMS's, sometimes you don't want to navigate through complex frameworks or install a ton of plugins to get one thing done.
In this class, I'm going to teach you to create your CMS-driven website using familiar web development technologies and languages, plus give you an intro to using Python and Django.
It's going to be lightweight, custom, and the way I break down the code will be modular so that you can easily duplicate code and customize how your CMS works.
〰️
Notes:

  • Mac OSX preferred (you can also use PC, but please note that this class is completely taught using Mac and may not translate well for Windows users).
  • Some HTML, CSS, JavaScript knowledge required.
  • Python and Django knowledge NOT required.

Note: Please download the zip file attached before you get started as well as the README (you'll need to reference this for certain videos).
The packaged zip file includes the Design folder where you can find the Sketch file for the job listing website, as well as a folder with all the screens exported as png's. There's also the Development folder, which includes a folder with all the code for the finished website, as well as a folder with the skeleton project.
〰️
For this project, I'm going to be walking you through creating a custom CMS for a job listing website. The focus of the lessons will be on the CMS, so absolutely feel free to use your own website for the example.
We'll mainly be focusing on building the environment, including creating an admin login, admin dashboard, and forms for publishing and editing entries. I'll walk you through saving a job listing on your database through a form, and then linking that job listing database entry to your public website.
〰️
FAQ
Why do we need to use Python 2.7 and Django 1.11 if they aren't the latest versions?
We're using Python 2.7 to keep this lesson simple since this is what’s included in Mac OSX as of publication and it supports the use of libraries. The versions of Python and Django that you are using are important. Django 1.11 is the last version to support Python 2.7. For more info about version support, go to Django's FAQ page.
(
For the purposes of this class and because I don't want to bombard you with so much information, I've used Mac OSX's built-in Python 2.7, but best practice would be to use a Virtual Environment. Mac's built-in Python is great for learning, but not the best for development because it may be out of date. Please feel free to explore the world of Virtual Environments on your own!)
Where is the data from the CMS stored?
In the Finished Project from the zip file, you'll notice the file db.sqlite3. This is where your data is stored. By default, Django's configuration uses SQLite, a lightweight database that is included in Python, so you won’t need to install anything else to support your database.
Can I use the SQLite database for production?
In this case, yes. You can technically use SQLite for development and production, but for much heavier transaction loads there may be better options such as PostgreSQL or MySQL. Go here to learn more about using other databases.
〰️
Again, there are a lot of other things you can do for best practices and efficiency, such as using CSS preprocessors like SCSS, but it would've been a lot to cover for this one class. I'm still learning the best ways to teach, so please feel free to reach out with any questions and/or feedback!

Go to Class
MOOC List is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Related Courses

Introduction To HTML5 For Absolute Beginners (Skillshare) Skillshare
Skillshare

Introduction To HTML5 For Absolute Beginners (Skillshare)

Hi, welcome to this crash course on HTML5 for complete beginners. In this class, you will learn everything you need to know about getting started with web development. The first step in becoming a web developer is learning HTML. The latest version of HTML is HTML5 and I will walk you through everything you need to know to get started with it. HTML is based on tags. You write HTML content inside tags. Tags tell the browser how to display the content on the screen.

Self Paced
Self-Paced
Javascript Fun: Build a Number Match Game! (Skillshare) Skillshare
Skillshare

Javascript Fun: Build a Number Match Game! (Skillshare)

Welcome to the Javascript fun series! For web design or development, there are 3 must-know technologies, HTML, CSS, and Javascript. The main aim of the Javascript fun series is to take your knowledge of these 3 (only a little is required!), and put them into practice by building a series of educational, yet fun projects that show you exactly how they work perfectly together. Working on projects and solving problems is a great way to learn.

Self Paced
Self-Paced
Interactive Data Visualization: Getting Started with D3.js - V5 (Skillshare) Skillshare
Skillshare

Interactive Data Visualization: Getting Started with D3.js - V5 (Skillshare)

D3.js has become the standard for creating custom interactive data visualizations for the web. This feature-rich open source javascript library allows you to create dynamic and extremely diverse experiences that can interact with users and any other element on a web page. For programmers familiar with Javascript, it is not hard to pick up and run with D3 very quickly. For those with limited javascript experience, it can be intimidating.

Self Paced
Self-Paced
Web Design Essentials: Creating Marketing Homepages That Drive Results  (Skillshare) Skillshare
Skillshare

Web Design Essentials: Creating Marketing Homepages That Drive Results (Skillshare)

Design websites that drive results! In this 60-minute class, join Dennis Field — a designer and product evangelist for web prototyping leader InVision — as he shares how to refine your creative process, capitalize on feedback, and use best practices to design a marketing site that leads to conversions for your company. This class is perfect for freelance website and product designers, small web design teams, and everyone who wants to increase the effectiveness of their web design.

Self Paced
Self-Paced
How To Make A Wordpress Website - Elementor Tutorial (Skillshare) Skillshare
Skillshare

How To Make A Wordpress Website - Elementor Tutorial (Skillshare)

Come learn how to make a wordpress website in 1 hour! I will show you step by step to easily create your wordpress website in a few clicks! Lets Get Started! Its simple, gets your domain for your wordpress website. Install Wordpress. Install Your Wordpress Theme. Than simply install a plugin that will give you access to more than 1700+ elementor templates for free!

Self Paced
Self-Paced
How To Make A Wordpress Website -- Complete Beginners Guide (Skillshare) Skillshare
Skillshare

How To Make A Wordpress Website -- Complete Beginners Guide (Skillshare)

Want To Learn How To Make A Website With Wordpress? In this tutorial, I go step by step to show you how to build a wordpress website step by step! After you watch this video, you will be able to create a website from scratch with no experience. I use elementor and the oceanwp wordpress theme in this tutorial!

Self Paced
Self-Paced
Twitter API JavaScript Node Exercise (Skillshare) Skillshare
Skillshare

Twitter API JavaScript Node Exercise (Skillshare)

Twitter API JavaScript Node Exercise. Explore the Twitter Developer API connect from your local machine. Use AJAX JavaScript and Node to setup twitter search. Perfect course for beginners to explore the MASSIVE twitter API. This course will teach you how to setup a local server, connect the Twitter API and return data to output into your web page. Its amazing how much information is available on Twitter, connecting the API is easy and can provide real world working experience with JSON AJAX and APIs.

Self Paced
Self-Paced
Learn Python - The Fundamentals of Python Programming Language (Skillshare) Skillshare
Skillshare

Learn Python - The Fundamentals of Python Programming Language (Skillshare)

In this class we'll go over the building blocks of python. Once we understand all of these concepts, we'll be able to build anything and everything in python. Class Project! Let's make our own class object that we'll be able to initialize and creating instances of to help us in the future. Think about something you do that could be redundant in nature, tedious, or something along those lines.

Self Paced
Self-Paced
Introduction to PHP (Skillshare) Skillshare
Skillshare

Introduction to PHP (Skillshare)

In this course, You will learn about What is PHP and How it Works? Right after this course, you will be able to explain concepts like Client Server Model, Request Response Pattern and Describe about PHP Language in your own words. This is the second course topic that you should take which helps you to understand the basic concepts Why PHP was developed and What problem PHP language solves. This course is a Introduction to PHP and will introduce you to Core Web Concepts and PHP.

Self Paced
Self-Paced
Kotlin For Beginners: References, Immutability (Const and Val), Properties, Variables, Data Classes (Skillshare) Skillshare
Skillshare

Kotlin For Beginners: References, Immutability (Const and Val), Properties, Variables, Data Classes (Skillshare)

In this short class, you will learn the fundamentals of how to represent information virtually in a Kotlin program. About half of what we do as programmers is design data structures to represent real world information virtually, and it turns out that there are good and bad ways to do this! One of the most important takeaways of this class, is that it is critically important to separate things which change (mutable) from things which don't change (immutable).

Self Paced
Self-Paced
WordPress for Beginners - Understand WordPress Quickly (Skillshare) Skillshare
Skillshare

WordPress for Beginners - Understand WordPress Quickly (Skillshare)

Learn how to work with WordPress and develop a website using AIT WordPress Themes. No coding or experience required. This class presents the basics of working with WordPress and offers practical screencast tutorials to teach you how to use our themes when building a new website. In short videos, you can find answers to FAQs that beginners most often encounter when getting familiar with WordPress. The course contains more than one hour of video tutorials.

Self Paced
Self-Paced