Saturday 3 March 2018

Learn Sass, HTML & CSS for Free on MarkSheet infobhan networks

Learn Sass, HTML & CSS for Free on MarkSheet

Web development can be intimidating for a complete beginner. There are plenty of free articles and videos to help you learn but they all vary in quality and level of detail.

That’s why MarkSheet is such a valuable resource. This remarkable website teaches HTML, CSS, and basic Sass from scratch, starting from the basics of the Internet and the world wide web.

Read Also: 16 Best YouTube Channels To Start Learning Web Development

Every guide is packed with information and the content is surprisingly up-to-date. Plus, the site is beautifully well-designed, easy to read, and provides a quality experience for anyone hoping to learn the ropes of coding a website.

The homepage lists a full table of contents broken down into four sections with varying lessons:

Within each lesson, you’ll find tips, code snippets, and guidance to help you understand the contents. Some lessons are quick while others are a bit longer.

The best part of this guide is that it teaches these concepts with the aim of helping everyone learn the right way.

As you follow along in a step-by-step progression, you’ll slowly understand why websites are built using block & inline elements, or why certain CSS properties have specific values.

Scrolling through these lessons you’ll also find hash symbols on the left side of the page. These are jump links that you can bookmark to revisit a section later. They also work like chapter markers in case you have to stop in the middle of a lesson.

MarkSheet HTML chapter learn

MarkSheet is 100% free and will remain free forever. The creator Jeremy Thomas also has MarkSheet video tutorials scheduled for the future.

So if you’ve been trying to learn frontend development and don’t know where to start I cast my vote for MarkSheet. It’s incredibly easy to read and it should help you understand the philosophies behind coding a structurally-sound webpage.

Friday 2 March 2018

Are Ready-made Websites Killing Web Design? infobahn networks

Are Ready-made Websites Killing Web Design?

More often than not, you would meet someone who is not as acquainted to the comings and goings of web design and tell you,”I can do the same thing you do, using Squarespace“.

To which you might respond with disgust or anger.

I mean, it’s not surprising. The advent of ready-made drag-and-drop website building platforms made creating websites so much easier, especially because there is little to no coding required. And as someone whose bread and butter is designing websites, you can’t help but feel sorry.

Read Also: Web Design Hasn’t Changed Much, and We’re Already in 2017

Personally, you wouldn’t want your job to be replaced with an easier way to do stuff, much like how horses were replaced by cars back in the day.

Frameworks and CMS are becoming more and more popular too. You have WordPress, Blogger, Drupal. You have Foundation, Bootstrap, and Skeleton. You have SquareSpace, Wix and Weebly.

wordpress framework

There is so much competition, and all of these services usually target casual clients offering them to just subscribe instead of looking for web designers.

The points I’ve built so far would certainly make you think, “OMG! these ready-made websites surely kill web design. The end is nigh!”

But what if it doesn’t? What if instead of killing web design, these ready-made websites are helping web design become more profitable? What if they are not cars replacing horses, but instead are the Ubers to our regular cabs?

Ready-made websites are friends, not foes

The point of these services, themes/templates, and frameworks is to make the task of creating websites easier. A beginner, who is not attuned to how good websites are supposed to look like, may find it easy to use an online website building service. And if that person finds it easy, what more could an experienced designer do?

Now if you ask me, are ready-made websites actually killing the web design?

My answer would be a firm no.

Contrary to the popular belief, I think that ready-made websites are actually doing just the opposite, and the write up that follows I’m going to discuss just how.

No need to reinvent the wheel

There is no substitute for creativity and originality, however, originality doesn’t always mean you create stuff from scratch each and every time. I think an intelligent designer can produce an original web design even if he uses a pre-made website template by cleverly customizing it to his client’s needs.

Faster turnaround time = More money

In the field of web designing, there come certain times when you suddenly catch the favor of the goddess of good fortune. You may get as many projects in a single day as you might get in months. And all of a sudden, time becomes a precious commodity as it translates directly into profits.

faster turnaround, more money

