Modern Website Design Lesson 2

 

Modern Website Design Lesson 2

I’m glad you decided to stick around As I mentioned in the introduction, this course will cover modern website design from the perspective of a front-end modern website design developer.

So the first thing I should probably cover is what the heck is a front-end developer? But before I get there, what the heck is front end? So when we use the term front end, we’re referring to part of a website‘s architecture And front-end technology is stuff like HTML, CSS, and JavaScript. And we use the term front end to separate it from back end, which is the stuff that makes the web page In all cases, the website is being served by a server, but sometimes we’ve got things like databases which can store your content in them Perhaps they’re storing them as part of a content management system or CMS.

That sort of stuff, the heavy-duty programming, that’s considered the back end, the stuff that happens on the server .The front end is what we deliver to the browser, and it’s what the browser renders and interprets Front end can also refer to the people whose focus it is. So sometimes you’ll hear people say, oh, I work on the front end or I work on the back end or they might say I’m a front-end developer, or I’m the back-end developer. Some people do work on both ends of the system, especially at smaller companies and startups.

How to understand Modern website Design

You’ll sometimes hear them referred to as full stack developers, because they understand all of the layers that come together to create a modern website design. And those people are kind of rare, which is why they’ve been given the moniker unicorns by some people. They understand modern website design, UX, front-end coding back-end development. And they’re highly sought after at a lot of companies. If you can master all of these areas, you can pretty much name your price when it comes to doing web development.

Now, the front-end languages, as I’ve mentioned before, are HTML, which is used to mark up your content and styling. which is accomplished via CSS, and your programming on the front end is done using JavaScript. Now, it’s important to realize that HTML, CSS, and JavaScript actually evolve over time Each language evolves at its own pace. And so different versions come out at different times. And they’re not always in sync. This can be a little confusing and can make modern website design a little bit challenging, trying to track which version different browsers are handling.

And in many cases, browsers change over time as well. They won’t implement a particular spec, but then later on they will. As you can see, IE8 all the way over on the left here in red, doesn’t support the CSS3 border radius property. All of these other browsers that are in green do. You’ll notice that IE9, IE10, and IE11, which come after IE8 in that column also support border radius.

This information is all stored on a really useful modern website design called caniusecom, which helps you to track which options are available to you in CSS, HTML, and JavaScript. And which browsers support them .There’s also a really neat view where you can actually see the amount of market share a given browser has in order to best determine whether or not a particular feature is available. So as I mentioned, browsers change over time. So you might have some browsers that get square corners because they don’t understand the border radius property.

So that would be IE8 here on the left. And then on the right we have IE9, which does understand border radius. So it gets the rounded corners. Some of you may look at this and think, well, that’s not great. We’ve got two different browsers with two different behaviors but, in reality, it’s OK for people to get different experiences based on the browser that they’re in.

How to control Modern Website Design

We can’t control absolutely everything about the way people experience our modern website designs, and that’s OK. We have to come to terms with that. And it’s a subject that I’ll talk about a bit more when I discuss the philosophy of progressive enhancement. Now, at their most basic, the tools of a front-end web developer are simply a text editor and a browser. There are numerous text editors out there, everything from Coda and Brackets to Sublime. Text, TextMate, Vim, UltraEdit, Notepad, Notepad etc.

There’s just hundreds of them out there. Which one you want to use is up to you. My personal preference is TextMate I tend to use that a lot on my Mac, but I also like Sublime Text quite a bit as well. And that one is available on both Macs and Windows machines.

As for browsers, we’ll be viewing and testing our work in Google’s Chrome browser. But most front-end developers have a handful of browsers on their machine so that they can test their modern website designs and their functionality across the board. Hopefully this helps you understand what a front-end developer is. In the next chapter, we’ll examine where a front-end developer fits into the process of building a website I’ll see you in a minute.

Do not forget to check out our Modern Website Designs and Get a Free Quote from us to get you going fast and modern! Check out our Portfolio.