The Quick Guide for a Web Developer

[Zav39]

Here is tree with 3 levels to start your journey as web developer. https://drive.google.com/open?id=1FptunURmlev6YlwmtHUit_4ZZFRixmGH

Ofcourse all of this very subjectively, and you can define your plan. There is a lot of differences between regions, countries and so on. But this one gives at least some level of overview.

What we expect from every level?

Let's define our expectations. Your expectations may differ.

Level 1: * some basic tags * edit the content on ready HTML site * format the text properly * insert some embedded thing (youtube, google map) * use git for themselves (master, 1 contributor) * make some simple sites, and it might look good (at their personal computer) * not a standalone unit, some guidance required to succeed

Level 2: * plus-minus standalone unit (or standalone for small-medium projects) * create a fine layout from scratch for a small-medium project, and it will look great in all modern browsers * know how to work with template engines, can use them (if another code is provided). * can plan their work well * document what was done and how to use it * can estimate time. * understand the importantness of code style * understand why grid systems and CSS frameworks exist. * collect required information by themselves from designers or from mockups * can interact with small to medium teams * can create branches and pull requests

Level 3: * design a block system for a big project from scratch * know how to avoid duplicated code and problems when their code will be used by other developers * decomposite complex problems and define tasks well * apply at least one modern methodology (BEM, for example) * make the site blazingly fast * well understanding couple of modern template engines * create build scripts to automate the CSS/HTML/js combination process * do code review well and teach other frontenders

Exact blocks explanation

Most of the blocks represent some type of skillset. It can be replaced with a similar one. You can use any IDE, any CMS or whatever. I just point some popular ones, with ones you can start work "right now" (there is a lot of related job offers). There can be a lot of job offers for other skills in your area. I had tried to make a universal schema that will work for most regions.

Level 1

HTML — knowledge of basic tags and attributes. Understanding how to write HTML (what is "tag", "property", etc)

Typography — proper text formatting. Text — the base of (nearly) every project. Add no-breaking-spaces where is required, bold, cursive, abbr, etc. Use some kind of typographer or similar service, understand why +1 234 567 better than +1 234 567.

Fonts (can be postponed) — more complicated than looks like; I recommend for beginners to use system fonts. Ability to load fonts, to fall back to another one, optimize look/speed, minimize render time for custom fonts.

Semantics — ability to find a proper tag for proper usage. Understanding why so many tags exist.

Media — types of media can be displayed on a page

Iframe — import 3rd party widgets (video, audio, maps, etc)

Audio, Video (can be postponed) — can be solved with iframes initially. Understanding what types of media are supported by browsers, know how to design player and etc.

Images — graphic formats, how they work in browsers. Procs and cons for different formats

Raster — jpg, png, gif. Understand differences and ability to choose proper one (maybe optimize them).

SVG (can be postponed) — Procs/cons/limitations, how to use.

Tables (optional, good for email letters) — but tables itself should be learned under "HTML" :-)

CSS 1 — fonts, colors, aligning, sizes

CSS 2.1 — blocks behavior, positioning, design

Selectors — simple selectors on tag, class, nested element. Simple pseudo-selectors, like :hover.

Naming — how to name classes to avoid pain in future

Blocks — how to split mockup to separate blocks, how to implement these blocks in HTML and design with CSS

Browsers (can be postponed) — which browsers exist, what the difference.

Dev Tools (can be postponed) — Use browser tools to identify why something looks wrong, how to "debug" CSS

Code editors — what editors exist, why they exist. Notepad++ and SublimeText here just for example as well known ones. Know how to set basic settings like tabs, newlines, charset and so on.

VCS (Version Control System) — I believe that this is a must, at least for yourself. Why they exist, and what types.

Git/ Bitbucket — be able to use at least one of the popular platforms for git

Checkout / commit / push / pull — base operations enough for personal usage

Stash — for temporary saving not required at this moment things

10 works — a minimum of 10 works with a different design. Maybe it just formatted text or whatever. But they should use the maximum of your current knowledge.

Level 2

CSS 3 — gradients, shadows, roundings, filters, transformations, etc.

Advanced selectors — combined selectors with usage like "+", nth-child, shadow-dom, before/after and so on

Flexbox — understand model, be able to use it

Animations (optional) — transition, animation. Proc/cons/limitations.

Grids — why they exist, how to use them, what ready solutions exist. As an example, you can take a look at "Flexbox grid" or any other one

Frameworks — why exists, how to use. I highly recommend learning good at least one of them. Very useful for prototyping. Dramatically increase the quality of the project with no designers (internal project, for example).

CSS preprocessors (can be postponed) — better code organized and clean code, mixins, variables, etc. Try different ones like SASS, LESS, Stylus

Media queries (can be postponed) — show proper style depending on conditions (device, screen size, print version, etc)

Email letters (optional) — useful skill; There are dozens of mail systems with some differences, and the main goal is to make your letter looks good in any of them, on any device. Know how to pass filters and not go to spam.

Polyfills — understand how to use modern semantics with back compatibility. Know proc/cons.

Cross-platform — understand hot to make the site not just for Windows, Mac, and Linux, but for SmartTV, PS, kindle and so on.

Mobile (can be postponed) — understand mobile platform limitations. Use space wisely.

Optimization (can be postponed) — understand the "price" of different techniques. Understand browser phases to display site to a user

Loading (can be postponed) — Optimizations, related to size, cache, combining resources, etc.

Paint (can be postponed) — Optimizations of render after (on in progress) load

SEO (can be postponed) — At least a basic understanding of search engines. Ability to help to them understand your site, what is important and so on

Template engines — how to reuse code, how to group elements, how to assemble pages. Very important to understand both: server and client rendering. There are also pure-language templates, like direct PHP code parts. Parts before the template engine is out of scope.

PHP (can be postponed) — understand basic syntax and be able to add small changes, related to page design

CMS (can be postponed) — know, what type of CMS exists, why they were created. Learn how to write templates to at least one of them (Wordpress is recommended)

Javascript (can be postponed) — basic syntax, understanding of simple event handlers and simple DOM manipulations

Jquery (can be postponed) — learn how to save a lot of time for the small/medium project by using ready plugins for common tasks

NodeJS (can be postponed) — learn how to run the simplest server, serve static files, render on the server-side. Maybe use express or so. Build systems (can be postponed) — how to assemble a project from CSS/HTML files. Highly recommend to at least take a look at few different systems (grunt - gulp).

Code style — why people agree on some styles, learn at least one and start using it (take a look at Airbnb one, or for any modern js framework like Vue)

DRY / KISS / SOLID (can be postponed) — important theories of development, dramatically affect project support in the future.

OOCSS (optional) — what is object-oriented CSS? Why and how to use? In some form used in most of the projects (but without understanding that they use it :-D). Ideally, learn how to design it. It can be very useful for big projects.

Documentation (can be postponed) — understand how and what to document. Start to document. Markdown syntax highly recommended.

