Course Responsive (CR) Website Template
A Responsive HTML5/CSS3 template for setting up an academic course website.
This template is implemented in Bootstrap (a popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web). The template has been tested on iOS, Windows Phone, Android, Chrome, Safari and other browsers. Some of its features require external free components (e.g., Google Custom Search for site-search, Twitter widget for news, Smartbib for publication indexing). Additionally, having a CV in LATEX format will help to automate the generation of material and streamline consistency between your CV and your website. You will need to edit the sources with a text editor or a capable WYSIWYG editor.
The original idea for setting up this template was to make an academic profile easily accessible from a smartphone.
The template is free and open to reuse under a CC BY 4.0 licence.
Copyright (c) 2015, Demetris Zeinalipour, Department of Computer Science University of Cyprus.
All rights reserved.
Creative Commons CC BY 4.0 licence
The CR template is open to reuse under a CC BY 4.0 licence. This license lets others distribute, remix, tweak, and build upon CR, even commercially, as long as they credit the original creation in the footer of the site. This is the most accommodating of licenses offered. Recommended for maximum dissemination and use of licensed materials.
To use CR on your site, please add the following code at the end of your website:
Available here: http://www.cs.ucy.ac.cy/~dzeina/courses/epl371
Short description of the contents included in this release.
- index.html : Contains most of the website material (single-page layout). Change this accordingly.
AR (Academic Responsive) Template
Also check out the sister template designated for acedemic websites: https://github.com/dmsl/academic-responsive-template
HTML and CSS templates
Extremely simple templates for starting a small project.
Below is an overview of the terms. Open the similarly named HTML file and its CSS to see it in action.
Videos (2018): Intro to Web Apps
A plain vanilla HTML page with no CSS.
This page has a CSS file attached. View page.
Web pages by beginners often look horribly different in different Web browsers. Often this can be traced back to the ways in which and are specified in the CSS. Some web browsers interpret some aspects of and differently from other browsers.
Resource 1: box-sizing
Resource 2: Inheriting box-sizing Probably Slightly Better Best-Practice — this is what I do now (except the and parts), but it might be overkill for beginners
Video: How box-sizing fixes a width problem (demo) Margin, padding, and how to center elements with are discussed.
Beginners can get very confused about the differences among , , , and (all covered below). Think of as the modern solution to solving challenges with a set of small items (or boxes) on a page. However, for a full-page layout solution, look to instead.
Browser support for CSS flexbox is very good.
Resource 1: Using CSS Flexible Boxes
Resource 2: A Complete Guide to Flexbox
Resource 3 (video): Flexbox Tutorial: Real Layout Examples
In CSS, float declarations are commonly used to place elements (such as images, or sidebars) on a page. They pose challenges for beginners, in large part because usually they must be "cleared" after use.
Problems with floats also arise because of the box-sizing issue (see above): when there is not enough space for a floated item, elements "fall down" below instead of floating side by side, as you intended. The error with insufficient space can be caused by the width of margins and padding — the sum of all the widths is greater than you calculated. This can also occur as part of inheritance (the "cascade" of Cascading Style Sheets).
Resource 1: float (a great reference at Mozilla Developer Network)
Resource 2: CSS Floats 101
Video: Clearing floats
Video: Comparing floats with positioning (demo) Relative, absolute, and fixed position are discussed after floats.
The CSS grid has revolutionized grid-style page layouts, making floats and inline-block styles unnecessary in many cases (but not all). Good planning is required before you can implement the grid effectively. See also above.
Browser support for CSS grid is pretty good but not yet universal.
Resource 1: Basic concepts of grid layout
Resource 2 (video): CSS Grid Changes EVERYTHING
Resource 3: Building Production-Ready CSS Grid Layouts Today — by the guy in the video
Resource 4: Layout Land — great videos by Jen Simmons, Mozilla Designer and Developer Advocate
Resource 5: Grid by Example — super-short videos that each show how to do just one thing, by Rachel Andrew (check out her website too)
It's possible to replace the techniques with . Each method has issues, and each method requires that we use to make it work properly. Beginners must understand that they cannot use the two together; it's an either/or choice.
Resource: What’s the Deal With Display: Inline-Block?
Example Compares inline-block and floats.
This stylesheet is widely used throughout the web design community to smooth out all the differences among browsers. Load this first, then load your own CSS file. All the HTML files here (except basic.html) use Normalize.
The web design community expresses various opinions about use of the universal selector (*) in CSS. It should not be overused. I use it for in most of my CSS stylesheets.
Resource: Universal selectors (MDN)
viewport / responsive pages
All the pages here use the viewport meta tag in the HTML element. It helps to make your pages look good on small screens, i.e. mobile. However, just slapping the tag on your page does not instantly fix everything.
Resource 1: Stop using the viewport meta tag (until you know how to use it)
Resource 2: Use CSS media queries for responsiveness
A small collection of HTML templates with various attributes to solve the basic needs when starting a new project a new project or prototyping a new front-end feature.
Minimal HTML Template
It doesn't get more minimal than this. HTML5 templates can technically be even more minimal, but this template takes a couple of things in to consideration:
- Keep everyone happy by specifying the language used.
- We want UTF-8 encoding set for security and convienence.
- All web pages should have a title.
Simple HTML Template
Unfortunatly the previous, minimal, template isn't as friendly as we'd like it to be. This simple HTML template takes care of that and adds the following features:
- Stylable in Internet Explorer.
- Less likely to confuse less proficient reviewers.
Standard HTML Template
This template is meant as the very core of a real web page and therefore adds the following features to the simple HTML template:
- Meta description tag for SEO purposes.
- View port meta tag, since we're being responsive in 2012.
- Link to a style sheet, since we want to keep things organized.
Standard HTML Template with jQuery
Last, but not least - and most likely used the most, we have the standard HTML template with jQuery inclusion pre-entered.
- Includes the latest jQuery version from Google CDN, with a local fallback if needed.
Templates github html
This is a responsive (mobile/desktop) and light-weight HTML/CSS template for building projects or personal websites. If your website does not require complex user interactions, I recommend starting with the empty template (empty.html) and copy codes from the file that contains different layouts (index.html). For building interactive websites, this library also provides several widgets (widgets.html) based on jQuery and jQuery UI. Examples that use this template are:
If you would love to keep updating this template, please keep your codes in separate files (custom.css and custom.js) and avoid modifying the following:
- css/frame.css (CSS for the main frame of the website)
From version 3.0, the menu bar at the top is moved into a single file (menu.html) for better management. Each template page will now use jQuery to load the menu bar file (menu.js), as shown below:
If your website is static and requires no user interactions, I recommend copying the code from the menu file (menu.html) into the menu-container div in your html template.
In this way, you can remove the script line that loads jQuery in the header of the html and also delete the files for loading the menu bar (menu.html and menu.js).
This template is tested and worked on:
- macOS Mojave
- Chrome 77
- Safari 12
- Firefox 68
- Windows 10
- Chrome 77
- Firefox 68
- Edge 44
- Android 7, 8, 9, and 10
- iOS 12 and 13
- Chrome 77
- Firefox 18
Here are the problems and bugs that I plan to address in the future. If you fixed them, please do not hesitate to send me a pull request, and I would be very grateful. Please also report problems and bugs in GitHub Issues.
- On mobile Safari, the menu on the top will not close after opening it. This is because the menu icon on mobile Safari retains focus after a touch event, and the menu relies on the loss of focus event of the icon to close.
Here are several features that I plan to add in the future. If you wish to contribute, please email me to discuss the design before submitting pull requests.
- A slideshow block for showing images or videos
- A footer at the bottom
I welcome and appreciate contributions in fixing bugs and enhancing features. However, please avoid submitting pull requests (PRs) that modify the template's existing design without discussing them with me. Please also avoid submitting PRs that are not related to bug fixes or feature enhancements. Editing text in the README file is not encouraged (e.g., fixing grammar errors), and PRs with unnecessary editing (e.g., adding unrelated text, changing the design of the template, modifying the README text arbitrarily) will highly likely be marked as "spam" and "invalid."
If you are excited to contribute to the new features directly, please explain your design decisions and how your design matches this template's style in the PR. If you fix bugs, please explain which bug you fixed and how you fixed them. The explanations that you put in each PR can greatly help me determine if the changes can be merged into the master branch. PRs with no explanations will highly likely be rejected and marked as "wontfix."
An assorted collection of responsive HTML templates. You can check them out Here
All the templates are situated in the directory. This directory contains all my templates. It might not contain the templates contributed by other developers. However, all the templates are available at this website
You can add your templates easily to this repo.
- Fork it!
- Create a new branch for your template: git checkout -b new-template
- Edit however you want!
- Commit your changes and push to the branch.
- Submit a pull request
Dont forget to include the card image for the website. Also, you can link the Demo/Download button to a URL of your own accord. No need to push the files of your template to this repo.
This has been released under the MIT License
- Westbury gates
- Kang lim and hari
- Zelda valentine box
- 2004 aveo
- Auto martz mission tx
- Stretcher chair stryker
- Stretcher chair stryker
- Fursuits for sale
Free Responsive HTML Email Template
Sometimes all you want is a really simple responsive HTML email template with a clear call-to-action button. Here it is.
See live preview.
Inline your CSS before sending
Email is notorious for inconsistent CSS support. Therefore you should always inline your CSS and send a test to yourself before sending.
Sending emails directly from your codebase or using a developer service?
For an API service (like Mailgun, SendGrid, Postmark) you need to inline the CSS before sending. See for an example.
You can use this Email CSS Inliner and then send a test email to yourself to verify it works as expected.
- Copy all of email.html
- Paste the HTML as the source into the inliner
- Copy the HTML output and use this as the email template you send
Sending emails using a marketing service like Mailchimp?
Use the template as is. They'll put the CSS inline for you when you put together your campaign.
Images in email
When inserting images remember to include the following attributes or risk them breaking in different clients:
More information here
Tried and tested on all major email clients
Tested on mobile, desktop and web.
See the Litmus test results.
More HTML email resources
This free template is part of a pack of responsive email templates for developers and startups available on HTML Email.