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

Build Your Online Portfolio Without Writing Code (Skillshare) Skillshare
Skillshare

Build Your Online Portfolio Without Writing Code (Skillshare)

With the web becoming more and more involved in our daily lives, being able to create your own little corner of the web has never been more important (or exciting). In under one hour with Webflow's Mat Vogels, you'll cover a variety of different topics, including: Why you should be online in the first place; Basic web concepts, like the box model and responsive design; Building a website from scratch; Publishing a website.

Self Paced
Self-Paced
How To Make A Real Estate Website With Wordpress 2017 (Skillshare) Skillshare
Skillshare

How To Make A Real Estate Website With Wordpress 2017 (Skillshare)

n this video, I will teach you how to make a fully responsive real estate wordpress website. This wordpress tutorial will help real estate agents, realtors, or property managers create a fully functional real estate wordpress website. The theme i use in this tutorial is the agentpress pro theme created by studiopress. Trust me, i spent about 1 month researching real estate wordpress themes and this was by far the best real estate websites. The theme is very easy to use and very responsive on the mobile devices.

Self Paced
Self-Paced
How To Create A Web Hosting Business With Wordress - WHMCS Tutorial (Skillshare) Skillshare
Skillshare

How To Create A Web Hosting Business With Wordress - WHMCS Tutorial (Skillshare)

Welcome! In This Wordpress Tutorial, I Will Show you How to use the WHMCS App to create your own web hosting business from scratch! The WHMCS platform is an automated platform that basically allows your to create your own web hosting company. People can come to your wordpress website, purchase a domain and hosting and also install wordpress. Many companies use this same platform like namehero.com and a2hosting.

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
ES6 JavaScript Classes the Easy Way (Skillshare) Skillshare
Skillshare

ES6 JavaScript Classes the Easy Way (Skillshare)

In 2015, the JavaScript programming language got a major facelift with many improvements to the syntax and tons of new features. This new version is known as ES6, or ES2015, and each year since an updated version has been released. ES6 Classes, as well as instance and static methods, are vitally important to know and understand because so many projects and companies are migrating to the newest version of JavaScript. Many Front End libraries, such as React, rely heavily on the new Class syntax.

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 2018 - Divi Theme Tutorial (Skillshare) Skillshare
Skillshare

How To Make A Wordpress Website 2018 - Divi Theme Tutorial (Skillshare)

Why Take This AMAZING Course? I am a highly rated instructor on udemy. I have over 400,000 views a month on tutorials with positive reviews! Use The #1 Selling Theme for Wordpress On The PLANET. I Have Helped Teach And Create Over 500 Wordpress Websites! Get a Modern And Amazing Look For Your Website That Will Impress! Learn From A Professional Who Creates Websites For a Living with over 6,000 Visits! THE MOST UPDATE AND MODERN TUTORIAL. Dont Settle For Outdated Content!; Get A fully Responsive Website And Mobile Responsive; Over 15,000,000 Minutes Watched. Over 4 Million Views. In 180 Countries.

Self Paced
Self-Paced
Javascript Fun: Build a Photo Effects App! (Skillshare) Skillshare
Skillshare

Javascript Fun: Build a Photo Effects App! (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
Javascript Fun: Build a Tip Calculator! (Skillshare) Skillshare
Skillshare

Javascript Fun: Build a Tip Calculator! (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
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
How To Make A WordPress Blog For Beginners Step By Step (Skillshare) Skillshare
Skillshare

How To Make A WordPress Blog For Beginners Step By Step (Skillshare)

Hi, in this class I’m going to show you how to start blogging and create a beautiful blog which is perfect for 2018 and beyond! I’ve been making websites and blogs and also teaching how to properly set them up for years now and I get bombarded with questions on a daily basis like…How do I start a blog? What’s the easiest way to get started without overwhelm? Which platform should I use?

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