Creating an article: case study for Creative Practice #1

The outlines

As a UX/UI designer, it was important for me to learn the basics of the front-end for my work to:

• Build better ideas based on feasible solutions
• Know the potential boundaries, what’s possible/impossible to create
• To be more effective in working with the development team and understand their language

I started studying at Creative Practice and have already learned Visual Studio Code, the basic principles of HTML, some tags, how to connect CSS, and make tables.

In this lesson, I got acquainted with the block model, CSS selectors, pseudo-classes, pseudo-elements, and cross-platform.

The goal

Learn the block model, semantic layout, work with pseudo-classes and media queries.

The process and the result

1. I created the article based on a design layout.
2. With the help of pseudo-classes, I styled different states of the link: normal, hover, and visited.
3. I applied media queries and created style options for each of the breakpoints, adapted: element sizes, element type, border rounding, text sizes, outer margins between elements, and element alignment.