At this point, the biggest advantage you can get from a ready-made websiteis faster turnaround time. Instead of hiring a helping hand or rejecting a few projects just because you want to create everything on your own, you can use pre-made websites to your advantage to get projects done more quickly.

Won’t it effect the quality of work, you ask? Well, it may to some extent, but then again, if you’re an astute designer, you would twist and turn a boring template into a highly customized design.

A visualization aid for uninspired clients

Ready-made websites provide good overall value to your clients because of their intuitive nature. Let’s say that you have a client who wants a website made but is dumb as a dishwasher when it comes to visualization. You discuss and offer him some prototypes and he still can’t visualize the idea inside your head.

So what’s a good way to make him see what you see? Use templates.

By using templates, you can show how the design will most likely end up looking like. This means that you are saving yourself and your client a lot of time going through different lines of communication just to hit that right spot.

Does that mean anybody can do your job now?

Truly ready-made websites are very easy to use and literally anyone who has a computer can use them, does not mean anyone can be a web designer now?

The answer would be no.

Yeah, the actual work of putting elements and customizing them can be done by anyone, but there are still things that have strings attached to them – things that can only be handled by a professional web designer.

Limitations of ready-made websites & “kiddie” designers

In this case, I’m borrowing the word “kiddie” from the hacker terminology“script kiddie” – a hacker who only uses scripts made by others in order to wreak havoc on the internet, so technically they are just unskilled individuals who don’t have the knowledge to actually make things work outside the boundaries of the tools they are using.

1. Color scheme can’t be learned in one day

In web design, it is utterly crucial to choose the right color scheme that would work for both user experience as well as aesthetics. It’s a skill that takes years of experience and a natural eye for colors that complement each other.

color schemes

This also includes colors that are hot and trending, and how they are used to make websites look appealing.

2. Fonts are what make websites subtly stand out

In addition, not everyone is adept at choosing the correct typography and fonts. I mean look at all those birthday invitations you received in Comic freaking Sans. Disaster!

font design

One does not simply use Times New Romans or Comic Sans on websites. A seasoned web designer knows the psychology behind each family of fonts, when to use serif or sans serif, how to make headings and subheadings pop, how to make each paragraph more distinct, and the like.

3. Only experts know that it’s not just about the surface

Web designers also work behind the scenes in order to make each website they design works properly from the development point-of-view.

There are some back-end optimizations to take into account such as meta tags and descriptions, how to make each website search engine and social media optimized, and overall responsiveness are things only a person with years of experience in the field can do.

To sum it up

In conclusion, ready-made websites aren’t killing web design, instead, they are helping web designers and developers by making their work easier, more profitable and more valuable to their clients.

As a web designer should not fret because you can’t be overtaken by ready-made websites yet. Yes, some businesses prefer easy to use and cheaper alternatives but nothing beats the flexibility, reliability, and originality of a website built by real professionals.

Convert Sketch Designs to HTML Newsletters with Slinky infobahn networks trivandrum

Convert Sketch Designs to HTML Newsletters with Slinky

Most code exporting tools are clunky and not very reliable. However, Slinky is a different kind of exporter for Sketch, that turns your designs into fully-compatible newsletter templates.

It’s easy to find newsletter ideas and recreate your favorites in a design program. But, usually hard-coding the newsletter takes a lot of time that could be used elsewhere. This is where Slinky really shines.

Read Also: 9 Tricks to Design The Perfect HTML Newsletter

Just install the plugin and design your newsletter mockup with Sketch. Then, from the top menu click Plugins > Slinky > Export selected artboard. This brings up a new menu to pick where to export the files and what to call the newsletter.

Within a few seconds, you have got a template ready to go, that is fully compliant with all the major email programs. But, it is a good idea to still test your newsletters to make sure they look right.

Much like other code exporting tools, Slinky is not perfect. For example, all images need to be marked as “exportable” in Sketch if you want them included as separate items in the HTML code.

It’s a minor annoyance but this plugin can still save you a lot of time compared to writing HTML/CSS templates from scratch. It all depends on how much you need to get done.