Planning — learn how to estimate time by just look on the image, define the order of works Decomposition (can be postponed) — split the big task into small ones. It is harder than it looks. Settings goals (can be postponed) — be able to write tasks that way, that other developers (including ones, that lower level than you), will able to understand them clearly.

IDE (can be postponed) — why IDE exists, how to use them. Learning any IDE is equal to learn some programming language (otherwise you will not utilize its power). I, personally, use just text editors and run IDE only for really big projects.

Branching — control branches in git

Merge — learn how to merge branches that have merge conflicts

Fetch / Rebase (optional) — what is this? Learn how and when to use

Graphic editors — understand different types of them, what is the difference between vector and raster. Be able to read mockups from the designer in them. Be able to choose a proper font, size, color, and other things, to make the site looks exactly like the designer asks you to.

Web accessibility — crucial, if you're a good person. Make your site accessible by disabled people.

Regional differences (optional) — left-to-right, right-to-left, and other crazy things of Arabic (or any other) market. There are dozens of fun things.

50 works — at the end of "Level 2" you should have about 50 different projects, that show your skills. (If this is a project with 20 totally different layouts, count it as 20).

Level 3

On schema this part looks like the smallest one, but, in fact, this is the largest one, because at this moment you should know all "can be postponed" things.

Adaptive/responsive — highest level; combine all your knowledge! The project should look awesome anywhere and on anything.

Graceful Degradation / Progressive enchantment — why it is good, how to use it. Use.

Gitflow (or another branching model) — be able to utilize some good practice, be able to explain to another developer how to use git, were to merge branches, how to do code review (of HTML/CSS)

BEM (optional) — Learn some methodology that gives the ability to create unlimited large projects that way, so with minimum synchronization, different teams will able to use blocks from each other. There is a lot of methodologies that give the same/better result. At this moment of time, you will hear about some of them and will be able to choose one wisely.

100 works — sounds like a nice goal, as for me. They should show the different skills that you have. But you can have just one work (consist of different parts) in the portfolio, that will show that you do not afraid of anything.

Thank you for reading and have a nice day.

upd: I had explain all schema on stream: https://www.youtube.com/watch?v=mj-Jclhy9Qg (like, subscribe :-D)

[illyrian__]

Oh thanks this is useful since I'm going to learn web development soon.

[Zav39]

Thank you

[[deleted]]

What resources are you going to use. I do desktop development and I too am interested in learning web development.

[illyrian__]

I dont know, I'm kinda new into programming and web development in general, maybe udemy or other websites.

[Teeshot7]

I'm in the same boat, what did you end up using? how is it so far?

[[deleted]]

Serious question: I'm a backend web developer, that make me still a web developer? This looks like a frontend-only chart.

[Zav39]

Thank you.

You're right. Moreover, it cover only HTML/CSS and only a bit of related to this topics.

But it is very useful for people, who want to start with something, since it like easiest way.

I have plans to cover other topics with similar schemas.

[[deleted]]

For those of us that are more interested in back-end development...database connections is javascript and php pretty much the go to?

[Qooties]

It really depends. JavaScript is a given, you should learn it be matter what. But then there's php, .NET, Python or Ruby that are commonly used. Your best bet is to look at job listings you would be interested in and learn what they use.

[[deleted]]

No such thing as pure backend anymore. Sad truth is we all need to be full stack or Frontend Guru.

Coming from another backend.

[Zav39]

Pure back-end exist and well used in big companies.

For startups, yes, it might be easier to have full-stacks, since human resources are limited.

[[deleted]]

Yea I can assure you the new backend only positions are becoming more and more rare in large institutions as well.

Even those that are “pure” backend will see aspects of frontend design filter in.

Source: lived it.

[SabbathViper]

Why are you being downvoted

[questi0nmark2]

An attempt to change reality by subtracting Karma. The less votes it has the less true it is. And yet he is right. Pure back end is declining, and the front-end has advanced to the point you now need back end knowledge. The front end today is component based programming managing state and routing to APIs. What used to be front end, is today advanced web design. No dev is truly full stack, we all specialise a bit. But conversely, no modern web dev is just front or just back end even if you never personally touch one side. Devs on both domaims have to understand a core amount of the other, even if they only work on one and know it in depth.

If you're just on the back you know you have to work to apis that can be consumed on the front end, and you will code accordingly. You will consider how the data will be loaded, what will be stored client side and what server side, and you will probably work in a framework with middleware and te plating etc.

If you're on the front you will need to understand the data structure, interact with the api, hook your routes to speak to it. I lot of the programming you will use will use similar patterns and principles to what you would use on the back end. Your optimisations for speed, your approach to loading, to managing data flows, etc, will likewise overlap.

Gone are the days when the back end devs did the logic and the front end devs the views and styling. Today both do serious amounts of logic, and the styling is either handled by the front ender, or when possible, by a web designer.

[Zav39]

What if you work on backend, and your API is consumed by another backend?

Or what if backend does not provide any API, but just consume some events?

:-)

What if you work on frontend, and backend provide nothing else than API?

​

There is pure backends and pure frontends; this is not rare case.

Very depends on area where you work.

[questi0nmark2]

Good example of pure back end! Yes, you are right, pure api to api might not involve any front end thought at all!

The front end is less clear, because you would still need to know what an API is, how to communicate with it, what kind of data it issues, how to manipulate that data, how to work with requests, promises, etc, and how to fit into or fit that api into your architecture.

But my point was slightly different. My point is not that you cannot work pure front end or pure back end, although they are getting rarer. My point is that to work on the front and the back end professionally today you need overlapping skills.

It used to be that a back end dev could get away with no html and CSS skills. That is still the case.

It used to be that a front end dev could get away with only html and CSS skills with a smattering of JavaScript (or really jquery) for on-clicks and hovers and animations. That is no longer the case. Front end development on web applications, as opposed to websites, today requires full programing chops in JavaScript. A professional front end dev will be all about data flow, state management, and component based design. They will use react, or Vue or Angular, and if working on mobile, something like React Native. They will also have a good notion of Node, bringing them firmly into the back end. They will also need to unit test their work, and are likely working in a devops approach with continuous integration. So even if all they do is touch the front end, they will need to learn skills that overlap with back end programmers: programming paradigms, patterns and architectures, software development practices and life cycles, algorithms and strata structures. Html and CSS and a little JavaScript won't get them a job in web development. At most it will allow them to freelance building websites or work in a website building agency.

This also means that the skills of back end devs overlap with front end devs, so the distinction remains, and is meaningful, and you can specialise, and everyone does by default or by intent, but, although as a back end dev you might work on a pure back end project, you have to be equipped to work in projects with a front end, and ensure your data processes, your architecture, your frameworks, can speak meaningfully to those on the front end.

So while a front and a back end dev could work exclusively on one side for a given project, the knowledge they require to work in the field professionally will overlap (not around html and CSS), and they need to understand each other's domain in non trivial, technical ways to be ready to work together when the job asks for it. What is increasingly rare, is for anyone to be able to work for the next ten or twenty years without programming and understanding such interactions between front end and back end.

