- Keep it simple: A clean and simple design is essential for any e-commerce website. Visitors should be able to find what they are looking for quickly and easily. Avoid clutter and unnecessary elements that can distract or confuse the user.
- Use high-quality images and videos: High-quality images and videos are essential for showcasing your products. They help to build trust and credibility with your customers and can also increase conversion rates. Make sure to use clear, well-lit images that accurately represent your products.
- Make it mobile-friendly: With more and more people using their mobile devices to shop online, it’s essential to ensure that your e-commerce website is mobile-friendly. This means that the website should be optimized for smaller screens and touch-based navigation.
- Use clear and concise product descriptions: Product descriptions are an important part of e-commerce design. They should be clear, concise, and informative. Make sure to include all relevant information, such as dimensions, materials, and care instructions.
- Implement easy navigation: Navigation is crucial for an e-commerce website. Visitors should be able to find what they are looking for quickly and easily. Use clear and intuitive navigation menus, and include search functionality to make it easy for visitors to find specific products.
- Include customer reviews: Customer reviews can be a powerful tool for increasing trust and credibility with your customers. Make sure to include reviews on product pages, and consider including a section on your homepage that showcases your best reviews.
- Optimize for conversions: The ultimate goal of e-commerce design is to increase conversions. This means making it easy for visitors to find what they are looking for, and to complete their purchase. Make sure to include clear calls-to-action, such as “add to cart” buttons, and consider implementing features like live chat or an FAQ section to help visitors with any questions or concerns they may have.
- Test and optimize: Finally, it’s essential to regularly test and optimize your e-commerce website. Use tools like A/B testing to try different design elements and see what works best. Pay attention to metrics such as bounce rate and conversion rate to see how your visitors are interacting with your website.
In conclusion, a well-designed e-commerce website is essential for any business looking to sell products online. By following these best practices, you can create a website that is visually appealing, easy to navigate, and optimized for conversions. Regular testing and optimization will help you to improve the user experience over time and increase sales.
Source : https://hexcolor.co/hub/e-commerce-homepage-examples-cro-best-practices
The post E-commerce Design Best Practices appeared first on VVDesigns.]]>This month all of our web design trends have a common theme – imagery. Whether it’s seasonal or just coincidence, there’s a shift in the styles and types of images on many designs right now. One thing that might push these design trends is a relaxation of COVID-spurred rules worldwide or even fatigue from the pandemic.
Here’s what’s trending in design this month.
1. Little Images Everywhere
The jury is still out on whether we love or hate this design trend – tiny images (and videos) everywhere.
The thing that’s nice is there is a lot to see and interact with. The thing that’s challenging is that these designs can feel a bit unbalanced and all over the place.
Most of these designs feature four or more images or videos at a time. That can be a lot for a user to digest when we are accustomed to having just one thing to look at in the hero area.
Those four or more images then include all of the other user interface elements that you would expect on the page – navigation, large headline, secondary text, scroll, or engagement interaction. It can be a lot to decipher.
Tokyu Garden City does it with a mix of still and moving images with sliders and other animations. The images are always changing and moving, and there’s constantly something new to look at with movement at the top and bottom of the screen.
Buro Jantzen takes the tiny image idea to an extreme with ten images on the homepage. And every one is smaller than a postage stamp. There is a cool effect that happens with each image though. On hover, the small image pops into the large black box at a size where you can really see the photo.
Oliver Guy uses a combination of video images on his website, which makes perfect sense for his industry of drone photography. There’s some interesting hover animation happening that allows you to see additional video clips without leaving the homepage. The contrast of small video on the white background makes this design easy to understand.
2. Big Detail Photography
Photographic details in all their glory. Images and elements that are so in your face that you can see every detail. That’s majorly trending in website design.
Big detail photography and videography is one of those image trends that can be so visually interesting that you can’t look away. It has other benefits, too, such as facilitating decision-making for e-commerce or helping someone better understand what an item is or the overall messaging.
Each of these examples shows something larger than life-size.
Karak creates ceramic tiles. The primary background image is so big and with such detail that it almost only serves as texture for the design. But it is paired with a smaller image and video that pull everything together for a complete understanding. The big detail image is beautiful and exciting and provides an extra layer of information.
Wuillemin Fleuristes features an off-balanced hero image with a large floral detail. What’s interesting about this design choice for a detail image is that it is the only image on the screen and partially obscured by a tinted box and text element. The overall design draws the eye but may leave the user wanting to see a little more of the image.
Horage pushes its watch in your face with motion in a video that zooms the product closer and closer into view. The combination of detailed video with very little text is a bold choice for e-commerce and might work because this item is still in the preorder phase. Detailed imaging is designed to help create a desire for the product.
3. Big Faces are Back
After two years of not having that many faces in design projects, designers are going big and bold and showing people again.
One of the reasons we haven’t seen as many faces in design projects is because there was concern over how to show people – masked or maskless, alone or in crowds – and it caused more concern than was worth just going another way.
But projects with big faces are back in a major way. And it’s refreshing to make virtual eye contact again.
There are plenty of ways to do it, as outlined in each of these examples.
Glassbox Media uses a full-screen oversized video on the homepage. You can see the subject’s eyes and feel engaged with the person on the screen. She seems happy, and the size and scale of the face make you feel almost like you are in a room with her, ready to have a conversation.
Reamarie uses smaller still images with tight crops to bring you into the faces on the screen. There are more, bigger faces throughout the scroll as well so that the user feels connected to the people and product. Even if an image isn’t super large, a tight crop can make it feel bigger and create the same level of engagement as something that has more size on the screen.
Recruit Holdings Co. uses a trio of people together, happy and smiling, to establish a connection with website visitors. The entire design features similar images throughout and makes you feel like you want to be a part of what they are offering. Note that the people are close together and without masks; that’s a culture shift we are starting to see in a lot of imagery.
The post 3 Essential Design Trends, March 2022 appeared first on VVDesigns.]]>
Planning to develop in JavaScript? You need a framework of libraries for efficient coding. But which is the most popular JavaScript framework?
In May 2021, Stack Overflow conducted the 2021 Developer survey to learn about what tools developers are using, how they are learning them, and their opinions. Over 80,000 developers took part in the survey, 69.7% of those being developers by profession.
JavaScript is the most popular programming language in the survey. This article highlights the findings on JavaScript and its frameworks. Hopefully, it will shed a light on what technology you should keep an eye on in 2022.
JavaScript Was the Most Popular Programming Language
According to the developer survey by Stack Overflow, JavaScript continues to maintain its position as the most popular programming language with over 68% of respondents stating they used it extensively for development. Alongside HTML and CSS, JavaScript is one of the core technologies used on the web.
JavaScript is also used in other development environments like Node.js for backend development, Apache CouchDB, and Adobe Acrobat. JavaScript’s usages have also extended to mobile, game, and desktop development. Its increasing adoption can be attributed to the fact that it is easy to learn, implement, and receives a ton of support from its developer community.
Most Popular JavaScript Frameworks
In the JavaScript ecosystem, the list of JavaScript frameworks keeps on growing. Frameworks are a collection of pre-built JavaScript code that is used to make development easy. When choosing a framework, consider your project features, what the framework is good at, and its learning process.
Below are the five most popular JavaScript frameworks.
1. React JS
React surpassed jQuery as the most popular web framework in 2022 with over 40% of professional developers saying they use it extensively. It is an open-source JavaScript library developed by Facebook used to build highly responsive user interfaces. It is declarative and component-based meaning you can reuse components to create complex UIs in a short time.
For new developers, React is easier to learn and use compared to other frameworks like Angular. It has extensive documentation, guides, and a growing community that reduces the learning curve. React is constantly evolving which can be a downside since developers have to keep on relearning the new features. Examples of large websites built with React are Airbnb, Dropbox, Asana, and BBC.
2. jQuery
jQuery was the second most popular web framework. It is an open-source JavaScript library that is used to simplify interaction with the DOM (Document Object Model). It helps you navigate the DOM tree easily.
jQuery is easy to learn and has been around since 2006 and therefore has a large developer community. jQuery however cannot compare with modern web frameworks with advanced features. It is useful for simple applications but can lead to a large codebase if used to build big applications.
3. Angular
.png?q=50&fit=crop&w=750&dpr=1.5)
Angular (26.23%) was the third most popular JavaScript framework after jQuery (34.52%). It is an open-source framework launched by Google in 2016. It can be used on the frontend or backend to create dynamic Single Page Apps (SPAs) and Progressive Web Apps (PWAs) with faster page loads.
Angular offers features such as two-way data binding which enables real-time synchronization between the model and view, has built-in dependency injection, and supports TypeScript. However, it has a steeper learning curve compared to React. Examples of websites created with Angular are Freelancer, IBM, and PayPal.
4. Express
Express (also Express.js) came in at the fourth position among web frameworks at 23.6%. It is a minimal and fast JavaScript framework for backend development. It is used with Node.js, a JavaScript runtime, to create efficient web applications fast.
Express provides an easy way for managing routing, setting up middleware packages, and integrating plugins in your server-side code. With Express, you can create RESTful APIs to integrate with other apps and dynamically serve static HTML files to the web. Examples of companies using Express in the codebase are Twitter, Intuit, and Accenture.
5. Vue.js
Vue.js was the fifth most popular JavaScript framework. It is an open-source framework designed to improve on the features of frontend frameworks like Angular and React. For instance, it has both the virtual DOM used in React and two-way binding as in Angular.
With Vue.js, you can build PWAs and SPAs quickly and efficiently. Vue.js is a good first JavaScript for beginners as it has good documentation and is easy to learn. Examples of websites built using Vue.js are Upwork, Adobe, and Grammarly.
Svelte Was the Most Loved Frontend JavaScript Framework
It is worth noting that Svelte was in the top position as the most loved web framework as per 71.47% of the respondents and surpassed React at 69.28%.
Svelte is blazing fast compared to React and other dominant frameworks like Angular and Vue.js. This is attributed to the fact that Svelte compiles code down to optimized Vanilla JavaScript and you don’t have to ship the overhead framework code. With Sapper which is similar to Next.js in React and Svelte Native for mobile development, Svelte will probably continue increasing in popularity.
Examples of companies using Svelte for their websites are The New York Times, Nesta, and Rakuten.
AngularJS Was the Most Dreaded Web Framework
While Svelte was the most loved framework, AngularJS was the least loved. It was dreaded by 76.82% of the respondents. Perhaps this is because as of December 2021, Google discontinued AngularJS long-term support after providing it for over three years. If you are using AngularJS in your application, you will need to migrate to Angular or other frameworks because as time progresses, your application can crash due to a lack of updates.
Choosing a JavaScript Framework
The popularity of a framework might signify a large development ecosystem that can make learning easier. However, that should not be the only factor you consider when choosing a framework. Always consider where you want to use that framework. The design and features of your application should come first before the choice of development tool. Next, research the framework to learn about its features and complexities.
This article has highlighted the five most popular JavaScript frameworks according to StackOverflow’s 2021 developer survey. It provides a good start for making a decision on the technology you will use to build your solution.
The post The Most Popular JavaScript Frameworks of 2022 appeared first on VVDesigns.]]>In this round of the series, we have a tool to create nice realistic shadows using CSS3, several new frameworks and libraries for React.js, and PHP.
Without further ado, let’s jump in to see the full list.
Shadow Palette
A little GUI tool that allows you to create a more realistic drop shadow for your website. You can customize several of the shadow properties such as the light position, color, and opacity. The tool will generate the CSS rules that you simply can copy and implement on your website.
Firefox Relay
Relay is a service from Firefox that allows you to create an email alias of your real email address. You can create several email aliases of one email address, and use them when signing up on websites like e-Commerce, membership, and subscription, etc. It’s a great service to protect your online privacy further.
SVGCode
A little online app to convert raster images into SVG easily. The tool supports several image formats including JPG, PNG, and WebP. It’s built with the “Progressive Web App” approach, which means even if you’re offline, the app is still going to work. Simply drag-n-drop any image onto the app and it’s all set.
A simple framework to create a reactive application using PHP. Internally, it leverages some PHP extension like Coroutines and Fibers (available since PHP8.1) to handle the concurrent and async operations akin to Node.js. You can use Framework X everywhere that runs PHP including shared hosting.
Shopify Hydrogen
Hydrogen is a new React.js framework from the team at Shopify. It comes with building blocks to create a custom Shopify storefront such as utility functions, custom React.js hooks, and components.
If you’re looking to build a Headless store with Shopify, this framework has got you covered with the necessities.
Frappe Charts
A lightweight JavaScript library to create a chart. You can install it as an NPM module or simply load the JavaScript file on your webpage like in the old days.
It supports several types of charts including bar and pie charts. It’s also responsive and fast since it is not dependent on other external JavaScript libraries.
Chrome DevTools Recorder
Google Chrome has just made an improvement to the DevTools with a feature called “Recorder”. This feature allows you to record your website interaction.
You can replay the recorded interaction or emulate it with certain environment and conditions. It provides a better measure on the real web application performance. This feature will be shipped as a beta feature on Chrome 97.
Remix
Remix is a new full-stack React.js framework that provides an abstraction to build a better website. It handles routing, error requests, and other tiny details of building a website with great user experience — out of the box. The framework will help web developers become more productive.
Redux Toolkit
An official collection of tools from Redux that aims to make developing a website with Redux more efficient. It includes some utility functions and configs for common use cases.
This way you can be more productive, instead of befuddling with the configurations and the boilerplates, which can be a bit cumbersome.
Bulletproof React
A collection of tips, advice, and best practices for developing React.js application. Here you will learn a lot of topics surrounding app architecture, project structure, styling, state management, and a lot more. If want to improve your React.js skills, you should definitely have it bookmarked.
Apache EChart
An open-source initiative from Apache, EChart is more than just a chart JavaScript library. It’s a robust collection of interactive charts with animations, and with an overall better visual. This allows you to convey the data to the users better than a static chart.
Awesome Design Tools
This resource contains a massive list of tools for designers from various categories. Here you can find tools for accessibility, prototyping, sketching, stock assets (icons, photots, etc), and a lot more. I’m pretty sure a lot of designers will find this list extremely useful.
Localstack
Localstack is a fully-functioning local AWS cloud stack. This means you can develop, run and test your AWS application offline. It supports a number of AWS services including AWS Lambda, S3, DynamoDB, Kinesis, SQS, and SNS.
Having AWS stack run locally will help you speed up and simplify the testing and development workflow of your application.
Founder Resources
A collection of resources like tools and content for those who’d like to start their journey as a business or startup founder. Being an entrepreneur is not easy. So get this list bookmarked and get prepared.
EmailValidator
A PHP library that makes it easy to validate an email address. It provides several methods of validation including validation through the email RFC, DNS, or you can also write your own validation.
Docker OSX
A Docker image that allows you to run a container with macOS. This is another cool stuff to help effectively test your application and ensure that it runs across different platforms.
Fonoster
An open-source alternative to Twilio. It allows you to run a stack application from VOIP, SMS, mail, chat, and video on your own server. A great alternative for those who’d like to have full control over their platform and the data.
Freescout
Freescout is a lightweight help desk application built with Laravel. You can use it to help and manage your customer tickets, mailbox, and conversations. It’s open-source, free, and packed with features.
Freescout is overall a great alternative to the paid-platform app like Zendesk and Help Scout, especially if you value and need control over your data.
Laravel Tenancy
A robust PHP library to set up multitenancy in Laravel. This allows you to run a single Laravel application with multiple database connections. It works seamlessly and works out-of-the-box with several popular Laravel packages like Vapor, Nova, Livewire, and a lot more.
SwiperJS
A modern JavaScript library to create a slider. Designed and intended to be used on mobile websites and apps. SwiperJS is framework agnostic which allows you to use any framework including jQuery and Zepto.
On top of that, it also provides official integration that allows it to work out-of-the-box with some of the most popular modern frameworks like Vue.js, React.js, Svelte and Angular.
But, sometimes, life happens and you have to work alone on a project. Be it a specific technology, budget reasons or something entirely else, it doesn’t really matter. Working alone doesn’t mean it’ll suck or be really stressful if you keep yourself in check.
I worked on a couple of projects as a solo frontend developer, but I rarely had the feeling like I couldn’t do it or that I maybe didn’t learn as much as I could have. If you “act” like there is a whole team involved (or that someone new will be joining you on the project), that can force you not to take shortcuts and do everything properly.
Don’t be lazy
Avoid shortcuts
It’s really easy to skip a couple of steps when working alone because, honestly, is anyone going to notice? The answer should be yes, you’ll notice it!
Opening a pull request that will be merged to master immediately might seem illogical, but having everything consistent will surely help you out in the long run. On top of that, you might notice something wrong when you’re doing a once-over.
Keep your code neat
Keeping your code neat is something you also shouldn’t skimp out on. Linters, prettiers and everything else should be setup as if you were in a team!
Be your own QA
Writing tests is a no-brainer. It’s always a great relief knowing that stuff works even after a refactor. Not having to constantly think about that will allow you to focus on more important things! That shouldn’t change even if you’re working alone.
Documentation!
It might be boring, but if you don’t do it, nobody will. At a first glance, it doesn’t seem important since you’re the only one that will be reading it. I can tell you that I know for a fact that the future you will thank you for it. It’s unrealistic to expect you’ll remember every little detail, even though you’ve written everything yourself. Having a good documentation means that some of the mental burden can be relieved because you can refer to it at any time.
Heck, something might even change within the project and your new teammate will be even faster with the onboarding.
Ask for help
Collaborate with other frontend developers
I have the benefit that there are other brilliant teammates on other projects. They might not know the domain of my project, but they can offer technical help if you explain it to them. Try to make it easy for them to understand it, and I’m sure that you’ll get new insights. The same goes for asking for help online. Just because you’re alone on the project doesn’t mean that you have to do everything by yourself.
If you have work colleagues, it’s not a bad idea to assign them on a pull request once in a while. You might be surprised how tunnel-visioned you can get!
Learn about the domain from backend
If there’s a backend, I’m sure you can discuss domain issues with them, as well. They probably know a lot and it’s a good idea to double-check with them. You might learn about something you weren’t aware of!
Improve wherever you can
Now that you’re alone on the project, you can do anything to improve your development experience. If there is a task that needs to be automated, why wouldn’t you automate it? If you can get the budget for it, you’ll save time and you’ll learn something new. This is a great opportunity to make up for not learning from your teammates. Something that a senior colleague always set up can now be done by you. It might seem daunting if it’s out of your comfort zone, but hey, how else are you going to learn?
From personal experience, these situations taught me some skills I would rarely have the time to research in other projects.
By sticking to these tips, I’ve been able to maximise my learning and do quality work as much as I could. Not having a teammate doesn’t mean that you really have to be isolated from everything else. And, who knows, you might even get someone working on a project by your side so you want to be proud of what you’re capable of doing all on your own, right?
The post How to work as a solo frontend developer appeared first on VVDesigns.]]>If you’re looking to up your skills in creating JavaScript Sets, check out these methods.
A JavaScript Set is a collection of values that are unique.
Sets can hold values of any data type. It can be simple primitives, such as integers or strings, etc, or complex types like arrays or object literals. Values in the Set can only occur once.
In this article, you’ll learn eight JavaScript Set methods you should master today.
1. How to Create a New Set on JavaScript
You can create a new Set object using the new Set() constructor. The Set object stores unique values of any data type. This constructor accepts an iterable object as a parameter.
const setObj = new Set([21, 34, 35, 56, 23]);
console.log(setObj);Output:
Set(5) { 21, 34, 35, 56, 23 }If you don’t specify anything in the parameter, a new empty Set is created.
const setObj = new Set();
console.log(setObj);Output:
Set(0) {}If you try to create a Set with repeating elements, the duplicate elements will be removed and a unique Set will be returned.
const setObj = new Set([1, 2, 3, 1, 2, 3]);
console.log(setObj);Output:
Set(3) { 1, 2, 3 }You can also create a Set using mixed data types.
const setObj = new Set([1, 2, "Hello", [45, 67, 78]]);
console.log(setObj);Output:
Set(4) { 1, 2, 'Hello', [ 45, 67, 78 ] }2. How to Append New Elements to a Set Object
You can append a new element to the end of the Set object using the add() method. This method accepts the value of the element to add to the Set object as a parameter, and returns the new Set object with added value.
const setObj = new Set();
setObj.add("Welcome");
setObj.add("to");
setObj.add("MUO");
console.log(setObj);Output:
Set(3) { 'Welcome', 'to', 'MUO' }You can directly pass the value as a parameter, or you can pass the variable as one instead.
const setObj = new Set();
// Appending value to a Set object
setObj.add("Welcome");
const var1 = "to";
const var2 = "MUO";
// Appending variable to a Set object
setObj.add(var1);
setObj.add(var2);
console.log(setObj);Output:
Set(3) { 'Welcome', 'to', 'MUO' }The add() method also supports chaining.
const setObj = new Set();
// Chaining
setObj.add(1).add(2).add(3);
console.log(setObj);Output:
Set(3) { 1, 2, 3 }If you try to append duplicate elements, only the first instance of the element will be saved.
const setObj = new Set();
setObj.add(1);
setObj.add(2);
setObj.add(3);
setObj.add("M");
setObj.add("U");
setObj.add("O");
setObj.add(1);
setObj.add(2);
setObj.add(3);
console.log(setObj);Output:
Set(6) { 1, 2, 3, 'M', 'U', 'O' }3. How to Remove All Elements From a Set Object
You can remove all elements from a Set object using the clear() method. This method removes all the elements and returns undefined.
const setObj = new Set([1, 2, 3, 4, 5]);
console.log("Size of the Set object: " + setObj.size);
console.log(setObj);
setObj.clear();
console.log("Size of the Set object after clearing elements: " + setObj.size);
console.log(setObj);Output:
Size of the Set object: 5
Set(5) { 1, 2, 3, 4, 5 }
Size of the Set object after clearing elements: 0
Set(0) {}4. How to Delete a Specific Element From a Set Object
You can delete a specific element from a Set object (if it exists) using the delete() method. This method accepts the value to be deleted from the Set. If the value is found, the method returns true. Otherwise, it’ll be false.
const setObj = new Set([1, 2, 3, 4, 5]);
console.log("Initial Set:");
console.log(setObj);
setObj.delete(3);
console.log("Set after deleting 3");
console.log(setObj);Output:
Initial Set:
Set(5) { 1, 2, 3, 4, 5 }
Set after deleting 3
Set(4) { 1, 2, 4, 5 }5. How to Check If an Element Exists in a Set
You can check whether an element exists in a Set object using the has() method. This method accepts the value as a parameter to test for presence in the Set object. If the element is found, the method returns true; otherwise it’ll be false.
const setObj = new Set(["Welcome", "to", "MUO"]);
console.log(setObj.has("MUO"));
console.log(setObj.has("MakeUseOf"));Output:
true
false6. What’s the entries() Method in the JavaScript Set Object?
According to the official MDN Web Docs:
“The entries() method returns a new Iterator object that contains an array of [value, value] for each element in the Set object, in insertion order. For Set objects, there is no key like in Map objects. However, to keep the API similar to the Map object, each entry has the same value for its key and value here, so that an array [value, value] is returned.”
const setObj = new Set(["Welcome", "to", "MUO"]);
for(let entry of setObj.entries()) {
console.log(entry);
}Output:
[ 'Welcome', 'Welcome' ]
[ 'to', 'to' ]
[ 'MUO', 'MUO' ]const setObj = new Set(["Welcome", "to", "MUO"]);
for(let [key, value] of setObj.entries()) {
console.log(value);
}Output:
Welcome
to
MUOThe keys and values in the Set are identical.
const setObj = new Set(["Welcome", "to", "MUO"]);
for(let [key, value] of setObj.entries()) {
console.log(key === value);
}Output:
true
true
true7. What’s the forEach() Method in the JavaScript Set Object?
The forEach() method invokes a function for each element of the Set object. This method returns undefined.
const setObj = new Set([1, 2, 3, 4, 5]);
let sum = 0;
setObj.forEach(function(element) {
sum += element;
});
console.log(sum);Output:
158. What’s the values() Method in the JavaScript Set Object?
The values() method returns an Iterator object that contains all the values in a Set, and it does this in insertion order.
const setObj = new Set([1, 2, 3, 4, 5]);
const iteratorObj = setObj.values();
for (let value of iteratorObj) {
console.log(value);
}Output:
1
2
3
4
5Note: A Set object in JavaScript has no keys. But to make Sets compatible with Maps, the keys() method is used as an alias for the values() method. The keys() method behaves exactly the same as the values() method.
Now You Know How to Create Sets in JavaScript
So, there you have it. Having read this article, you should have plenty to help you master creating Sets on JavaScript.
Creating Sets is crucial for any programmer looking to up their game. Once you’ve mastered this, you can move on to perfecting other skills—such as creating Arrays.
The post 8 JavaScript Set Methods You Should Master Today appeared first on VVDesigns.]]>In the early days of web development, it wasn’t uncommon for one person to do everything. The job title was often referred to as “webmaster,” “web designer,” or “web developer.” These days, there is often more specialization because the web has become so much more advanced. The different areas of focus are usually broken down into three categories: front-end, back-end, and full-stack.
Prefer to watch a video? This article is a companion piece for my Decoded by Christina series on YouTube.https://www.youtube.com/embed/aeY6qoMNXOw?feature=oembed
Front-end vs Back-end vs Full-stack
Front-end
Front-end developers work with browser based languages: HTML for displaying content, CSS for adding styles and JavaScript for interactivity. With the growth and popularity of JavaScript-based frameworks, such as React and Angular, front-end technologies can also be used to create functionality that was once reserved for back end languages.
These languages are also categorized as client-side languages because the browser is also referred to as the client. The client in this context is not someone you’re doing work for!
Back-end
Back-end developers are responsible for the “behind the scenes” functionality such as submitting payment information when making an online purchase or when you’re logging into an account.
Back end developers work with languages that run on a server, such as Python, PHP, C#, Ruby or Java. Back-end developers also work with database technologies, such as MySQL or MongoDB. You don’t need to know all of these languages to be a backend developer and many specialize in a couple of languages and may have some familiarity with others.
Full-stack
There’s also a third category, full-stack, which usually refers to someone who works with both front-end and back-end languages. While the exact languages a full-stack developer specializes in will vary, most are able to work with the foundational front-end languages (HTML, CSS, JavaScript), and one or two back-end languages. They may also have knowledge of JavaScript frameworks.
What skills should I focus on?
When starting out, trying to figure out what to learn can be confusing. If you’re more interested in the visual side of development, focus on gaining front-end skills. If you prefer the logic of building functionality, then focus on back-end skills. Or learn a bit of both to see if maybe full-stack is the best path for you.
My recommendation is to always start with the foundational languages. Frameworks and tools will come and go. But learning the essentials first will make it easier to build upon.
HTML Overview
HTML stands for HyperText Markup Language. Hypertext refers to the links that connect web pages to one another. Markup is how HTML is written, the structure and format used to display content in a web browser.
HTML Syntax
When learning any language, start by getting familiar with the grammar rules and building blocks of that language. When writing code, the syntax refers to these rules and patterns. When writing HTML markup, use HTML tags by wrapping each HTML element name within a left and right angled bracket.
| 1 | <element> |
An opening tag is used to mark the beginning of the element. A closing tag marks the end of the element and must always include a forward slash (/) before the element name. The content to be displayed in the browser is included between the tags.
HTML tags are often written inside of other tags. So when you’re nesting a tag, make sure to close the tags from inside out.
| 1 | <p><strong>Just some example content.</strong></p> |
Formatting HTML
Properly formatting your HTML markup is also important for organization. For the browser, writing all the tags on one line doesn’t matter.
| 1 | <outertag><innertag>Some content</innertag><innertag>Some content</innertag></outertag> |
But for us, it’s convention to use whitespace and indention to make it easier to read. Each nested element is usually written on its own line and indented once, using one tab key space. This will make it easier to see which tags are nested and where the tags open and close.
| 1234 | <outertag> <innertag>Some content</innertag> <innertag>Some content</innertag></outertag> |
But there are also times where nested tags are written within the same line; when an inline element is nested within another inline element or a block element.
| 12345 | <h1>This is a block element.</h1><p>This is a block element containing an <strong>inline element</strong>.</p><div> <p>A block element nested within another block element.</p></div> |
What does that mean? Well, in short, every HTML element is categorized as either an inline or block-level element.
When inline elements are shown in the browser, they are displayed on the same line. So when formatting the HTML, nested inline elements are usually included in the same line as well — in line. When block-level elements are displayed in the browser, they always start on a new line. So when formatting the HTML, block elements are usually written on their own line and indented when they are nested.
As your code gets more detailed, formatting will help you stay organized and make your code easier to read.
HTML Elements
There are many different types of HTML elements. Some are used to display different types of text-based content such as paragraphs (p), headings (h1, h2) and lists (ul, ol, li).
| 1234567 | <!-- Text based elements --><h1>Main heading</h1><p>This is a paragraph.</p><ul> <li>list item</li> <li>list item</li></ul> |
Other types of elements are used to create the page structure and to organize the content into related groupings such as the div, header or footer elements.
| 123456789101112131415 | <!-- Contains structural elements to group & organize content --><div class="content-wrap"> <header> <h1>Main heading</h1> <p>This is an introductory paragraph.</p> </header> <footer> <p>Contains final information related to the page such as:</p> <ul> <li>copyright info</li> <li>contact info</li> <li>and more!</li> </ul> </footer></div> |
Void Elements
Another type of HTML elements are void elements, which do not define structure or content; they are the content. HTML tags are usually written in pairs but void elements are written using only an opening tag.
Here is an example of a paragraph tag, which is not a void element, and a br tag, which is a void element. (This element is used to create a line break within a block of text.)
| 12 | <p>paragraph</p><!-- not a void element --><br> <!-- void element --> |
In the older versions of HTML, a forward slash was also included after the tag name, which is why void elements are sometimes referred to as self-closing tags or elements.
| 12 | <br> <!-- current version of HTML --><br /> <!-- previous version of HTML --> |
The latest version of HTML does not require this, but you may still see the old syntax being used. Both formats are valid but I would recommend using the most current syntax.
HTML Semantics
These different HTML elements were created for web browsers to interpret the meaning of the content, referred to as semantics. Most HTML elements have semantic meanings but there are a few that don’t.
For example, the header element is used to group introductory page content such as an h1 tag, which is used to define the main heading on the page. But the div and span elements do not have any specific meanings and are usually used to group or wrap content for CSS styling purposes only.
| 123456789 | <div class="content-wrap"> <header> <h1>Main heading</h1> <p>This is an introductory paragraph.</p> </header> <footer> <p>Contains final content related to the page.</p> </footer></div> |
Writing semantic HTML is basically you communicating with the browser.
HTML Attributes
Sometimes you’ll need to add some extra information to an HTML element. You can do so by adding an attribute. For example, the href attribute is used to add a URL to a link tag (a). Adding this information will actually take you to another web page or website when you select the link. Without it, the link will go nowhere.
| 12 | <a href="<https://christinatruong.com>">My Website!</a><a>Link goes nowhere without the "href" attribute</a> |
Attributes can also be used to change the behaviour of an element. For example, to make a form field a required field, add a required attribute to the element. The user will not be able to submit the form until they fill out all the required inputs.
| 123 | <element attribute></element><element attribute="value"></element><element attribute='value'></element> |
When using multiple attributes, order doesn’t matter but each attribute should be separated by a space. In the following example, the tag includes a src attribute, used to link to the image file, and an alt attribute, used to describe the image.
| 1 | <img src="image.png" alt="description of image"> |
HTML Comments
HTML comments can be used to leave notes for yourself or for others, which can be useful when working on a team or on an open source project. Comments are also often used for hiding code for later use, for debugging and to organize the document.
To write a comment, start with a left angled bracket, followed by an exclamation mark and two dashes. Then close the comment with two more dashes and the right angled bracket. Any characters can be included as a comment as long as it remains within the opening and closing syntax.
| 1234567 | <!-- Comments are included here. --><!-- ****** Another comment with text and symbols. ***** --><!-- Here's a multi-line comment. I can write anything here as long as I close the comment.--> |
By following this syntax, the comment will only be seen in the source code and will not be displayed in the browser.
There’s a lot more to learn about HTML and I hope to focus more on specific concepts throughout this series but that pretty much sums up the general HTML concepts and common terminology.
CSS Overview
CSS stands for Cascading Style Sheet and was created to separate content from presentation. HTML elements are used to define the meaning of the content to the browser. CSS is used to determine how the elements will look by defining the colours, size, positioning of the element, and much more.
CSS Ruleset Syntax and Terminology
Styles are defined using a CSS ruleset, which is made up of various components.
| 123 | selector { property: value;} |
- Selectors are used to select the HTML elements to apply the styles to.
- A declaration block is everything within and including the curly braces
{}and is used to group together all the declarations for that selector. - A declaration is the actual style rule, which is written using a property and value, separated by a colon (
:). Each declaration must also end with a semi-colon (;) to indicate that the instruction is complete. - A CSS property defines which style is applied to the element.
- Values are specific to and define the characteristics of that property.
So in the following example, body is the selector, width is the property, and 100% is the value.
| 123 | body { width: 100%;} |
Shorthand and longhand syntax
Many, but not all, CSS property values can be defined using a longhand or shorthand syntax.
When using shorthand, multiple longhand properties can be set using just one corresponding property. This is generally more efficient because you’ll end up writing less CSS overall. And it’s best to write just what you need.
| 12345678 | /* shorthand */padding: 20px; /* longhand */padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; |
But! There are always exceptions to the rule and sometimes using the longhand syntax is the better choice, especially when you want to define a more specific style.
For example, just using the padding property with at value of 20px will apply this style to all four sides of the element. This is more efficient than using the longhand syntax, which would require four declarations. But if you only wanted to add some padding to the top of the element, then using the one longhand property, padding-top, would also be appropriate.
CSS Comments
Comments can also be written in CSS. And just like HTML comments, it’s used to help us read our code better. Start with a slash and asterisk (/*) and close the comment in the opposite order (*/). Any characters can be included as a comment as long as it remains within the opening and closing syntax.
| 123456789101112 | /* This is a comment on one line */ /* This is a comment over two lines.*/ /* --------------------------------------This is a comment using dashes to create visual separation. It is often used for organizing code in the CSS file.-----------------------------------------*/ |
Use it to leave notes, or for organizing your code blocks, or to hide a line or block of CSS. This technique is used for debugging and testing by temporarily hiding different declarations from the browser, without actually deleting the code. To uncomment the code, delete the slash and asterisk surrounding the declarations.
| 1234567891011 | header { /* height: 200px; */ width: 400px;} /* h1 { font-size: 16px; color: red;}*/ |
Formatting and whitespace
Just like HTML, whitespace, line breaks and indentation are used to format CSS for readability. A common formatting convention is to write each declaration on its own line and indented with one tab key space, to make the groupings easier to see.
| 123456789 | body { background: lightblue; font-size: 12px;}h1 { color: blue; font-size: 25px; font-weight: normal;} |
A white space between the property and value is not required but can also be added for readability.
| 123 | /* both are valid */padding:20px 10px;padding: 20px 10px; |
Often, when white space is required in a value, it’s used to separate multiple values used with a single property.
| 1234567 | /* both are valid */padding:20px 10px;padding: 20px 10px; /* both are not valid */padding: 20px10px;padding:20px10px; |
After gaining some experience writing CSS, you’ll probably start to notice that everybody has a personal preference for how they format their code. You’ll likely develop your own style too. Just try to be consistent and use an organizational style that makes sense to you. I’ve included some extra resources at the end of the post.
The post Introduction to HTML and CSS appeared first on VVDesigns.]]>