Learn to Code a Website

Learn To Code Your Own Website. Here are a few good go-to resources.

► W3 Schools "is a web developer's information website, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, and JQuery, covering most aspects of web programming. W3Schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally."

► Microsoft Virtual Academy "Free Microsoft training delivered by experts. Learning paths are curated courses brought to you by Microsoft Virtual Academy (MVA) to help you increase your proficiency in the latest technologies. Build valuable skills through video tutorials, demos, assessments, and more. Plus, earn MVA badges for completed learning paths, and share them through email or social media, such as LinkedIn, Twitter, and Facebook. Get started today!"

 

► Codecademy Our courses are designed to keep you on track, so you learn to code “today” not “someday.”

 

► SitePoint Extensive collection of featured articles, books, and courses. Learn HTML5, CSS3, JavaScript, PHP, mobile app development, Responsive Web Design.


Linux

Find out how you can use Ubuntu to power your AI and ML ambitions from developer workstations to the cloud.

► Download

An easy and elegant way to use your computer, GNOME 3 is designed to put you in control and get things done.

► Download

Less setup, more innovation. Choose a flavor of Fedora streamlined for your needs, and get to work right away.

► Download

Kubuntu is an operating system built by a worldwide community of developers, testers, supporters, and translators.

► Download

Linux Tools

Go-to tools to help you get Linux installed on your computer.

UNetbootin

UNetbootin allows you to create bootable Live USB drives for Ubuntu and other Linux distributions without burning a CD. You can either let UNetbootin download one of the many distributions supported out-of-the-box for you, or supply your own Linux .iso file.

► Download

Rufus

Rufus is a small utility that helps format and creates bootable USB flash drives, such as USB keys/pen drives, memory sticks, etc.

► Download

Etcher

Etcher is a free and open-source image burner with support for Windows, OS X, and GNU/Linux. It makes USB and SD card image burning as simple and fast as possible.

► Download


Web Design

36 Examples of Web Design Homepage Layout Concepts.

Plugins

Here's a handy FREE hit counter for your site.


Add a LIKE button to your site.


Try Nibbler

Nibbler is a free tool for testing websites. Enter the address of any website and Nibbler will give you a report scoring the website out of 10 for key areas, including accessibility, SEO, social media, and technology. Nibbler is completely free but limited to three reports.


Designers Resources

• 1st Web Designer All the Web Design Resources You Could Ask For.

• Square Space The leader in website design. No matter what kind of site you need, Squarespace is the best way to stand out online.

• Wix We believe anything is possible with the right website builder. Whether you're about to create a website for the first time or you're a long time pro, we've got you covered. You have two ways to start: Get a free website designed for you with Wix Artificial Design Intelligence or get total design freedom with the Wix Editor. You can always add advanced functionality to your website with Wix Code. It’s time to get your professional website.

• Shopify Whether you sell online, on social media, in-store, or out of the trunk of your car, Shopify has you covered.


 


"Content Management System"

Spectra

This website is being built using Spectra. A brand new Content Management System I am designing.

Project development by Mike here at Papa Mike's Creations.


Spectra is Responsive/Fluid in action and a new Content Management System. It is written in PHP7, HTML5, and CSS3 with MySQL support that will allow it's users to create websites that are highly configurable. I have a long way to go before it is ready to be released so check back here from time to time to see what's changed. This is the official testing site and you will see the content here change on a regular basis. As the plugin's become available I will add them here so you can see them.  Nothing is available for download/sharing yet.


"About Spectra (Last Updated: 7 July 2020)"

Spectra is a new Content Management System (CMS) that is a work in progress. It is not a fork but a brand new platform that you can use to create a very customizable blog or any other style website.   It is fully HTML5 and CSS3 compliant with W3C worldwide standards and is also UTF8  (8-bit Unicode Transformation Format) compliant.

Its main purpose will be to allow you to build a website from scratch and add the content you think fits your overall purpose.  I have not added member registration or interaction but will do so later in the build. Spectra is highly configurable and comes packaged with the following:

- Change the overall look and feel of the site in the ACP's powerful theme editor/builder.

- Activate, style, and add images to the slider.

- Populate the menu automatically or create links as you need them using the menu builder.

- Choose the site's overall width.

- Either choose from (3) pre-styled themes or create your own using the flexible theme creator utility.

- Allow members to choose their own theme or set a default theme for your site.

- Create new pages on-the-fly as needed.

- Add to the left/right sidebar content blocks as needed.

- Choose how many columns (1, 2, or 3) you want to show on the page and which ones. You can choose to turn on/off any content you have created.

- Choose whether you want the slider and left/right sidebar to show in pages.

- It comes packaged with both customizable image and video galleries.

- It allows users to create and add their own plugins.

Spectra comes with a feature-rich ACP. Screenshots are available here.

 

I will add to this as the build continues.


"Screenshot of Editor"

Here is a screenshot of CKEditor in the ACP.


"CJ Content Slider"

Coders Junction Content Slider

This is the most comprehensive content slider I have designed to date. You can have a total of 20 slides with captions. The slider was written in PHP and is highly configurable and simple to setup and configure. You can add and remove individual slides on the fly by simply turning them on or off. To get started go to the img folder and add your images. Then open configure.php and start creating your slider.

Simply follow the instructions inside that file and you will have your slider ready to add to your website. And as with everything I create, the slider is fully responsive/fluid in design.

Demo Of The Slider

Download


"Mobirise Website Builder"