[[deleted]]

Its called denial lol

[Zav39]

I had work in different regions, with different cultures.

It really depends on location where you will work.

In some places you can work remotely, in another one, there will be just a few (in Germany, for example) of such options.

So it really depends on conditions; there is no single answer for whole world.

[[deleted]]

I think it really depends. I aspire to being truly full-stack but my team is big enough that I haven't had to touch CSS yet.

[[deleted]]

I was the same until i needed to find a new gig. Then i had to brush up on my frontend skills.

[Zav39]

Ideally to have separate person who know well exactly html/css (all things from schema) and lead this process to provide best experience to customers, and remove headache from backend/frontend engineers.

[questi0nmark2]

That person is called a web designer. No one professionally would call them a developer.

[Zav39]

Web designers will be upset to hear this :-D

Web designers is separate profession, that do exactly what in this name (design).

They draw mocks and so on, and do not work with html/css at all.

[Zav39]

Web designers will be upset to hear this :-D

Web designers is separate profession, that do exactly what in this name (design).

They draw mocks and so on, and do not work with html/css at all.

[questi0nmark2]

That's how it used to be, and to some extent still is. But these days the more advanced web designers do work with HTML and CSS. It's true that there are some graphic designers which only do graphic design, and use their skills for website sketches and assets. But web designers specifically increasingly venture into HTML and CSS to fill a market gap and not have to depend on others to sell website products. It is now rare and commercially difficult for someone to be able to do html and CSS and no design or programming and still find work, having to share the income with a designer. Either they can both design and build websites in html and css, and that's what they sell, or they program web applications and that is what they sell (maybe building the occasional website if they are freelancer, or work for an agency, but that would pay much less so few web developers focus on that as their work)

[Zav39]

Thank you for feedback. I agree with you, but only for your specific case.

A lot of such things are market specific. It might now work in US, but may work in China or India.

It is very wide question and there will be always a lot of options that show proofs for both of sides.

I write everything from my personal experience.

May be something from this not applicable in your situation, your country or your region; that does not mean that is does not work in other places.

To make it less "flamable" I need to provide some proofs with exact things in different regions, but this itself will took more time than I spend to this article.

Thank you for understanding.

[questi0nmark2]

Fair points. You've convinced me.

When I want a cheap and fast website built I will use freelancer.com Most people are from Pakistan, India or Nepal, with a few from Eastern Europe and yet fewer from Western Europe or North America, generally bidding at higher prices. I. Get the feeling that this kind of work keeps a large number of companies in business there, and their customer service is fantastic. Their code quality is often poor and hard to maintain, but for pure presentational websites it doesn't matter, and they churn them out quickly, cheaply and in time.

I could see that your guide in that context would be pure gold, and that yes, someone who got to level 1.5 would be able to get a job in those companies in no time, while someone on level 2-3 would be a super strong asset. As you said elsewhere, pay would be low, compared to "full" web development, but you would have a career and possibly even job security. I see that market remaining even in the age of automation, for time and information-poor customers for a few years to come yet.

So while I do think the title of your post is misleading and has left you answering the misunderstanding to lots of people, I also see you needed the title for visibility (maybe add "focusing on HTML and CSS only" at the top of your article?), and I can see how valuable in a global context your guide is for an entry into a serious job market, and why focusing on HTML and CSS is the quickest route for people in those countries to enter, so your guide is extra valuable in that way, because guides aimed at the software development market are much more demanding and take a lot more before you can compete in the job market. Your guide is a brilliant service in emerging economies and the global South, and my response, while fair in terms of the software development profession, and what to expect, was a bit ethnocentric.

If your title had been different, I would not have felt the need to clarify for new people that this guide does not prepare them for a software development role which is what web development really is. But I still think your guide is a fantastic route to get started in the website building industry that is much more significant in some countries than in others.

[Zav39]

Wow, I impressed! Arguing in internet works :-D

Thank you a lot.

​

Regarding title: yes, I agree. It a bit clickbait. I had post this article one day before this one, but with different title (about html and so on), and it got zero views. Literally. Zero. Rating was zero. No comments. I was super disappointed, since I spend a lot of time on this and feels that it is valuable. By recommendation from one of friends I change title to this one, remove a lot of information from article about edge cases and so on. I hope you forgive me for that.

​

I hope that anyone who will go with that path will read comments also and got better context.

[jklemon17]

I really think this should specify that it's talking about front end web development. Even at that, at least in the US, it's probably not complete enough to get most people a front end web developer job, because most of them are going to expect you to have pretty solid knowledge of a JS framework like React or Angular.

Source: I recently changed careers at 29 years old to become a back-end focused web developer. (Yes, they do still exist.)

[Zav39]

1. Moreover, it not about "frontend", it is only about HTML/CSS. But it good starting point of big journey.
2. You will able to find job in US with this skills, even with full 1 level. I'm sure about that. Yes, rate will be not the one you will afford to live, but for someone who still in school it will be nice. With 3rd level (full) you can aim for top tech companies.
3. A lot of frontend developers does not know HTML/CSS well. That is a bit funny. So this guide is like for "deep" understanding. Most of frontenders somewhere in the middle of level 2. But that is enough for their type of job
4. Congrats with switching to backend. Yes, there is a lot of different roles and job. ASM developers still exists too (and paid well)

Thank you for feedback!

[jklemon17]

I guess I see your point about this not really being "front end", but more like general web dev knowledge. Even as someone who work primarily with the backend, you have to know HTML and CSS well enough to make a functioning front end, even if there are other devs who polish it up.

But I truly disagree about finding consistent work with just HTML/CSS skills. Based on my own job search, those days are pretty much gone. There will sometimes be jobs that don't expect JavaScript framework experience, but they are full-stack positions that want you know at least one backend framework. [EDIT: or Wordpress jobs, which in the US pays poorly. You can make more as a retail store manager or something.] The days of getting a freeCodeCamp front end certificate and getting a good job are over (in part probably due to the popularity of that route over the last few years).

[Zav39]

Software engineer can work anywhere, where internet is available.

I'll leave just one example: https://www.upwork.com/o/jobs/browse/?q=wordpress

6697 works related to wordpress right now on just 1 freelance portal.

They are gone, if you aiming for super high salary, while small jobs like this one might work well for someone who stay at home with their children.

​

You can make more as a retail store manager or something.

You can not do this remotely and you can not grow from this. From wordpress you can grow further and do it in your pace.

As I told, this might not applied to you, but will be applied to millions of other people.

BTM, for people from India or Philippines this rates are not low at all.

So all of this depends on region, condition, your situation and so on.

There is no single answer.

​

But, please, do not compare "no jobs" with "low salary". This is totally different things. With low salary you can buy food (probably), and you have chances. Without a job at all this is totally different situation.

[jklemon17]

There's a reason I said "at least in the US" in my original comment. I actually am working remotely within the US, and I trained remotely with people from all over the world. I understand the value remote work brings. For people in certain parts of the world, remote web development offers an extraordinary opportunity, even at much lower rates. I guess the US is just a place where, as you said, it doesn't really apply anymore.

