What's Next?

Chapter 13

Congratulations on building your first full-fledged website. You skillfully created a page with three columns, a menu, and a comment form.

The next steps you perform as a developer are up to you, and there are endless possibilities. Perhaps you're wondering what you should do next? I have a few tips that might help!

Then, choose your favorite website and try to play around and write the code from scratch. Find the sites' individual parts and identify their functionality. First create the HTML code, then apply the CSS (always in that order). After you finish, check it against the original and ask yourself what there is left to learn. That would be a perfect way to start!

Patterns

For the further development, it's crucial to realize that front-end programming (as a name for coding the user interfaces, in a web context it's mainly writing code in HTML, CSS and JavaScript) is a job based on well-known repeatable steps. Each time you work on a new website you will have to prepare a semantic HTML markup and then write CSS code to get effects that reflect the website design you have been assigned to. The god is in the details though and that's why front-end is an interesting field.

As you learn more, you will quickly find out that there are usually many different ways to solve a problem and it's up to you to choose the most suitable. Even a simple circle can be displayed on the website in various ways. You can use an image, HTML5 canvas, SVG markup or CSS border-radius property. Remember our multi-column project? This can be also done in a few ways at least (try to Google for "inline-block layout", "flex-box column layout"). You need to figure out what fits your project needs best.

Reality

The reality of the website programming is that modern browsers constantly improve by adding new CSS and HTML features. Week by week you get a browser update with tons of new features. As a developer, you need to incorporate all of them and leverage the most proper one based on different circumstances. You will have to answer questions like what browsers my projects aim to support and so on. You will have to decide if you care about a certain number of people using "X" browser. Then, more questions appear. "X" browser might be supporting rounded corners in CSS, while others not. If you wanted to support both browsers, you'd need to find a suitable workaround for this problem. It's one of the front-end developer's responsibilities – you will be selecting tools and techniques that will work in every browser your project is supposed to support.

History

Thus, it's important to learn a history of HTML and CSS development. It's been a crazy ride over last twenty years and some of the side-effects of this are still present. We have been constantly learning new things and while we have been trying to find answers, we have introduced new questions as well. You will be learning about them while approaching these problems. It's what the process of self-development looks like.

Make mistakes

Another important realization in order to become a good front-end programmer is that we all make mistakes and learn by them. There is no other way to improve yourself as a website developer than to constantly trying different things and learn from them. You need to be curious. The learning process is not measured in a finished time. Our industry moves fast and each month we have to get to know something new.

Good news

However, the good news is that even though we are bombarded by a lot of new things each day, all of them are built on the foundations known for years. HTML and CSS don't drastically change their forms or a way you write in them. No. These languages remain more or less the same. Year after year we just have more answers to certain problems.

You might ask a question though. What is trending right now? What I need to be aware of?

Accessibility

285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision. WHO

Many new concepts have come alive in recent years that will continue to grow in importance into the future. One of them is web accessibility.

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

A responsible developer just can't forget about it. I trully recommend you Web Accessibility: Web Standards and Regulatory Compliance and Apps For All: Coding Accessible Web Applications to get started on this important subject.

Responsive Web Design

Another recent web development technique is Responsive Web Design. In short, it's about how we design websites to appear nicely and readable on different devices including mobile phones, tablets and TVs. It actually makes sense to think a bit over why it makes a difference. In order to deliver a successful user experience (for example in your e-commerce business), you can't provide the same website layout for mobile phones and laptops. Well, actually you can, but it might turn out ineffective. Having a limited screen space on mobile, it might make sense to reconsider the website layout and accomodate the available space differently. And that's where RWD becomes handful. Thanks to it, you can set a specific bunch of CSS rules only for a certain screen resolutions so your website will look different on mobile devices whereas on laptops it can remain the same. Here's a simple example for setting a specific CSS rules only for devices wider than 320px:

@media screen and  (min-width: 320px) {
    .news {
        display: none;
    }
}

We used "media queries" here. In above snippet, every .news element in your code will be hidden for screen resolutions wider than 320px (because we set display: none).

There are of course more trending topics you will learn soon as you continue learning. In 2015, as web developers we build parallax websites, tell interactive stories using HTML video and audio or let people draw literally in the browser. Take a look at the following list to get a better sense of what modern web development is about:

Try more new concepts. The following are very attractive topics:

Read good books:

Read interesting articles and subscribe to valuable newsletters:

Check also:

Other than that, try to constantly learn new HTML5 tags and play with new things around CSS3. If you are not sure whether a feature you want to use is widely supported, go to Caniuse.com and check. If you look for a decent documentation, please visit Mozilla Developer Network. Moreover, experiment at codepen.io. Check JSBin or JSFiddle, where you can write code and get an auto preview of your work. No need to save files locally!

And most importantly: Love One Another!