Websites are the foundation of information dispersal in 2022. It is not just text on a page. It is the first impression that a client gets of your company. It can turn off a client before they even learn about your company. Let’s say you want to create a website for an online casino website. We click on the link. We see a landing page (a page that is specifically designed as being the ‘first impression’ of the website). So what do we see when we look at Grande Vegas’s website?
You get $300 as a “welcome bonus”. You see that there are recent winners in $5000-$7000 range. You can see a part of their selection of games. For the most part, it is a well-designed website.
Now you want to know how you can create a website like that to make a successful business for yourself (or just even sell your programming skills to others).
Realistically, from a technical skills perspective, you can get a strong foundation of skills with 800 hours of investment (20 hours per week, 4 weeks per month, and 10 months). But what exactly does that entail?
1 Week (20 hours) – Basics of HTML and CSS
During the first week (20 hours) focus on the basics of HTML and CSS. In other words, static text and images. The stuff from HTML 4.0 and CSS 2.0 (excluding forms).
6 Weeks (120 hours) – Advanced HTML and CSS – 1 project
This is where you focus on the advanced HTML and CSS topics and actually create your first project for your portfolio:
- Flexbox — Flexbox was designed as a one-dimensional layout model. When laying out items on the web page, you are only dealing with one dimension at at time. Either columns or rows, and depending on the screen width (or height), the items in displayed in a column adjust accordingly. Flexbox design is crucial in designing “mobile first”, while designing for a tablet or desktop at the same time.
- Animations — How to add animations on a webpage using only CSS and not Javascript. It deals with transitions or one item on the page to another.
- Forms — Forms are critical for getting input from the user. A form can be as simple as a button or it can be as complex as data entry, uploading of documents, or interacting with images, sounds, and video. Data entry can indicate what to display next (simple forms), send email messages (contact forms), or interact with a database (complex forms).
- Positioning elements — How elements are placed on a screen: static positioning, relative positioning, absolute positioning, z-index (3rd dimension of positioning), fixed positioning, sticky positioning, scroll index,
- Embedding media content — Images (complex when combined with CSS), video, audio, objects, SVG, responsive images,
You will also learn how to manage a project:
- BEM Methodology — Develop sites that should be launched fast and supported for a long time. It helps to create extendable and reusable interface components. It simpler terms, it is bringing traditional software engineering concepts to web development. — https://en.bem.info/methodology/
- Git — Git is a free and open source distributed version control system. Most people associate GIT with Github and Gitlab, but Git by itself is just a Linux command line application.
If you do not have a professional GIT account, most employers will not even bother to look at your resume. Your GIT account does not need to contain projects that you have sold, or were paid for, or as part of a “major” open-source project. The purpose of the GIT account is for the employer to get an idea of how exactly you program. So the projects that you display need to be your own, and any “forked” projects need to clearly state that they were forked and what exactly you did (or did not do) to change or add to them.
Having forked projects that you have done nothing with is not a problem, but if you want to show off your stuff to your boss, you need to make it obvious what is yours (and ready to show off) and what is just “other stuff” (and should be ignored). Maybe even make it private while you are applying for jobs.
Do not consider this section “done” until you have a project that you would consider acceptable to show to a future employer.
Adaptive Web Design and Working with Layouts — 3 weeks — 1 project
As with the previous section, do not consider this section “done” until you have a project that you would consider acceptable to present to a future employer. So when you are done with this section, you will have 2 completed projects.
- Learn to create a design specification document. This is the document that you will use to create your website.
- Grid layout technology.
- Ensure your finished site looks good on mobile phones, tablets, and desktops.
- w3css — A set of open source CSS files to help in website design.
Javascript and working with the browser — 6 weeks — 1 project
Learn about the basics of Javascript including:
- Datatypes
- Statements
- Loops
- Functions
- The final project, an interactive website where the front end is controlled using Javascript.
After completing this section (and the previous 2 sections), you will have 3 projects in your professional portfolio.
Applied Javascript — 6 weeks — 1 project
Learn how to use Javascript in combination with a web application.
- Object Oriented Programming.
- Asynchronous code.
- How to interact with servers.
- How to bundle project files together.
- Add third party dependencies.
- Upload your final project to the internet.
By the time you are done, you will now have 4 projects for your professional resume.
React Library or some other third party user interface Javascript library — 4 weeks — 1 project
- Create a website using components from the react library
- Build on top of these basic components to create more complex components.
Complete this section’s project, and you will now have 5 projects for your professional resume.
Back-end basics for web developers — 6 weeks — 1 project
Learn how to have your website interact with a server.
- Learn Node.js or golang or php (a backend programming language).
- Create server-side API for the application you created previously.
Project 6 for your portfolio.
Interacting with a database (MySQL)
- Use Node.js or golang or php (a backend programming language).
- Create a serverside API.
- Interact with a database.
- Create login and other security features.
Project 7 for your portfolio.
Tools for web development, by Mozilla
- Thimble – Educational Code Editor.
- X-Ray Goggles – Lets you remix your favorite webpage — another version of a code editor where you start with an existing webpage.
Mozilla published courses
- Learn Web Development, published by Mozilla. — https://developer.mozilla.org/en-US/docs/Learn.
- w3css – https://www.w3schools.com/.
Summary
Even if you plan to specialize in either the front end web development (user interaction) or backend web development (serverside programming) or databases (storage and manipulation of the data), it is a good idea to be familiar with all part of a website development project.
Plus, by using this guide as a general idea of how to learn website development (even if you do not go into a formal course), it will allow you to create a solid, presentable, professional github portfolio that you will be proud to display to future employers.
Be it game development, commerce, information gathering, information storage, or information sharing, websites (and their closely related mobile phone apps) are a major part of software development in 2022 and beyond.
Although solid languages like C/C++ are still used (and will continue to be used for a long time), understanding web development is a must for any serious Software Engineer.