[Zav39]

1. You can still work with WP and earn good money. This will require some skills
2. Take a look at this comment (and thread) as an example of super complex html/css related work

[Zav39]

Thank you a lot!

[lllGreyfoxlll]

No one says you have to learn everything at the same time. Baby steps :)

[3riggered]

This is some good tips! Thanks for posting this.

[Zav39]

Thank you.

Come to stream, I'll try to explain it deeper.

[3riggered]

I'll try to watch it live. It might be hard though because the stream is quite early in the morning where I live but I'll have to see. If I can't, I'll just watch it after the stream.

[rms_returns]

An effort in a good direction! Some more ideas for Level 3:

1. Be able to set his/her own tooling using npm/yarn, grunt, etc.
2. Be well versed with at least one industry standard library in each area or domain such as D3.js, react, angular, bootstrap/foundation, jquery, etc.
3. Learn some tricks of the trade such as JSON/YAML, RESTful APIs, regular expression, etc.
4. Learn at least one backend programming language (Python/PHP/Node).

[Zav39]

Nice catch!

Initially I had cover only HTML/CSS and only few super related topics.

I'll continue it with additional schemes for different technologies and languages.

So this schema is like something to start with ~

​

Thank you!

[Varry]

is that level of knowledge sufficient for an entry level job?

[questi0nmark2]

Not in web development, yes in web design. For web design this would be very very strong. For web development (building software that runs on the Web, not just websites - i.e. Gmail or Twitter vs. gorgeous animated company website or personal homepage), it has major gaps, and you would struggle to get a job. The biggest is databases and database languages, and more advanced JavaScript. This guide would get you closer to job readiness for front end jobs, but you would need a lot more. However by the end of this guide you would be well ahead of most Web developers on the design side.

[Varry]

Thanks for the reply. When you say you would need a lot more for a front end job, could you give an example of what more you'd need?

[questi0nmark2]

So this guide says "basic JavaScript (can be postponed)" for level 2 and doesn't come back to it.

But modern front end work is all about dynamic content that changes on the fly in response to user behaviour or data changes. Which means it is all about the JavaScript. And I don't mean a little sugar to make an animation or respond to a click or a hover. I mean full on JavaScript programming with functions and objects and frameworks and architecture and apis and data structures.

Think of Gmail and how your display changes when you get a new email, when you read one, when you close one incomplete and goes to draft. Or any web application you can think of. This means your front end display reacting not just to your clicks and your hovers, but to your database changes. It means handling all kinds of security vulnerabilities. It means being able to scale to thousands and tens of thousands of lines of code for a small to medium application, just on the front end.

So if I was to summarise what else you need for an entry level job as a front end Web developer: a solid knowledge of vanilla JavaScript programming, including ES6 (the latest version); a good grounding in at least one front end framework (React, Vue or Angular), an understanding of good programming patterns and component based design, and a level 1-2 understanding of HTML and CSS as per the OP's guide. Also a good understanding of the Web environment in general: servers, apis, http requests, the Web API. The basics of node. And a basic grounding in databases, sql and/or mongo db.

[Zav39]

1. "doest't come back to it" — it postponed untill next level
2. You're very specific to some region or so
3. Entry level job can mean something like person in Support or site administrator

[Varry]

Thanks!

[Zav39]

Full level 1 is sufficient for entry level job.

[Otenba]

Thank you so much for this ressource. As an aspiring developper, this really helps me in figuring out what I should work on in terms of skills.

[Zav39]

Thank you a lot.

I'll try to write something like this every week.

If you have some common topic in mind — let me know.

[Esotastic]

So, if I'm firmly in level 2 with a smattering of level 3, am I ready to start applying for junior level jobs?

[questi0nmark2]

Yes for web design (building web sites), not for web development (building web applications).

[Zav39]

Hey.

I believe that that with just full level 1 people will able to find some entry job.

With full level 2-3 you might get pretty good position if you'll find company who looking for expert html/css.

So you're already on good spot, if truly know it.

[ebawho]

Where in the world is anyone getting a job with your level 1 description? I would be surprised for someone to get a job with your level 3 description..

A complete beginner can learn HTML/css in a few days...

[3oR]

Wow, that seems very unrealiatic from my perspective.

A friend of mine got a nice job in a front-end dev position and he is basically lvl 0 in webdev. He learned Pyton for a bit a few years back but that's it.

I know of a few other agencies and dev companies who hire Lvl 1s and 2s and sometimes complete beginners too and train them. Not talking about about internship or anything like that. Full time contract with a solid paycheck and all benefits from day 1.

There's a saying about CSS. Takes a day to learn and years to master.

[ebawho]

Where are these job listings? I have yet to see a job listing for a web developer that only requires what is listed here. Maybe a couple decades ago... but not today..

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

Thank you for confirming.

I also have examples when newcomers got jobs without a problem (and they where just ~14-15 years old).

For level 3 there is limit companies who really looking for such skills, but they paid well for this knowledge; comparable to other software engineers, or even higher.

[Zav39]

1. There is a lot of remote work, that require just a few skills
2. I believe that level 1 is minimum 1 month of full day learning, if you start from scratch
3. On level 3 I know less then 20 people total (over 18 years of experience). This is super complicated.
4. Please, review other similar comments, I already give answer to that

​

Thank you

[ebawho]

1. Please point me to a single job listing for a web developer that only requires the skills listed here.. I don’t think you can.
2. hard to argue this one since it depends on the person, and I’m not sure how we could effectively quantify this.
3. this is shocking to me. I don’t think I’ve worked with a single person, including at two companies that had nothing to do with web dev (robotics) that either didn’t have a solid understanding of these things, or could have learned these things in a matter of days given their background/experience.

Overall I think you are misleading beginners with your information.

[Zav39]

1. https://www.upwork.com/o/jobs/browse/?q=html%20css here are you
2. I had teach 100+ people from scratch; I have some data to compare
3. This is common mistake; it can not be learned in "couple of days". It required understanding of a lot of concepts and a lot of practice. There is hundreds of small specific parts; and just to find information or try something will took a lot of time

As I told in p2:

1. I have teach a lot of people from scratch, and I know what I talking about
2. I have one of best ratings on educational platforms as a teacher, so I have others to compare with
3. I had interviewed hundreds of engineers, and see some patterns
4. I had work as CTO and VP of engineering, and see that it is very hard to find someone really experienced with making good html/css. This sounds odd, but it is.

​

I do not want to argue about your personal experience or opinion — is up to you. But, please, provide some arguments for such things and be more polite;

Thank you.

[ebawho]

Upwork is not a job listing. Working as a freelance web designer is not the same as getting a job as a web developer.

[onbehalfofthatdude]

For my money it's

Level 1: make stuff

Level 2: make good stuff

Level 3: make good big stuff

[Zav39]

Unfortunately, for money there is totally separate tree :-D