Slinky for Sketch

To learn more about this plugin and the requirements, check out the main GitHub repo. It’s an excellent place to browse the usage guidelines and you can even find contact details for the creators at Finch if you have any questions or suggestions.

This plugin is 100% free for any project, so Slinky is a great choice regardless of your coding skills. Just visit the plugin page and download a copy to start pumpin’ out email templates right from Sketch.

Customizing Bootstrap Layouts: Trends, Tools & Frameworks

Customizing Bootstrap Layouts: Trends, Tools & Frameworks

Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party developers have even published their own resources online. These resources range from free themes to detailed plugins and frameworks.

In this article, I would like to share a handful of these resources and best practices for developers who want to go further with Bootstrap.

Read Also: Bootstrap 4: New & Cool Features You’ll Love

All the resources in this post are free, so you can use them however you see fit. Even if you have never used Bootstrap you’re sure to find something here that will help you get started.

Restyling with Bootstrap

The default Bootstrap library comes with its own unique design that looks fantastic. It’s widely known across the web and you can easily tell when a website is using traditional Bootstrap elements.

But, you can also restyle these elements yourself to use Bootstrap’s code as the foundation for your layout.

There are a few different ways you can do this:

That last option is the most common and it’s one of the reasons Bootstrap has grown so fast.

Granted I’m also a huge fan of their customize tool because it’s totally free and gives you so much control over which features you want to use.

Bootstrap customization kit

There are tons of resources for BootStrap 3/4, created by third-party developers, so it’s easier than ever to create your own unique BootStrap layouts without writing much code.

Plugins & add-ons

Since Bootstrap comes with a massive JavaScript library, it’s easy enough to expand JavaScript features. And developers have certainly done so with their own plugins, many released for free online.

These are my favorites that all support Bootstrap natively. Many of them run on jQuery, so they are also easy to customize if you know your way around the jQuery library.

Form validator

First up is my favorite form validation plugin, Form Validator. It runs on jQuery and it supports a whole heap of frontend frameworks: Bootstrap, Foundation, Pure, UIKit, and others.

You can manually append any number of 51 validators to any form on your site. This means visitors will need to meet those validation requirements before they can submit the contents.

Many contact forms use these validators to require working email addresses. But, you can also use them for image uploads, or passwords, pretty much anything your Bootstrap-heart desires.

Form validation plugin

Datetime picker

Date pickers are also a huge pain to code yourself. Many forms just use dropdown menus for the day/month/year settings but you can also use this Bootstrap date picker plugin to save yourself the hassle.

It’s completely open-source and runs on the Bootstrap 3.x library. You will also notice it supports both the date and time by using another jQuery plugin, Moment.js.

Overall, this library is fantastic to get a working date picker active. It does have a lot of dependencies but, thankfully, you won’t need to write much code to get it working.

Bootstrap datetime picker

Star ratings

Here’s another cool feature for star ratings on the web. You can append a one-to-five star rating anywhere on your site, using the Bootstrap library for JavaScript behaviors.

When the user hovers over these stars the display changes to whatever the rating is based on their cursor position. Then, with one click, the user casts their vote and sets a star rating, including half-star ratings.

This plugin is definitely complicated to set up because you can change a lot of the default settings for more advanced techniques. But, you can see a simple live demo to gauge if this star rating plugin fits with your site.

Star ratings Bootstrap plugin

WATable

Bootstrap comes with its own table layout style for displaying tabular data on the frontend. But, with the WATable plugin, you can add a whole bunch of extra features to your Bootstrap tables.

This is one of the most detailed jQuery plugins out there and these are just some of the features you can add:

WATable is described as a Swiss Army knife of table plugins and I have to agree with this description. The fact that it supports Bootstrap is just the icing on the cake.

WATable plugin

These were some of my favorite plugins but there are so many others out there. You can browse through even more on this page if you’re curious.

Bootstrap frameworks

Bootstrap is actually a large framework because it lets users customize the default HTML and CSS styles with a few classes.

