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

Brief: Code a landing page.

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

What I learned

Browsers on iOS use Safari’s rendering engine!!! Hence why the design worked on dev tools and not on an actual iPhone. This shows the importance of testing a design on a real device.

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.