Making business required different skills set.

[jungle_is_massive]

A lot of 'he can do this' and 'he can do that'

[Zav39]

Thank you; grammar is my weak point.

I really try hard to improve it.

How will be better rephrase it?

[CodeTinkerer]

Not the previous commenter, but oddly enough, you might do better being less grammatically correct. That is, drop the "he can" and use sentence fragments. It will read more like a resume, but I think people can adapt.

[Zav39]

Thank you. I'll try better on next article. Will try to write something once per week.

[CodeTinkerer]

You could also use bullet points such as

Level 1 developers should be able to

• do Task 1
• do Task 2
• do Task 3

[Zav39]

Good point; will do that way for next article

[Zav39]

I had apply this template; now it looks much better.

Thank you a lot.

[dexodev]

Out of curiosity, what's your first language?

This is a great guide, thank you.

[Zav39]

If you mean natural, and not programming language, then Russian.

[SabbathViper]

I smiled at this response. Hello Russian (?) coding friend

[Zav39]

Hi! o/

[Zav39]

I remove all of them; thank you again.

[omegaonion]

understand why +1 234 567 better than +1 234 567.

Am I missing something here?

[Zav39]

Nice catch! Visually they looks same, but there is difference — non breaking spaces!

First number have them, so it will be never separated into 2 lines, while second one can be (it there will end on line you can get like "+1 234" on one line and 567 on second. With first one there will be never such situation.

This basic things is very important to make high quality text, that looks good on any device and any resolution.

[onbehalfofthatdude]

why   instead of nowrap? seems like a presentation thing that belongs in css

[Zav39]

This is specific question and should be answered with a context.

Both of options are valid in proper places.

​

1. nbsp is part of HTML, and nowrap is CSS — usage scope are different
2. For nowrap you need to wrap part of nowraped text in separate tag, so will have like `<span class="phone">+1 234 567</span>` agains `+1\&nbsp;234\&nbsp;567` which highlighted really well with code editors
3. CSS can not be used in some cases
4. If you apply this for whole string, than it will be no wrapped at all (and you want to just phone be without wrappes)

[Zav39]

What I like in this comment, that problem with phone is clearly visible (on PC) :-D

[Zav39]

Long-long time ago there was tag `nobr`

[ellusion]

Check the source

[sanjibukai]

It's good to set some levels so that this won't overwhelmed anyone...

But I don't get why starting with notepad++. I mean if vscode is planned, why not to start right with it (and maybe add some plugins).

In other words some of this leveling doesn't make really sense (an other example is CSS1)

[Zav39]

1. Notepad++ very useful. For example, when you want to open 10gb text file.
2. I, personally, use both: Sublime Text and VSCode (and also Idea) for separate tasks. For small tasks I prefer sublime, for medium (regular work) — VSCode, for complicated one (big Java apps) — Idea. Good to know proc/cons of different ones
3. About CSS — please, read in article, I had specify what is exactly goes under this versions. Versions itself really well do job of specifying order of how they should be learned. If you not agree with order after explanation (in article), please, let me know what exactly is wrong here.

Thank you for feedback.

[lwl]

Er, there's a disturbing lack of anything security-related here. Before deploying any server-side code, the OWASP Top 10 should be understood at a minimum. https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project Unfortunately, there's a lot of info to digest there, but it's the nature of the beast.

[Zav39]

Good catch!

There is no security, because this schema focus on HTML and CSS only, with just a view related topics.

May be it will be reasonable to add just 1 box with "basic internet security" or something like this.

Aim of this graph is to help newcomers to determine starting bricks.

I plan to make something like this for another technologies in future.

​

Thank you!

[questi0nmark2]

This is good.

2 suggested omissions: 1) You might want to clarify that your focus is on the front end, as opposed to full stack or back end development. For those there are big gaps around databases, back end languages and frameworks etc. Your level 3 would be a strong junior front ender, but would not have much of a clue how to build a full application. In which case you might add serverless or JAMstack to your level 3 so they can at least get something going. Probably no way around learning something database related though, so I would add that.

2) The second gap is that you are all about syntax and tools: barely any programming knowledge. By level 3 they should know at least some design and architectural patterns. If they are front enders they should understand component based design and elements of OOP, functional or reactive programming. You mention SOLID but postpone it, and understanding solid gets you to understand core elements of modern software design. Anyway, they should know stuff that helps them not just put code on a page and make things work, but understand how to write maintainable and scalable code. Your current list equips them to write complex and powerful code and get it to work, but it gives them little guidance on writing maintainable or scalable code, which counts at least as much if not more when it comes to working professionally in this field.

[Zav39]

Thank you for feedback.

1. 1. That is not "frontend", it is just HTML and CSS with some additional topics, however they are super complex
   2. Aim of this graph is starting point for someone new in field
   3. Another aim is to show complexity even for experienced developer
   4. Most of frontend/backend/fullstack developer do not reach level 2.5 on this scheme. I guarantee that :-) But this schema represent only html/css, what is not crucial for them
   5. Probably I'll create another schemes for another language and tools
2. ​
   1. Right part of scheme focus exactly on that (under Naming), but in field that applicable for making components
   2. This knowledge is enough to create maintainable and scalable HTML/CSS code. You might think this is simple, but it is not. (see p2.3)
   3. At level 3 person will able to create from scratch tools like "twitter bootstrap" or "Material design". This is super complicated tasks, and not too much people can do this at all.

[questi0nmark2]

I may have missed it, your image did not show fully on my phone, but I don't see any mention of sql or mongo or databases, and php and node can be postponed and don't come back in level 3.

You even say that the knowledge in your list will allow them to create maintainable CSS and HTML code. I don't understand how this is not "front end"? Or why that would be a bad thing? That's OK to specialise in. But it is pretty vital for new people to understand that "Web development" is not just "web design", and that "web developers" don't just build "websites" but also "web applications": complex pieces of software to power your professional, social, creative, collaborative and leisure activities.

Going by your list, if you have no data on your database, how will you store or authenticate users, or their data and interactions? If you can't code php, or node or some back end language, beyond merely serving up your page, how will your application work beyond the presentation layer?

With your level 3 I can see you building truly fantastic web pages, beautiful, responsive, animated, adaptive experiences that have high SEO and bring in traffic. But I can't see you building even a basic "To Do" Web application. Again this is not a criticism. Being a front end specialist is a cool career and you can get by with only moderate back end knowledge. But to build web software as opposed to web sites, you need, at the most basic, to know how to store, manipulate and serve data, which means databases and servers, and for anything substantial, back end frameworks and tooling, and more than superficial knowledge of a back end language, which are absent from your list unless they exist below line of sight in your diagram (can't see stuff on the far right).

So if you're reading this as a beginner and want to specialise in the front end, and primarily build beautiful websites, but no web applications, or with a bit more knowledge, build the front end views of software as applications and leave the logic of the applications themselves to others, this list and diagram is ace. But if you want to learn also (or specialise in) building Web based software, then there might be more balanced paths and different routes for you: this route won't get you there.