But, developers have taken the default BootStrap library and added their own styles to create even larger frameworks that work like themes, so you don’t need to restyle Bootstrap from scratch.

Thankfully, they’re all free and they all run on the default BootStrap classes.

Bootflat

Perhaps the most well-known BootStrap framework is Bootflat UI that follows the flat design trend.

It works with all the default Bootstrap features, including all JavaScript components. The major differences are more in design and structure where page elements use flat color schemes to move away from Bootstrap’s gradient styles.

Bootflat hasn’t been overused very much, so you can add this framework on any landing page or homepage to create a unique look for your site.

It’s 100% free and even comes with a color picker, so you can find flat color schemes to match your layout.

Bootflat UI framework

Get Shit Done

This surprisingly blunt UI kit also builds on top of the Bootstrap 3 library and it’s released for free on GitHub.

Get Shit Done comes from the team at Creative Tim where they do sell a few premium resources. This specific UI kit does have a pro version but it’s not necessary at all.

The open-source version has more than enough for everyone and you can check out the live demo to see how it looks like in the browser.

Get Shit Done framework

Bootstrap material design

Another popular design trend is Google’s material design. This is a design language originally made for Android app designers but has since spread onto the web and garnered lots of support from UI/UX designers.

This incredible Bootstrap material framework uses the material design features to build a custom design style out of Bootstrap’s library.

By default, it supports everything in BootStrap 3 and is currently being reworked to also support Bootstrap 4. You can learn more on the official homepage which has documentation and demos.

Material design Bootstrap framework

A similar library you might try is MDBootstrap, although I find this one a little more difficult to work with.

Bootplus

Google did create the material design language but they also have their own styles for many of their tools and web apps.

~~Bootplus~~ mimics the Google+ interface style, along with many of Google’s help docs, Google Drive, and similar web apps. It has all the same features as Bootstrap, including grids, layout styles, element styles, and JavaScript components.

You can even browse through a demo ~~on the site~~ to see the differences between Bootplus and the original Bootstrap UI. For a free resource, Bootplus is extensive and it’s perfect for anyone who likes Google’s design techniques.

Bootplus design kit

Tools & resources

Lastly, I want to dive into the many free tools for customizing and building Bootstrap layouts.

These tools are all web apps and many of them are even open-sourced on GitHub. They’re made to save you time and help you design incredible Bootstrap layouts without much code.

Live editor

The free Bootstrap live editor is one of the best tools for non-technical designers. If you don’t know how to code you can still rely on this Bootstrap builder to create a whole layout from scratch.

It runs right in your browser and you can even pick from pre-made templates to get started.

Options in the sidebar let you add certain CSS values if you do know some frontend coding. But, you can also use the GUI to change colors, fonts, sizes, and pretty much anything else you like.

Once you’re done, click “Get theme” and you can copy/paste the updated CSS styles into your own project. Super easy way to restyle Bootstrap without needing to recode everything from scratch.

Live Bootstrap editor

Form builder

This free Bootstrap form builder is a drag-and-drop browser tool that allows you to create Bootstrap forms from scratch.

Again, it requires zero coding knowledge and you have full access to all Bootstrap 3 elements. Just select the element you want and drag it right into the left-hand box. From here, you can change everything from the placeholder text to the CSS class.

By far the coolest form builder I’ve ever seen and it’s 100% free!

Form builder for Bootstrap

BootSwatchr

Another free tool I really like is BootSwatchr. It relies on the Bootstrap framework and it lets you update colors, theme styles, and the overall layoutof the page.

What I like about this app is how it also comes with a free gallery of pre-designed styles.

So, you can download a design that someone else already made or you can use that as a starting point to customize your own theme.

Bootswatchr Bootstrap web app

Moving Forward

Bootstrap is only growing in popularity, so now is the best time to dive into this framework. Thankfully, there are dozens of plugins, frameworks, and free tools you can use to expedite the dev process.

In this article, I just showed the tip of the iceberg, so if you don’t see anything here that’s useful get out to Google and see what else you can find.

Subscribe to: Posts (Atom)