Blog – Angélique – Web developer.

Huddle landing page with single introductory section. Responsive landing page with semantic HTML.

Screenshot of the huddle landing page with single introductory section challenge

The challenge
- Screenshot
- Links
My process

Overview

The challenge

Users should be able to:

View the optimal layout for the page depending on their device’s screen size
See hover states for all interactive elements on the page

Screenshot

My process

Build the HTML with semantic markup.
Add CSS for styling and responsiveness.
Test the layout for browser inconsistencies.

Built with

Semantic HTML5 markup
Reset CSS
CSS custom properties
Flexbox

What I learned

Applying rules to <body> that prevent the display of scrollbars, since all elements had to fit in the viewport.

body {
    overflow: hidden;
    // ...
}

body {

overflow: hidden;

// ...

}

Using SVG as a background image, resizing and stretching it to match the design.

body {
    background-image: url("./../images/bg-desktop.svg");
    background-size: 92vw 100vh;
    background-position: left top;
    background-color: var(--main-bg-color);
    background-repeat: no-repeat;
    -apple-background-size: 100% auto;
    background-attachment: fixed;
    // ...
}

body {

background-image: url("./../images/bg-desktop.svg");

background-size: 92vw 100vh;

background-position: left top;

background-color: var(--main-bg-color);

background-repeat: no-repeat;

-apple-background-size: 100% auto;

background-attachment: fixed;

// ...

}

Continued development

Get a better understanding of SVG.

Author

Website – Angélique D. Faye
Frontend Mentor – @angelique-df

What is HTML?

An HTML mockup displayed on a laptop screen.

HTML stands for Hypertext Markup Language. It is used to structure web pages and one of the most important web development technologies.

Challenge Clipboard Landing Page. Responsive landing page with semantic HTML using flexbox and Gulp.

Brief : Intégrer une maquette de landing page responsive.

source

Challenge Huddle Landing Page. Responsive landing page with semantic HTML using flexbox and Gulp.

Brief : Intégrer une maquette de landing page responsive.

source

Changing CSS property values with input elements.

Aperçu du rendu variables css avec javascript

Brief : Changer les valeurs de propriétés CSS grâce à des éléments input type range ou color, et JavaScript.

JavaScript and CSS clock. Using Date() to display the current time with CSS.

Aperçu du rendu horloge avec javascript et css

Brief : Coder une horloge indiquant l’heure en JavaScript. Elle doit rester à jour sans que l’utilisateur n’ait besoin de recharger la page.

JavaScript Drum Kit. Code a virtual musical instrument.

Aperçu du rendu batterie avec javascript

Brief : Coder un instrument à percussion dans le navigateur. Jouer un son lorsque l’utilisateur clique sur une note ou appuie une touche du clavier correspondante.

Table of contents