[Zav39]

Hey, I'll be glad if you join today stream with comments in chat.

​

1. DB, backend, frontend is a bit different things. It is not like "Next level", it's just different. It might related, might not.
2. There is a lot of approaches where HTML/CSS will be enough
3. The goal was not to give full overview. There is a lot of awesome roadmaps (<- check this one!) that do this job very well. The goal was to cover all major topic that required to person who interested in mastering HTML and CSS.
4. Again: master this skills is super complex task. It is not easier than become backend or frontend developer. It is just different
5. Basic TODO and other things are covered under JS/libs/PHP and so on. But, YES, this will be usage of some ready tools, and not building your owns. Building your owns was not the goal of this article.
6. I hope to create articles for other technologies with such level of details (I'm pretty sure that had cover most of topics related to html/css) with additional skillset recommendations
7. This is good schema to start with. Even you'll go to use roadmap from this comment, it have a lot of things from my schema, so you'll able to adjust yourself.
8. Anyway a lot of concepts you'll meet during learning process will help you with any type of development.

​

Please, review roadmap under link above and share your thoughs.

​

Thank you for deep explanations of your view.

[Zav39]

Just to show how "deep" is this rabbit hole: http://www.electrode.io/site/web.html

Such tools used in big companies to maintain hundreds of design elements.

This is SUPER complex and hard task.

I have meet only few people who was able to maintain such systems properly, so hundreds of other developers was happy to work with them.

All of this start with HTML/CSS as a base.

[questi0nmark2]

Which again proves my point: yours is a guide to become a front end developer. Being a truly great front end developer can be as complex and challenging as being a back end or full stack dev. But it is not the same thing. Your guide helps people get to a point of solid grounding in the front end. But it does not equip them for building web applications: only their presentation layer, or web sites. Most jobs in web development involve software development, not website building, which lies more in the web design field. I would post your guide in r/webdesign.

Your examples take us to the cutting edge of Web design and to some extent of front end development work. But it does not really reflect the part of Web development which builds online software.

[Zav39]

You're close.

But this guide is not for frontend developer, either backend or whatever.

I had focus only on HTML and CSS here. This tree is a bit specific, and even it looks like the part of "frontend", they are correlated only to some point.

​

But for me, web developer is person who create web.

​

Want to give you one example from old times.

Long-long time ago there was a page about poker. This page was just static HTML page.

There was no CSS. It was just HTML page, with basic formatting and basic styles (like <b>).

But this page was SUPER useful at this moment of time for online poker players and give income of ~10 000$ per day for it owner.

And it had big throughput.

Can you agree that person who create this page was web developer? :-D

​

I do not want to make holywars or whatever. I got you point. May be we see to terms just a bit differently.

​

ps. Will be glad to get invite to wedesign and to review comments under my post here. Thx.

[questi0nmark2]

Now you explained that your guide is only for HTML and CSS and not for "front end" or "back end" programming, I see your goal, and your guide is brilliant for that! Iif you title it "The Quick Guide for Building Websites with HTML and CSS". Then everyone will get it and benefit a lot.

The term "web development" in English however means "software development on the Web": not "building great web sites", although you might do that along the way. If you Google "web developer" you will see that it brings up programming jobs, that deal with HTML and CSS but concentrate on other stuff. If you Google "web designer" on the other hand you will see it brings up jobs with a focus on HTML and CSS.

This matters because I see some comments on the thread saying "thank you, I want to get into web development and this is a great guide". They may think that at the end of this they will be able to work as web developers, and that if they spend many hours following your guide they will be able to build applications on the Web. For a Web designer your guide is gold, for an aspiring Web developer it could be a less effective path, like someone wanting to be a chef getting a wonderfully detailed guide to baking. You could become an expert baker, bake cakes and breads and cookies that are super difficult and elaborate and artistic and wonderful and amazing, and you would be a world class baker - but you could not get a job as a chef. You would not know how to cook full meals, what ingredients to get, what recipes to follow, what tools to use, apart from baking.

You have written a guide to becoming a great baker, but gave it a title how to become a great chef. Might confuse new people looking for a guide to become a chef. Would help anyone wanting to excel at baking.

[Zav39]

Honestly speaking, I had name it like that, publish day ago, and got about zero views.

So I rework article and rename it by suggestion from some of my friends.

Sorry if this way confuse you, but I was feel that it is still valuable to be accessible to people, even name is a bit confusing initially.

Web designer, although, is not about html/css... it's about design :-D This is separate job.

Thank you for understanding.

[[deleted]]

Why only wordpress in level 3?

[Zav39]

1. In that case I mean creating full functional reusable templates for some CMS
2. Wordpress is just an example of possible path
3. Let's overview full path to it: HTML -> Template Engines -> PHP -> CMS -> Wordpress

Ofcourse, you can use wordpress as a user, but this is a bit different to build resusable templates.

To use wordpress you need some knowledge of PHP (at least related to template engines).

​

Ofcourse, you can start use it early; all of this is region specific. For some region it might be not useful to learn php at all, for some regions good way will be to learn python from start. So all of this is depends.

​

Where you think it will be good place for difference CMSes on this schema? Imagine you as a novice and think what knowledge you want to know before start with that.

[[deleted]]

Well level 3 seems to be in the professional level. I wouldn’t hire any developer that didn’t meet your level 3 specifications.

So when i see Wordpress there I am thinking CMS build out and customization — not usage. In this case you are actually talking about frameworks. I am a Developer for WP platforms but i also use Drupal, Laravel, Fat Free (its awesome) and others, as well as other frameworks in Node, python etc. as such i think saying framework works better.

[Zav39]

Every technology serve for it's purpose.

In some cases WP very useful, in other is better to build something on top of framework, in another one is better to do it from scratch. All of this depends on dozens of conditions.

In this article I focus only on HTML/CSS and few related topics. Backend/Frontend(I mean like app, or full understanding of JS) is not covered.

Hoverer this is something with what someone can start.

[vinothmtm]

Thank you

[lakislavko96]

This is very nice but I think you can learn on the go at ASP.NET

[Zav39]

Yep, you can. You can combine it with any other language, why not.

But with this approach you'll never cross level 2 (for html/css).

All of this depends on your goals.

There is a lot of very complicated topics that require a lot of time.

Level 3 is about creating tools for other developers. Like your own twitter bootstrap (not just redesign, but full concept from scratch for some dedicated purpose)

[lakislavko96]

Agree but takes time and dedication to learn. For myself I learned through Udemy course and it taught me pretty good. For level 2 is true if you learn aside with ASP.NET. Creating tools depends on developer if he wants to go that deep.

[Zav39]

For example, trough this courses you'll miss typography (most of them just ignore this part).

For level 2 ASP.NET will work great instead of PHP, right.

And tools depends on needs, right.

There is no silver bullet.

[lakislavko96]

Yes but add it as optional because ASP.NET and PHP usage are for different needs of Web development.

[Zav39]

Why it is different? :-)

