#front end structure

[strings-in-a-minor]

This week we’re getting stuck into ordered and unordered lists, images, and links. So far so good - making sense and output on screen looks correct so far. In this example I am using a single-entry unordered list <ul> (Female Cats) to introduce a selection of popular names presented in an ordered list <ol>. Very basic indeed but another milestone on the structural journey - learning how items are sequenced on the page before style elements are applied. In the first example the html isn’t very pretty. I should have put the ordered list nested inside the unordered list. Have a look at the 3rd image to see the updated structure and the 4th shows the tweaked code to get the nicer display.

This week we also looked at how to represent and manipulate links - understanding the difference between relative and absolute links, calling a link from within a site, referencing an external link, opening in a new browser window using the ‘target’ attribute. Why would you ever want to send someone away from your site (i.e. not in a new window) when you spend big money on SEO to get a visitor to your site in the first place!

Finally we learned about <id> attributes of elements. Handy way to break up a long page (see Wikipedia for example). Not only does it help with on-page navigation, using id attributes allows you to link to specific sections of a page inside a standard <a href=   > construct. Let’s look at that --> here is a standard H2 sub heading block level element with a specific id attribute called “Mailing Address”

<h2 id="Mailing_address">Mailing address</h2>.    

By pinpointing a section within a long page with this attribute and then calling on that attribute using “#” in a link it allows us to jump directly to that section on that page from.....anywhere! 

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

Beautiful stuff. Keep it coming, we are making progress!

[strings-in-a-minor]

Opening post - the obligatory “Hello World”!

 Been a long time since I did any scripting - from small acorns mighty oaks may grow (one hopes).

Gentle reintroduction to the topic and a reminder how much I used to love HTML and elegant front end design.

Looking forward to moving through this module and going deep into this subject.

[duomly]

How to create a front end project structure that scales and is easy to maintain?

In this video, I'll explain to you how to create a front end project structure that scales and is easy to maintain.Subscribe ► https://www.youtube.com/channe...

The written version of the video: frontend project structure

In this video, I'll explain to you how to create a front end project structure that scales and is easy to maintain.

Since modern frontend frameworks and libraries came into play, the client-side became responsible for a big part of logic and functionality. Now, we even start building serverless projects, where almost everything needs to be processed by the frontend.

This approach requires us to carefully plan the architecture of the frontend application and organize the project in the best possible way to make it scalable and easily maintainable.

When we start a new application, that may grow in time, it’s not enough to set up a clean installation of the app using CLI and just start coding. When the project grows, it can become really difficult to add new features or maintain the older code. That’s why it’s necessary to think about the proper organization of the folders structure, make it easy to use, and save time on the onboarding process for new programmers.

Before organizing the app’s folders structure, it’s important to understand the flow of the application, we will be building and have the technology selected.

In this article, I’d like to focus on an application built with React.js because this frontend stack it’s a choice of many companies, and it brings a lot of difficulty for developers.

React.js doesn’t provide a lot of insight about structuring the code base, as for example Angular. Besides that, installing additional libraries and plugins necessary for the React.js application like Redux or React-Router requires the initial structure to be changed for the better maintainability and scalability. And as always, it’s better to do it at the beginning of the development, then try to change it when the deadline is close.

Let's start!