- image from Learning the fundamental language of the web, by Mike Riley
When it comes to starting something new, the first steps or figuring out the starting point is always an issue. For example, to learn how to swim, the first lesson is to control once urge to stand or be upright. This is always the most difficult given its a natural body response. A wannabe swimmer with no knowledge of this fact will sink to the button as fast as he or she got into the water. This same concept applies when it comes to learning HTML/CSS.
The most important thing is to understand how to go about learning, starting small and gradually advancing to more complex issues. For me, I learn t this the hard way. Not only did I give up at one instance, but I was also totally convinced front end development was not my thing. So the real question is how do you start small and advance through?. Well, pay attention to these four steps.
Step 1: Start By Learning The Use of Tags
HTML semantic tags are the key indigents if you view front end development as cooking. You must use /have the tags if you need to cook up a website for example. Understanding the different tags and how they apply solves 40% of the issue. To break it down further, view tags in the same way you view a book structure. Any book does have paragraphs, a list of items arranged in a different order depending on the message, different presentation of the paragraph body among others. All this is almost if not identical to HTML and CSS tags. The key issues are to understand the use and how to write the tags as well as understanding which are the HTML tags and which as the styling tags.
Step 2: Look Into Structuring a Website
The architectural presentation of a website is what makes it stand out. This all involves determining where the sidebar will be, the body, the footer, and the top navbar. Having understood and played around with different tags, structuring a website heat map is the next step. How is this achieved?. we’ll two basic components, on the HTML side work with div tags only and concentrate most of the work to the CSS side. On the CSS side, the learner will need to only focus and choose one of the currently three layout technologies available.
- Float => recommend for starters
- flex-box => for advanced level
- grid => for advanced level and intermediate users
In this step, the trick is to move the empty divs, give them a size and height then create a website blueprint. For better visibility, it is wise to use different colors for different divs in different sections.
Step 3: Graduate to making your own CSS framework
Most people at this point tend to dive into the use of the existing CSS frameworks such as bootstrap. Personally, this is a very fast and dangerous rush. Bootstrap, for example, is, in fact, a great CSS framework but the issue with it is that all the work has been done already and for anyone planning to learn the fundamentals of CSS, this is a step back. Why am I saying it is a step back, CSS frameworks are not absolute, developers do change them at times to accommodate their needs. Having not understood the inner depth of CSS, modifying it becomes a challenge. To solve this issue it is recommended that developers start by making their own basic CSS framework mainly by taking their work in step 2 and now converting that into a working framework. This will help a lot in the realization of code usability.
Step 4: Now, use SASS to make CSS framework
If you have achieved all the above steps, u can call your self an inter medially software developer, yap!!!. so what is SASS?. This is a style sheet programming language that comes very handy in the development of large programming projects. Mmhh, how so?.
Well, using SASS, we can have nested rules, work better with inline imports, develop much faster and use a variable. Yes, a variable that can be reused throughout the code and in case of changes, make a change at one point and it will reflect throughout the code where that particular variable was used. How awesome is that?
The trick in this step is to make the same framework from step 3 now using SASS.
The trick in this step is to make the same framework from step 3 now using SASS.
If someone told me this when I was starting, I am confident that I would have achieved a lot in less time and spare myself the disappointments that come from finding coding overwhelming. Having gone through those steps, the only thing left is to do more practice through the cloning of websites and advancing more into CSS animation and so on and so o