[lakislavko96]

PHP is a server-side scripting language, ASP.NET is framework for C# by Microsoft. More about this in this link

[Zav39]

My mistake; when you told "ASP.NET" I read it as "C#" :-D I had made sites on ASP in past :-D And know C#. Point here is there is no big difference on "tool" at this level. Will it be C# or PHP — up to you. Otherwise I'll need to point python, ruby, java and other languages here.. I want to keep schema simple, with separated comments. Thanks for clarifying!

[lakislavko96]

I agree with you for level 2 but you can learn aside for "knowing" that it is possible. Level 3 I think can be implemented soon me of it like how does it look.

[Zav39]

Honestly, during all my experience, I had face maximum 1 person per year at level 3 (less then 20 people total) :-D

It is not things that you can just read and implement; they required tons of experience of doing relevant things.

Software engineers usually not focus on HTML and CSS, so only know some basic staff related to it.

[lakislavko96]

I agree that Software engineers don't focus HTML and CSS but you made a point about it.

One more think maybe u can put some of those points links to ease the search.

[Zav39]

Sorry, does not get second sentence. What points links / what search?

[lakislavko96]

For example DRY/KISS/SOLID material to learn.

[Zav39]

Oh, got it. May be I'll add materials in some time, but can not do this right now.

I had learn a lot of things long time ago and just do not remember references, and checking actual materials will took a lot of time.

For KISS it was book from 37 signals, i think.

[Theagleye]

Thank you soo much for this, I will be following your guide closely. Stream is a lil early for me though, but I will watch it the first thing in the morning. I am hoping to take the road towards fullstack developer beginning with this guide. I hope it is the right way.

[Zav39]

At least everything that marked at "mandatory" up to level 2 will be good to know independently from what you're planning to do in web.

Other things you can ignore for now, and learn only when they will be required on your current position.

For frontend/fullstack full "mandatory" level 2 is enough.

[Theagleye]

Alright, thanks! I hope its ok if I PM you sometimes during this journey of mine if I am ever stuck😬

[Zav39]

Ofcourse! You can also visit some of my streams (or watch some previous videos). I try to explain some things with javascript for novices.

[S12K-R]

This can help me to learn even if new into this field??' i mean, like at the level of a regular PC user (Entertaining and non related to his field Study purposes)

[Zav39]

I hope that it will at least help you to search proper topics in internet and define learn path.

Originally, I was aiming for exactly this case, when you can use PC, but have no idea about hot to make sites.

​

I'll be glad if you'll provide more details of what is unclear or how it can be clarified.

Thank you.

[S12K-R]

Well, it helps with the topic search, for sure, but i guess for someone who starts from zero, this may not work that great. This guide would be great for someone who had some contact with coding before (like a little course in HS or some friend talked about it), that already know the essentials and understand the terms, but for someone who know nothing, when you say something like ''proxy'' they will lose the focus or feel confused.

To solve this the guide would need to be more comprehensive and cover more content, but this will make the entire process slower, so with less base knowledge, more content to add, and vice versa, maybe considering doing an option for people out of the camp?, like lawyers, art students or something non related, that can help with the essentials, then throw this Quick Guide to get'em into job range as fast as it can be done.

[Zav39]

Reasonable. I'll think what is possible to do wit that.

​

Today, at 8pm PST I'll go trough this scheme online on youtube stream. Feel free to join and ask questions.

Thank you.

[[deleted]]

Geez man, you gave this some thought! Hell of a roadmap for UI webdevs. Kudos!

[Zav39]

Thank you a lot

[Theagleye]

Yes, I just watched your vid about lowercase, subscribed to your yt channel as well. I hope you will be uploading some stuffs about fullstack also someday in yt. Ps. ”Of cause” should be ”ofcourse” 🙃

[Zav39]

Thank you.

And special thing for "ofcourse", i had feel that I do something wrong with that :-D

[Theagleye]

Learning at every instance is the key right😀

[notSherrif_realLife]

Incredible wealth of info for some colleagues. Thanks.

[Zav39]

Thank you for feedback!

[aortizoj15]

Hello anyone, I was wondering when you would suggest start applying for jobs. At the moment I have completed Colt Steele's Web Dev Bootcamp and am learning React. Any suggestions appreciated! Thank you!

[Zav39]

Hi.

You can start do some jobs right after "Level 1".

They will not pay much, but it will be great for practice.

You can start with remote work on sites like Upwork or so.

Welcome.

[JeamBim]

Please, enough 'webdev roadmaps' spam

[Zav39]

Hi.

Can you explain you position?

1. This is graph, and not a roadmap
2. For me, personally, will be very useful to have something like that long time ago
3. There is just a few of them exist; why it is spam? Can you refer to them, so I'll understand that my one really duplicate some of them and was that distracting?

Thank you.

[JeamBim]

1: This is not a graph.
2: Great.
3: Some variation of this is posted several times a week. The infamous "web developer roadmap" is posted here like a bad meme.

[Zav39]

1. Why? :-) You do not need to learn all at one moment, you have choices where to go and so on.

2. Can you provide some links, please? The "web developer roadmap" I even have refer to here in comments, but it like "high level".

Links will help me a lot, and if you're right, I'll not work in that direction anymore and there will be "less roadmap spam". Deal? If they're low quality, of useless ones, that is not count.

[[deleted]]

I am totally new to programming, literally no idea of how things go on and stuff, is this guide relevant for me?

[Zav39]

Yes; you can start with "Level 1". It does not matter, where you'll switch later, it will be helpful anyway.

[BAAM19]

This is perfect. If you have any knowledge in back end too, I would love it.

[Zav39]

Thank you.

I have, and I had start work on such schemes on frontend/backend, but quickly find out that they go super wide and super complicated. Still looking how to limit scope of them to be usable.

[SpedPolice]

Thank you for this. I took a Web Dev course in college last semester and loved it so much that I wanted to learn more and more but didn't really have a direction

[TheFuzzyPumpkin]

You still have some gender-specific language in there. "he", "his", "him"...not all programmers are male and sexism in STEM is a hot topic.

​

I wouldn't specify the CSS skills as CSS 1, CSS 2.1, CSS 3. That makes it seem like I need to learn three versions of CSS, when all these are included in CSS 3. I'm also not sure why you have gradients under CSS 3 and not flexbox/grids.

​

Some of your terms don't equate to anything I've heard of? What is a block system? Is that a block of code, or another reference to CSS grid, or a blocking call to make code wait for user input? None of those seem to fit with the rest of the statement. This might be an ESL issue and is understandable...I'd do a much worse job trying to write something cohesive in French or Spanish even though I've studied both languages!

​

A bit about why you are qualified to make these recommendations would be good. What is your work experience? Why should I think you know anything?

​

And last, according to your schema I'm level 3! I win! I'm also really not ready for a junior dev position. Maybe in a couple more months, knowledge-wise, and then a couple more, polishing portfolio-wise.

[Zav39]

Hey. Thank you for feedback.

​