Mobirise is a free desktop application that you can use to build your website. I downloaded and installed Mobirise to give it a test drive and found it to be very easy to use. There is no guesswork at all, you simply open the app on your desktop, create your new site, and start dragging blocks onto the page. It has a library full of pictures and backgrounds to use or you can choose from your own collection. There is also a huge selection of fonts to choose from at the Google font library or you can use it from your own collection.

Mobirise is an application I would recommend to you whether you are new to web design or have tried other editors.

 Try Mobirise

 

What is Mobirise?

Mobirise is a free offline app for Windows and Mac to easily create small/medium websites, landing pages, online resumes, and portfolios. 1800+ beautiful website blocks, templates, and themes help you to start easily.

Who is it for?

Mobirise is perfect for non-techies who are not familiar with the intricacies of web development and prefer to work as visually as possible. Also great for pro-coders for fast prototyping and small customers' projects.

Why Mobirise?

Key differences from traditional website builders: Minimalistic, extremely easy-to-use interface; Mobile-friendliness, latest website blocks, and techniques "out-the-box"; Free for commercial and non-profit use.


"Ubuntu"

Ubuntu is a free desktop operating system. It’s based on Linux, a massive project that enables millions of people around the world to run machines powered by free and open software on all kinds of devices. Linux comes in many shapes and sizes, with Ubuntu being the most popular iteration on desktops and laptops.

• Ubuntu "Ubuntu Tutorials are project-based, step-by-step guides to doing amazing things with Ubuntu. From installing the OS in the first place to packaging your first snap, we're here to help you on your way."

• Tutorials Point "This tutorial looks at the various aspects of the Ubuntu Operating system. It discusses various features, flavors, and working of the Ubuntu desktop edition. A comparison is made against software which we would normally find on a Windows operating system. There are chapters that focus on the server version of Ubuntu. This tutorial also includes separate chapters for those who are interested in understanding the virtual machines and cloud aspects of Ubuntu."

• Lifewire "Ubuntu (pronounced "oo-boon-too") is one of the most popular desktop Linux operating systems. The term Ubuntu derives from South Africa and roughly translates to "humanity toward others," a nod to the Ubuntu project's commitment to the principles of open-source software development. It is free to install and free to modify, although donations to the project are welcome."

• Make Use Of (MUO) "So you’re curious about Linux, and you heard Ubuntu is a great place to start? Maybe you’ve heard of Ubuntu and have no idea about this thing called Linux? Either way, you’ve come to the right place. This guide will teach you everything you need to know about Ubuntu in easy-to-understand language."


"Gnome"

• Gnome "Free Microsoft training delivered by experts. Learning paths are curated courses brought to you by Microsoft Virtual Academy (MVA) to help you increase your proficiency in the latest technologies. Build valuable skills through video tutorials, demos, assessments, and more. Plus, earn MVA badges for completed learning paths, and share them through email or social media, such as LinkedIn, Twitter, and Facebook. Get started today!"


"Fedora"

• Fedora Our courses are designed to keep you on track, so you learn to code “today” not “someday.”

Fedora Spins

If you prefer an alternative desktop environment such as KDE Plasma Desktop or Xfce, you can download a Fedora Spin for your preferred desktop environment and use that to install Fedora, pre-configured for the desktop environment of your choice.

Learn more ...

Fedora Labs

Fedora Labs is a selection of curated bundles of purpose-driven software and content as curated and maintained by members of the Fedora Community. These may be installed as standalone full versions of Fedora or as add-ons to existing Fedora installations.

Learn more ...

Fedora Alt Downloads

The Fedora Alternative Downloads are either special-purpose - for testing, for specific architectures - or are more standard versions of Fedora in alternative formats such network installer format or formatted for bittorrent download.

Learn more ...


"Kubuntu"

• Kubuntu Extensive collection of featured articles, books, and courses. Learn HTML5, CSS3, JavaScript, PHP, mobile app development, Responsive Web Design.

Kubuntu is an official flavor of the Ubuntu operating system which uses the KDE Plasma Desktop instead of the GNOME desktop environment. As part of the Ubuntu project, Kubuntu uses the same underlying systems.



Coding Resources

 ► PHP 7
is the most used programming language today. There is a multitude of CMS applications that are built primarily on PHP, including WordPress, Joomla, and so many more. Follow the links to learn more about this highly used programming language.

 ► W3C Schools

 ► Code Academy (Premium)

 ► Tutorials Point

 ► HTML and CSS
are the fundamental technologies for building Web pages: HTML (HTML and XHTML) for structure, CSS for style and layout, including WebFonts. Find resources for good Web page design as well as helpful tools.

 

What is WebFonts? -WebFonts is a technology that enables people to use fonts on-demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").

 

► What is XHTML?
-XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).


► What is CSS?
-CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from the presentation.



"MOBILE WEB"

► Authoring for mobile devices?

► Mobile Web of Devices.

► Mobile Web Applications




"YOUTUBE CSS"

All popular browsers are CSS responsive and to be able to create a website you need to know some form of CSS. Here's a couple of videos that will help you immensely. You can watch them right here - go Fullscreen





"Learn CSS"

► Grid By Example

► Guide to Flexbox

► W3 Guide to Flexbox

► Learn Flexbox at Scrimba




"Learn JavaScript"

► Intro to ES6+ at Scrimba

► Learn JS at Learn-JS.org

► Learn JS - W3 Schools

► 50 Resources to Learn JS


"Link To Me"

Copy and paste the following code into your website where you want the button to appear.