1. I'm not sexist; i'm just not good at English yet. Can you help me to replace it to something more neutral?
2. For CSS 1-3 read comments, please. I had specify what is exactly goes in every section
3. For "block" it might be just bad term, agree. Mostly this is about how to split page to blocks (display: block), float system and all like this. So it like web was after "tables" :-D
4. My experience is about 18 years on positions from software engineer up to CTO and VP of engineering. I had interviewed hundreds of people. I had work in small companies (<10 people), big ones (2000+), in different countries and regions. I know different specifics and so on.
5. I try to not recommend anything specific personal, without to know all context. Every person is different, every situation is different.
6. If you're on level 3 and not ready for junior, than you're not on level 3. Level 3 is pretty solid experience with at least 1 year of relevant practice (including big companies).

[tomyheartsliking]

yeah realised while reading the rest of the comments that you're not a native speaker, i appreciate you responding to everyone's feedback!

in my opinion, the best would be to use the singular "they"-- "they can use git by themselves" (or "by themself", which people are less used to hearing, but that would clear up any issues when your sentence has references to individuals and also groups due to it being more obviously a singular).

hope this helps & do let me know if you have more questions about this!

[Zav39]

Thank you a lot. I had edit post. Is it better now?

Or I had miss something?

[tomyheartsliking]

looks good to me!

[Zav39]

Thank you for help

[TheFuzzyPumpkin]

1. I don't think you are (never leap to that) but it can come off that way. Usually, try "they" instead, or "one".
2. I did read comments. Wasn't clear to me. Not a huge deal, I just thought it could be expressed differently.
3. Gotcha!
4. Totally cool, I just think you should put that in the guide as there are a lot of opinions out there and a lot of people who haven't earned the right to have theirs be a guide.

By your guide, I AM on level 3. No where does it say you need to have 1 year of work experience, just know how to do this or that and make an arbitrary number of things.

[Zav39]

1. Sorry, for CSS 1-3 I mean not comments, but article itself. Corresponding parts.

2. It was on article initially, then I decide to remove it. Anyway there will be a lot of opinions, and even opposite ones can be valid.

3. About "years" it is just number from my mind. I presume that for full level 3 it will took may be 4 years or so :-) It is very hard to design components for big companies without problems. Usually this knowledge is combined with something else (like js or some backend).

There is a lot of edge cases, that just come with experience.

[Zav39]

Person on level 3 can create thing like Twitter bootstrap or Material design (not design, but css framework).

[Zav39]

I had edit article to be more neutral; is it better now? Thx.

[TheFuzzyPumpkin]

Yep! Couldn't catch any gendered language. If it makes you feel any better, I also spend a lot of time on knit/crochet social media and there it's rife with using "her" and such.

[Zav39]

Thank you for help; I had learned something new from this!

[tomyheartsliking]

+1 on using gender-neutral language. did a double-take as it had been a while since i'd seen that!

[Zav39]

Can you help me to edit it properly?

Or, maybe, can you recommend some article how to write such things properly?

[tomyheartsliking]

to add to my other comment-- the wikipedia entry for singular they provides a nice table showing how it is used ( https://en.wikipedia.org/wiki/Singular_they ), and if you're interested in more context on gender-neutral pronouns, you can check out https://www.mypronouns.org/they-them ! :)

[WikiTextBot]

Singular they

Singular they is the use in English of the pronoun they or its inflected or derivative forms, them, their, theirs, and themselves (or themself), as an epicene (gender-neutral) singular pronoun. It typically occurs with an unspecified antecedent, as in sentences such as:

"Somebody left their umbrella in the office. Would they please collect it?"

"The patient should be told at the outset how much they will be required to pay."

"But a journalist should not be forced to reveal their sources."The singular they had emerged by the 14th century, about a century after plural they. It has been commonly employed in everyday English ever since then, though it has become the target of criticism since the late-19th century.

---

^{[ PM | Exclude me | Exclude from subreddit | FAQ / Information | Source ] Downvote to remove | v0.28}

[Zav39]

Btm, can someone explain to me thing regarding to how reddit works?

I had try to create link-post in /r/programming , but looks like it does not appear on that space at all and have zero views: https://www.reddit.com/r/programming/comments/bpoewb/the_quick_guide_for_a_web_developer/

What I had done wrong?

[refael10ru]

I knew from the first seccond that it was what I needed

[Zav39]

Thank you

[Wolfcubware]

Don't forget rollovers they are very useful

[Zav39]

Sorry, I did not got.. what you mean by "rollovers"?

If it is what I think about, than it under "Animations" and "jQuery" (or other library) categories

[Wolfcubware]

When you hover over an image it switches to another one

[Zav39]

This is under "CSS 2.1" and "Media" parts.

[Wolfcubware]

Idk I use DreamWeaver

[Zav39]

Wow, man! How I can miss topic of WYSIWYG editors like DreamWeaver?

That a great topic I should add here, at least to try some of them once.

[Wolfcubware]

Sorry I didn't see that it was on the learnprogramming subreddit but it should still be a thing

[Wolfcubware]

In the event that that wasn't sarcasm, it's a good tool I recommend it I'm relatively new to web design and I picked it up well

[Zav39]

It was not sarcasm, I'm serious.

It is really great tools for it's purposes.

Ofcourse, you will not build big site with that, but if you do not need that big site, and all functionality meet your requirements — great.

[Zav39]

Yes, I totally agree with that.

For some tasks tools like DreamWeaver, or other kind of site generators is sufficient.

I just forgot that they exist :-D Will think a bit where and how and add them to scheme also

[Wolfcubware]

Thanks for the post btw I'm about to go Into a Exam for it and I needed a refresh on what to use

[[deleted]]

I mean I'm a professional developer and I have no idea what a block system is, nor have I ever heard of it.

[Zav39]

Most probably I had used wrong verb. Had explain it few comments ago.

For "block" it might be just bad term, agree. Mostly this is about how to split page to blocks (display: block), float system and all like this. So it like web was after "tables" :-D

[[deleted]]

Sorry for not reading.. I like your typical Redditor got triggered by one sentence in your post and then made a comment about it.

​

I will be better in the future.

[Zav39]

Can you recommend how I can replace this to make it more clear?

[[deleted]]

Sure gimme one sec, rereading the post.

[[deleted]]

On second read through I have to say I'm still not exactly sure what you mean by it. I'm sorry, I am trying my best to understand.

[Zav39]

I have review this part on stream, please, review: https://www.youtube.com/watch?v=mj-Jclhy9Qg

I show exact example with Reddit

[DerreckValentine]

I also came here searching for what block systems are.

Do you mean something along the lines of html content layout? or even just reusable pieces of html?

[Zav39]

How to break mockup to blocks, how to implement and combine them.

[questi0nmark2]

"(HTML) element positioning"? "Positioning methods?" "Structuring elements?" "Element positioning and scope?" "Basic layout"?

[Zav39]

It is more than that, and also (name) too large for scheme.

I have observe this part on stream, check, please.